实现全局封装axios教程

一、整体流程

首先，我们来看一下实现全局封装axios的整体流程。你可以按照以下步骤进行操作：

| 步骤 | 操作 |
| ---- | ---- |
| 1    | 创建一个axios实例       |
| 2    | 配置axios实例           |
| 3    | 创建一个请求拦截器       |
| 4    | 创建一个响应拦截器       |
| 5    | 将axios实例挂载到Vue原型链上 |

二、详细步骤

1. 创建一个axios实例

首先，在项目的入口文件（如main.js）中引入axios，并创建一个axios实例：

import axios from 'axios';

const instance = axios.create();

2. 配置axios实例

在创建的axios实例中，可以进行一些全局配置，比如设置默认的请求超时时间、设置默认请求头等：

instance.defaults.timeout = 10000; // 设置超时时间为10秒
instance.defaults.headers.common['Authorization'] = 'Bearer token'; // 设置默认请求头Authorization

3. 创建一个请求拦截器

在axios实例中创建一个请求拦截器，用于在发送请求前做一些处理，比如在请求头中添加token：

instance.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

4. 创建一个响应拦截器

同样，在axios实例中创建一个响应拦截器，用于在接收到响应后做一些处理，比如统一处理错误信息：

instance.interceptors.response.use(response => {
  if (response.data.code !== 200) {
    // 处理错误信息
  }
  return response.data;
}, error => {
  return Promise.reject(error);
});

5. 将axios实例挂载到Vue原型链上

最后，将封装好的axios实例挂载到Vue的原型链上，这样在组件中就可以直接使用axios进行网络请求：

Vue.prototype.$http = instance;

三、状态图

stateDiagram
    [*] --> 创建axios实例
    创建axios实例 --> 配置axios实例
    配置axios实例 --> 创建请求拦截器
    创建请求拦截器 --> 创建响应拦截器
    创建响应拦截器 --> 挂载axios实例到Vue原型链
    挂载axios实例到Vue原型链 --> [*]

结尾

通过以上步骤，你就可以成功实现全局封装axios了。希望这篇教程对你有所帮助，如果有任何问题，欢迎随时向我提问！祝你学习顺利，编程愉快！