ai问答：使用 Vue3 组合式API 和 TS 配置 axios 拦截器 http错误状态-526互联

通过 axios.create() 方法创建 axios 实例并配置其 config

默认配置，代码如下：

import { defineComponent } from 'vue'
import axios from 'axios'

export default defineComponent({
  setup() {

    // 实例 - 默认配置
    const axiosInstance = axios.create({
      baseURL: 'https://some-domain.com/api/',
      timeout: 1000,
      headers: { 
        Authorization: 'Bearer some-token'
      }
    })

    // 简单封装 - get
    function get(url: string) {
        return axiosInstance.get(url).then(res => {
            console.log(res.data)
            return res
        }).catch(err => {
            console.log('Axios error:', err.message)
            return err
        })
    }

    // 暴露其他方法 ...

    return {
      get
      // ...
    }
  }
})

通过 axios.create() 创建一个 axios 实例 axiosInstance,并配置了:

baseURL:请求前缀
timeout:超时时间
headers:请求头

然后，get、post等方法调用的都是这个 axios 实例，所有请求都会默认使用这些配置。

这可以使我们实现诸如:

不同环境使用不同 baseURL
需要鉴权的请求自动添加 Authorization 请求头
配置统一的超时时间避免请求延迟

axios 支持通过 axios.interceptors 配置拦截器。

我们也可以在拦截器中对常见的 HTTP 错误状态码做不同处理，例如:

401 UNAUTHORIZED:未登录,跳转登录页
403 FORBIDDEN:无权限
404 NOT FOUND:资源不存在
500 INTERNAL SERVER ERROR:服务器内部错误等

我们可以在 axios 实例中这样配置拦截器:

// 拦截器 - request 请求
axiosInstance.interceptors.request.use(config => {
    let test = {
        vue_token: 'Abc123',
        type: 'json'
    };
    if (test.vue_token) {
        config.headers['Authorization'] = `Bearer ${test.vue_token}`
    }
    if (test.type === 'json') {
        config.headers['Content-Type'] = 'application/json;charset=UTF-8'
    }
    if (test.type === 'file') {
        config.headers['Content-Type'] = 'multipart/form-data'
    }
    return config;
}, err => {
    console.log(err)
    return err
});

在 axios 响应拦截器中检测响应状态码，并在状态码不正确时抛出错误
每次请求得到非 200-300 状态码的响应时，响应拦截器会抛出一个错误
我们可以在请求方法中使用 catch 捕获此错误：

// 拦截器 - response 响应
axiosInstance.interceptors.response.use((response) => {
    const status = response.status
    if (status === 401) {
        // 未登录,跳转登录页
        window.location.href = '/login'
    } else if (status >= 400 && status < 500) {
        throw Error(`Client error! Status: ${status}`)
    } else if (status >= 500) {
        throw Error(`Server error! Status: ${status}`)
    }
    return response
})

现在如果 get 请求得到非正常状态码的响应,就会进入 catch 捕获错误信息。

添加了请求拦截器后,每次调用 axiosInstance 发出的请求都会先通过请求拦截器。
我们可以在这里做一些公共的操作,如: