axios 如何封装一个全局请求接口

要封装一个全局请求接口，可以使用 axios 的拦截器来实现。拦截器可以在请求发送前或响应返回后对请求或响应进行处理，可以用来统一处理请求头、响应拦截、错误处理等操作。下面是一个简单的 axios 封装示例：

// 导入 axios
import axios from 'axios'

// 创建 axios 实例
const instance = axios.create({
  baseURL: 'http://api.example.com', // 设置请求的基础 URL
  timeout: 5000 // 设置请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    // 统一添加请求头信息
    config.headers.Authorization = localStorage.getItem('token')
    return config
  },
  error => {
    // 请求错误时做些什么
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    return response.data
  },
  error => {
    // 对响应错误做些什么
    if (error.response) {
      // 根据响应状态码进行错误处理
      switch (error.response.status) {
        case 401:
          // 未登录，跳转到登录页
          break
        case 403:
          // 没有权限，提示用户
          break
        case 404:
          // 请求的资源不存在，提示用户
          break
        default:
          // 其他错误，提示用户
      }
    }
    return Promise.reject(error)
  }
)

// 导出封装后的 axios 实例
export default instance

这样就可以在项目中使用封装后的 axios 实例，而不用每次都手动配置请求头、错误处理等操作。例如：

import axios from '@/utils/request'

// 发送 GET 请求
axios.get('/users').then(response => {
  console.log(response)
})

// 发送 POST 请求
axios.post('/login', { username: 'admin', password: '123456' }).then(response => {
  console.log(response)
})

这里的 `/users` 和 `/login` 是相对于 `baseURL` 的路径，例如 `http://api.example.com/users`、`http://api.example.com/login`。