二次封装axios拦截器

2022-01-26 15:58:21 阅读：217 来源： 互联网

标签：axios 封装 request Token 拦截器 key error store

二次封装axios拦截器更方便处理前端接口请求

1. npm install axios -D

2. 在项目目录下新建request.js(文件名字可自行取,保留.js文件格式即可)

3. 引入vuex存储库  import store from '@/store'(这里不过多提store，如果不懂的小伙伴 可点击下方链接查询)

vue官网文档

4 注解
/**

 * @param {string} process.env.VUE_APP_BASE_API

 */

5.//create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api 的 base_url
  timeout: 12000 // request timeout //设置请求时长
})

6.// request interceptor
service.interceptors.request.use(
  config => {
    // Do something before request is sent
     if (store.getters.Token) {
      // 让每个请求携带token-- ['Token']为自定义key 请根据实际情况自行修改
       config.headers['与后端约定的token访问key'] ='拼接需要的访问key' + store.getters.Token === ''? '': '拼接需要的访问key' + store.getters.Token === undefined? '': '拼接需要的访问key' + store.getters.Token === null? '': '拼接需要的访问key' + store.getters.Token
    }
    // 看项目实际情况 headers token头
    return config
  },
  error => {
    // Do something with request error
    // console.log(error) // for debug
    return Promise.reject(error)
  }
)

7.// response interceptor
service.interceptors.response.use(
  response => {
    // response 根据不同status 状态返回 对应不同的comfirm
    const res = response.data
    if (res.code === '后端返回的status或者code获取其他状态码') {
      // console.log('登录状态已过期')
    } else {
      return res
    }
  },
  error => {
    // console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)

8. //对外暴露 service 对象
export default service

axios二次封装方式有很多，这只是其中的一种，如果有小伙伴不懂axios可点击axios官网文档

标签：axios,封装,request,Token,拦截器,key,error,store
来源： https://blog.csdn.net/weixin_65568537/article/details/122703517

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

二次封装axios拦截器