[JavaScript知识库]vue项目中axios模块封装(请求拦截器响应拦截器)

目的：基于axios封装一个请求工具，调用接口时使用。

• 安装 axios

npm i axios

• 新建 src/utils/request.js 模块，代码如下

// 通用接口调用模块
import axios from 'axios'
import store from '@/store'
import router from '@/router'

// 接口调用基准路径
export const baseURL = ''

// 创建一个独立的实例对象
const instance = axios.create({
  baseURL: baseURL
})

// 响应拦截器
instance.interceptors.response.use(res => {
  // 把返回的数据去掉一层data属性
  return res.data
}, err => {
  // 处理token实现的问题
  if (err.response && err.response.status === 401) {
    // token失效了，跳转到登录页
    return router.push('/login')
  }
  return Promise.reject(err)
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 统一添加请求头
  const token = store.state.user.profile.token
  if (token) {
    // 已经登录成功，统一添加token
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
}, err => {
  return Promise.reject(err)
})

// 封装通用的接口调用方法
export default (options) => {
  return instance({
    method: options.method || 'GET',
    url: options.url,
    // ES6规则：对象的key可以是动态的变量
    [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
  })
}

// import request from './request.js'
// request({
//   method: 'post',
//   url: '#',
//   data: {
//     account: 'admin',
//     pwd: 123
//   }
// })

总结：

1. 创建axios实例
2. 封装通用的请求方法
3. 配置相关的参数，统一处理请求参数
4. 请求拦截器：处理请求头token
5. 响应拦截器：1、处理后端返回的数据；2、处理token的失效问题

注意：对象的键可以是动态的变量（ES6的规则）