五、基于Vue3的开发-异步请求axios封装

1、官方地址

//官方地址
	https://www.axios-http.cn/docs/instance

2、安装

	pnpm add axios

3、具体配置

3.1、创建请求实例

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',  //请求基地址
  timeout: 1000, //响应时间
  headers: {'X-Custom-Header': 'foobar'}
});

3.2、请求拦截器、响应拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

3.3、参考配置

import axios from 'axios'
import { useUserStore } from '@/stores'

import router from '@/router'

const baseURL = 'https://big-event-vue-api-t.itheima.net'

const request = axios.create({
  // TODO 1. 基础地址，超时时间
  baseURL: baseURL,
  timeout: 10000
})

request.interceptors.request.use(
  (config) => {
    // TODO 2. 携带token
    const useStore = useUserStore()
    if (useStore.token) {
      config.headers.Authorization = useStore.token
    }

    return config
  },
  (err) => Promise.reject(err)
)

request.interceptors.response.use(
  (res) => {
    // TODO 3. 处理业务失败
    // TODO 4. 摘取核心响应数据
    if (res.data.code === 0) {
      return res
    }
    ElMessage.error(res.data.message || '服务异常')
    return Promise.reject(res.data)
  },
  (err) => {
    // TODO 5. 处理401错误
    //认证失败或者token过期=》拦截到登录
    if (err.response?.status === 401) {
      router.push('/login')
    }

    console.log(err)
    //错误的默认情况只要给提示就可以
    ElMessage.error(err.response.data.message || '服务异常')
    return Promise.reject(err)
  }
)

export default request
export { baseURL }