axios和application/json的使用

小蓝 • 2024-11-21 22:46 • 编程

一、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请求。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/162628.html