欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

axios 拦截器的用法

程序员文章站 2022-07-03 15:01:56
什么是拦截器拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;创建 axios 实例const Axios = axios.create({ baseURL: HOST, // 请求的域名 timeout: 10000000000, // 响应超时时间 responseType: "json",...

什么是拦截器

拦截器就是拦截每一次的请求和响应,然后进行相应的处理。请求拦截器,它可以统一在你发送请求前在请求体里加上token;响应拦截器,是在接受到响应之后进行的一些操作,比如,服务器返回登录状态失效,需要重新登录的时候,就给它跳到登录页面;

创建 axios 实例

const Axios = axios.create({
    baseURL: HOST, // 请求的域名
    timeout: 10000000000, // 响应超时时间
    responseType: "json",
    withCredentials: true, // 跨域请求是否要携带cookie
    headers: {
      'Content-Type': 'application-json/x-www-form-urlencoded;charset=utf-8',
    }
  });

请求拦截器

 //在发送请求之前做的一些操作,例如加上token
Axios .interceptors.request.use( config => {  
     // 为请求头对象添加 token 验证的 Authorization 字段
     config.headers.Authorization = window.sessionStorage.getItem('token')
     return config
}, error => {
     //对请求错误做些什么
     return Promise.reject(error)
})

响应拦截器

//接收到响应后要做些什么,比如跳转到登录页
Axios.interceptors.response.use(response => {
	response => {
    //拦截响应,做统一处理 
    if (response.data.code) {
      switch (response.data.code) {
        case 1002:
          store.state.isLogin = false
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
}, error => {
     //对响应错误做些什么
     return Promise.reject(error)
})

对每个请求方式进行封装

export function requestGet(url, query) {
// 查
    return Axios.get(url, { params: query || {} })
      .then((res) => {
        return Promise.resolve(res.data)
        console.log(res.data);
      })
  }
 
  export function requestPost(url, data) {
  // 改
    return Axios.post(url, data)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }
  
  export function requestPut(url, data) {
  // 增
    return Axios.put(url, data)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }
  
  export function requestDelete(url) {
  // 删
    return Axios.delete(url)
      .then((res) => {
        return Promise.resolve(res.data)
      })
  }

应用

最后把封装的实例在需要的地方导入就可以了。

本文地址:https://blog.csdn.net/sinat_33255495/article/details/107933556

相关标签: VUE专栏 axios