您的位置:

axios和application/json的使用

一、axios基本使用

axios是一个基于Promise的HTTP客户端,用于浏览器和Node.js环境中。可以发送GET、POST、PUT、DELETE等HTTP请求,支持Promise API,可以拦截请求和响应,也可以使用浏览器的XHR api发送请求。

下面是一个简单的例子:

axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

其中,axios.get()会返回一个Promise,当Promise被resolve时候,会传递response参数。

二、发送application/json格式的数据

当需要传递json格式的数据时,可以使用以下方法:

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  },
  {
    headers: {
      'Content-Type': 'application/json'
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

其中,使用headers指定Content-Type为application/json,服务器可以通过request的Content-Type来判断请求数据的格式。

三、处理application/json格式的响应数据

当服务器响应的数据格式为application/json时,axios会自动将响应数据解析为json格式。

axios.get('/user?id=12345')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

其中,response.data为服务器响应的json数据,可以直接使用。

四、拦截请求和响应

axios可以使用interceptors完成请求和响应的拦截。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

其中,interceptors.request用于拦截请求,interceptors.response用于拦截响应。其中两个匿名函数都需要返回一个Promise。

五、总结

通过以上例子,我们可以知道axios是一个非常强大的HTTP客户端,可以处理复杂的请求和响应数据格式。通过拦截器,还可以对请求和响应进行统一处理。以上是axios和application/json格式的使用方法,写得比较简单,实际使用中还可以更加灵活地使用axios完成各种HTTP请求。