基于vue3封装axios

1. 安装axios

yarn add axios

2. 实例化axios--设置baseURL，超时时间

const instance = axios.create({
  baseURL: '',
  timeout: 5000
})

3. 请求拦截器-全局注入token

instance.interceptors.request.use(config => { // config是请求
  // 1.获取token，从user模块中获取
  const { token } = store.state.user.profile
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config// 加上token再把请求return出去
}, e => Promise.reject(e))

4. 响应拦截器-token失效跳转到登录页，登录后返回到失效页面

instance.interceptors.response.use(res => res.data, e => {
  if (e.response && e.response.status === 401) {
    // router.currentRoute.value获取到当前路由对象
    // .fullPath获取当前路由对象的全路径
    // encodeURIComponent把路径编码成字符串-避免参数出现错误
    const redirectUrl = encodeURIComponent(router.currentRoute.value.fullPath)
    router.push('/login?redirectUrl=', redirectUrl)
  }
  return Promise.reject(e)
})

5. 封装请求

const request = (url, method, submitData) => {
  return instance({
    url,
    method,
    // method.toLowerCase()传参方式变为小写
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}

6. 导出请求

export default request