前言

在vue项目中，我们通常使用axios与后台进行数据交互，axios是一款基于promise封装的库，可以运行在浏览器端和node环境中，在写项目中，必然少不了对接后端的接口，那么接口的基地址基本是一致的，判断用户是否登录过，这些重复的操作使代码变得臃肿，那么咱们可以使用axios拦截器进行处理

什么是拦截器

• 拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应被 then 或 catch 处理前拦截它们

• 拦截器又分为2种

  • 请求拦截器 - 添加统一cookie、请求体加验证、设置请求头等
  • 响应拦截器 - 数据统一处理等，也常来判断登录失效等

配置拦截器

请求拦截器

axios.interceptors.request.use(req => {
    // 发送请求前想做些什么
    return req
}, err => {
    // 对请求错误做些什么
    return Promise.reject(err)
})

响应拦截器

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

实例使用

const ins = axios.create()
ins.interceptors.requst.use(req => {}, err=> {})

拦截器案例

• 对baseURL进行统一处理
• 当服务器响应结果中的code不为0时，需要使用alert弹出错误消息msg
• 如果服务器响应头中出现Authorization：token，需要把响应头中的token保存到localStorage
• 请求时，如果发现本地localStorage中包含token，需要将其带入到请求头中

// baseUrl统一处理
const ins = axios.create({
  baseURL: 'https://study.com'
})

// 响应拦截器，只会给这个实例拦截
ins.interceptors.response.use(function(resp) {
  // 服务器给了授权码，保存到本地服务器
  const token = resp.headers.authorization 
  if (token) {
    localStorage.setItem('token', token)
  }
  // 请求成功状态码为0，没有请求成功则弹出消息
  if(resp.data.code !== 0) {
    alert(resp.data.msg)
  }
  // 仅得到响应体中的data属性
  return resp.data.data;
}, function(err) {
  // 对响应错误做点什么
  alert(err.message)
})

// 请求拦截器，更改配置
ins.interceptors.request.use(function(){
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.authorization = `Bearer ${token}`
  }
  return config;
})

// 注册
async function reg(loginId,loginPwd, nickname){
  return await ins.post('/api/user/reg', {loginId, loginPwd, nickname})
}

// 登录
async function login(loginId, loginPwd) {
  return await ins.post('/api/user/login', {
    loginId,
    loginPwd
  })
}

// 账号是否存在
async function exists(loginId) {
  return await ins.get('/api/user/exists', {
    params: {
      loginId
    }
  })
}

// 恢复登录,获取当前登录的用户值
async function profile() {
  return await ins.get('/api/user/profile')
}

(async function() {
  await login('admin', '123456')
})()

本文完，希望对大家有所帮助～