3-axios

• 安装 axios

npm i axios

封装axios思路

1. 初始化axios实例
2. 请求拦截器,带token
3. 响应拦截器,拿出响应的数据,拦截token失效
4. 定义一个函数使用配置好的axios发送请求
5. 在拦截器之间可以写一些loading之类的控制

封装如下

• 具体封装根据实际需求和设计来进行封装

import axios from 'axios'
// 这里我的vuex做了本地缓存化了
import store from '@/store'
import router from '@/router'

// 因为以后有些请求可能不是通过axios发送的
export const baseURL = 'http://localhost:3000/api/'

// 1.x创建一个新的axios实例
const instance = axios.create({
  // axios的配置: baseURL timeout
  baseURL,
  timeout: 5000
})

// 2.请求拦截器,如果有token,头部携带携带token
instance.interceptors.request.use(config => {
  // 拦截的业务逻辑
  // 进行请求配置的逻辑修改
  // 如果本地有token,头部添加
  // => 获取用户信息对象
  const { profile } = store.state.user
  // => 判断是否信息对象
  if(profile.token) {
    // => 设置token
    config.headers.Authorization = `Bearer ${profile.token}`
  }

  return config
}, err => {
  return Promise.reject(err)
})

// 3.响应拦截器: 1.剥离无效数据 2.处理token失效
instance.interceptors.response.use(result => result.data, err=> {
  // 401 状态码, 进入该函数
  if (err.response && err.response.status === 401) {
    // 跳转Login页面,清除掉token和个人信息
    store.commit('user/setUser', {})
    // 当前路由地址
    const currentPath = encodeURIComponent(router.currentRoute.value.fullPath)
    router.push('/login?redirectUrl=' + currentPath)
    // 登录后跳回当时的操作页面(跳转携带路由地址)
  }
  return Promise.reject(err)
})

// 4.导出一个函数,调用当前的axios实例发请求,返回Promise
const request = (url, method, submitData) => {
  // 负责发请求: 请求的地址,请求的方式,提交的数据
  const prop = method.toLocaleLowerCase() === 'get' ? 'params' : 'data'
  return instance({
    url,
    method,
    // 1.如果是get请求, 通过params来传递 submitData ?a=1&b=2
    // 2.如果的post请求, 通过data来传递 submitData {a=1,b=2}
    [prop]: submitData
  })
}

export default request