api请求axios配置

1.每次请求基本配置

1.在api文件夹下创建request.js文件

2.引入必要的组件以及创建基地址

import axios from 'axios'    //引入axios包
const baseUrl = 'http://big-event-vue-api-t.itheima.net' //这里用黑马链接

3.配置每次请求的基地址以及过期时间

const instance = axios.create({
  baseUrl,    //上方的请求链接
  timeout: 5000    //过期时间设置,这里是5秒后过期
})

2.请求拦截器

1.引入所需组件

import { useUserToken } from '@/stores'    //引用pinia仓库里的token
import { ElMessage } from 'element-plus'    //引用element-ui里的消息组件

2.配置请求拦截器

instance.interceptors.request.use(
  (config) => {
    const useToken = useUserToken()    //应用pinia仓库
    if (useToken.token) {              //如果仓库里用户token存在则配置在请求头里
      config.headers.Authorization = useToken.token
    }
    return config
  },
  (err) => Promise.reject(err)        //如果错误则使用promise抛出
)

3.响应拦截器

1.引入所需组件，配置拦截器

import router from '../router'
instance.interceptors.response.use(
  (res) => {
    if (res.data.code === 0) {            //如果响应回来的code与后端成功code匹配则返回成功消息
      ElMessage(res.data.message)
      return res
    }

    ElMessage.error(res.data.message || '服务错误')    //否则返回错误原因
    return Promise.reject(res.data)
  },
  (err) => {
    if (err.response?.status === 401) {                //如果是特殊情况token过期则路由跳传去登录页
      ElMessage.error(err.response.data.message)
      router.push('/login')
    }

    ElMessage.error(err.response.data.message || '服务错误')    //返回错误消息
    return Promise.reject(err.response.data)
  }
)

4.引出内容

export default instance
export { baseUrl }