axios 设置全局事件

axios 设置全局事件

在前端开发中，我们经常会使用 axios 来发送网络请求。axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js 环境。它支持异步请求、拦截请求和响应、转换请求和响应数据等功能，非常方便实用。

有时候我们需要在整个项目中统一处理一些网络请求的事件，比如请求开始时显示 loading，请求结束时隐藏 loading，或者在请求失败时弹出错误提示。这时候就可以使用 axios 的全局事件来实现。

axios 全局事件的设置方法

要设置 axios 的全局事件，我们可以使用 axios 的拦截器来实现。拦截器是 axios 提供的一个功能，可以在请求或响应被 then 或 catch 处理之前拦截它们。我们可以在拦截器中设置全局事件。

下面是一个设置 axios 全局事件的示例代码：

// 创建一个 axios 实例
const instance = axios.create();

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前做些什么，比如显示 loading
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 对响应数据做点什么，比如隐藏 loading
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

// 设置全局 axios 实例
axios.defaults = instance.defaults;

上面的代码中，我们首先创建了一个 axios 实例 instance，然后通过 instance.interceptors.request 和 instance.interceptors.response 来设置请求和响应的拦截器，从而实现全局事件的设置。最后通过将 instance.defaults 赋值给 axios.defaults 来应用全局设置。

一个完整的示例

下面是一个完整的示例，我们将在请求开始时显示 loading，请求结束时隐藏 loading，请求失败时显示错误提示：

// 创建一个 axios 实例
const instance = axios.create();

// loading 实例
const loadingInstance = Loading.service({ fullscreen: true });

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在发送请求之前显示 loading
  loadingInstance.show();
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 响应拦截器
instance.interceptors.response.use(response => {
  // 隐藏 loading
  loadingInstance.hide();
  return response;
}, error => {
  // 显示错误提示
  Message.error(error.message);
  return Promise.reject(error);
});

// 设置全局 axios 实例
axios.defaults = instance.defaults;

在上面的示例中，我们通过 Loading.service 创建了一个 loading 实例，在请求开始时调用 loadingInstance.show() 显示 loading，在请求结束时调用 loadingInstance.hide() 隐藏 loading。在请求失败时，利用 Message.error 显示错误提示。

总结

通过设置 axios 的全局事件，我们可以方便地在整个项目中统一处理网络请求的事件，提升开发效率，减少重复劳动。在实际项目中，我们可以根据具体需求，在拦截器中添加更多的处理逻辑，比如统一处理响应数据格式、刷新 token 等。

希望本文能够帮助大家更好地了解如何设置 axios 的全局事件，提升前端开发的效率和质量。

---

gantt
    title axios 设置全局事件示例
    section 学习
    学习axios                   :done, a1, 2022-11-01, 3d
    学习拦截器                  :done, a2, after a1, 3d
    学习全局事件设置            :done, a3, after a2, 3d
    section 实践
    实践代码示例                :active, b1, 2022-11-07, 3d
    测试全局事件效果            :b2, after b1, 2d

journey
    title axios 设置全局事件示例
    section 学习
    学习axios                   : 2022-11-01
    学习拦截器