axios二次封装及使用携带token

Axios 是一个基于 Promise 的 HTTP 请求库，可以在浏览器和 Node.js 中使用。二次封装 axios 主要是为了方便使用和统一管理请求，通常我们会在二次封装中加入一些通用的处理逻辑，例如添加请求头、统一处理错误等。

以下是一个简单的 axios 二次封装示例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000,
});

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    return response.data;
  },
  error => {
    return Promise.reject(error.response.data);
  }
);

export default instance;

在这个示例中，我们通过 create 方法创建了一个 axios 实例，设置了基础 URL 和超时时间。然后通过添加请求拦截器，我们可以在每次请求中携带 token，以便后端验证用户身份。最后，通过添加响应拦截器，我们可以统一处理错误响应，返回对应的错误信息。

使用这个二次封装后的 axios，我们可以直接调用它的 get、post 等方法，例如：

import request from './request';

request.get('/users').then(data => {
  console.log(data);
}).catch(error => {
  console.log(error);
});

在这个示例中，我们通过 import 引入了之前封装好的 axios 实例，然后调用了它的 get 方法，请求了 /users 接口。如果请求成功，会输出响应数据，否则会输出错误信息。

需要注意的是，这里的 token 是从 localStorage 中获取的，你也可以从 cookie 或其他地方获取。同时，这个示例中还使用了 Promise.reject 方法，让错误信息可以继续向下传递，方便统一处理。