Axios 是一个基于 Promise 的 HTTP 客户端,可以用于浏览器和 Node.js 中。Axios 实现了浏览器和 Node.js 中单一的 API,可以自动转换请求和响应数据,支持Promise API,拦截请求和响应,和取消请求。

1. 发送 GET 请求
使用 Axios 发送 GET 请求的方式很简单:

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

可以看到,`axios.get()` 方法会自动将参数拼装到请求 URL 中,发送请求并返回 Promise 对象。在 Promise 对象的成功回调中,我们可以通过 `response.data` 获取服务器的响应数据。

2. 发送 POST 请求
使用 Axios 发送 POST 请求同样非常简单:

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });


在这里,我们通过 `axios.post()` 方法向服务器发送了一个包含 `firstName` 和 `lastName` 数据的 POST 请求。同样,我们可以在 Promise 对象的成功回调中拿到服务器的响应数据。

3. 拦截请求和响应
通过使用 Axios 提供的拦截器,我们可以在请求和响应的过程中处理和修改数据。例如,我们可以在请求发送前添加一个 loading 效果或者在请求成功返回后做一些数据处理。我们可以通过 `axios.interceptors.request.use()` 和 `axios.interceptors.response.use()` 方法来实现拦截。

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
    // 隐藏loading效果
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});

4. 取消请求

在开发中,有时我们可能需要取消请求操作。Axios 提供了一个 CancelToken 工具,通过使用这个工具我们可以轻松地取消任何未完成的请求。这个工具使用起来非常简单。

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user', {
  cancelToken: new CancelToken(function executor(c) {
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  })
});

// 取消请求
cancel();

以上介绍了 Axios 的一些重要特性,它的优点不仅仅限于以上几点。使用 Axios 可以方便的拦截请求、设置请求头、处理响应数据等,是一个功能强大、易使用的请求库。如果你准备在项目中使用一个 HTTP 请求库,Axios 可以是你不错的选择。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐