vue项目中如何封装通用axios

1,410 阅读2分钟

前言

如何在vue项目中封装通用的axios呢?为什么要封装呢?直接发请求不好吗?封装后有什么好处呢?你是否同样有这样的疑问呢?一起跟随本文的脚步来看看如何封装一个通用的axios吧~


一、为什么需要封装axios?

  • 统一管理基地址
  • 对请求、响应进行处理
  • 方便向后台服务器发送请求,减少冗余代码

二、如何封装?

1. 安装依赖

在vue项目根目录下打开任意终端窗口,运行如下命令 npm install axios

2. 封装

:文件名自定义,utils目录下方常用的工具函数。

src/utils目录下新建request.js文件

代码如下(示例):

import axios from 'axios'

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

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

export default (options) => {
    return instance({
        // 默认 get
        method: options.method || 'GET',
        url: options.url,
        // es6规则:对象的key可以是动态的变量
        [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data
    })
}

设置请求拦截器

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

设置响应拦截器

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

结论:

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

3. 使用

src/api目录下新建index.js文件

代码如下(示例):

import request from '@/utils/request.js'

request({
  method: 'post', // 请求方式
  url: '#', // 请求地址
  data: { // 请求参数
    account: 'admin',
    pwd: 123
  }
})

扩展

1. 对象访问方式

  • 对象.属性名
  • 对象[属性名] ===>好处:属性名称可以是变量

2. 动态键

封装的代码中有这么一段代码,这里来解释一下。 es6新规则,对象的key可以是动态的变量 [options.method.toUpperCase() === 'GET' ? 'params' : 'data']: options.data

[ ]中三元表达式含义:

  • 当传入的值为get时,先将传入的值转大写
  • 与后面的值比较,相等则key的名称为params
  • 反之为data

举个栗子

代码如下(示例):

const obj = {
    msg: 'hello'
}

console.log(obj.msg)
console.log(obj[msg])

const info = 'msg'
// 中括号内的值可以是变量,是动态的
console.log(obj[info])

es6新规则,对象的key可以是动态的变量

const info = 'abc'
// 如果方括号内是变量,key就是动态的。----> abc
// 如果方括号内是''包裹,key就是字符串----> info
const obj = {
    msg: 'hello',
    [info]: 'nihao'
}

console.log(obj)

总结

针不赖~