前言
如何在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)
})
结论:
- 创建axios
- 封装通用的请求方法
- 配置相关的参数,统一处理请求参数
- 请求拦截器:处理请求头token
- 响应拦截器:处理返回数据,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)
总结
针不赖~