教你如何在vue项目中封装通用的axios
前言
提示:这里可以添加本文要记录的大概内容:
例如:随着人工智能的不断发展,机器学习这门技术也越来越重要,很多人都开启了学习机器学习,本文就介绍了机器学习的基础内容。
提示:以下是本篇文章正文内容,下面案例可供参考
一、为什么要封装axios?
- 统一管理基地址
- 对请求、响应进行处理
- 方便向后台服务器发送请求,减少冗余代码
示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的。
二、封装步骤
1.安装依赖包
代码如下(示例):
npm install axios
2.开始封装
注:文件名自定义,utils目录下方常用的工具函数。在src/utils目录下新建request.js文件
// 导入axios
import axios from 'axios'
// 创建一个独立的实力对象 1有可能有多个路径 ,2这样便于修改
const baseURL=''
const instance =axios.create({
baseURL:baseURL
})
export default (options)=>{
return instance({
method:option.method||'GET',
url:options.url,
// ES6规则:对象的key可以是动态的变量
[options.method.toUpperCase()==='GET'?'params' :'data']:option.data
})
}
设置请求拦截器
import store from '@/store'
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)
})
设置响应拦截器
import router from '@/router'
instance.interceptors.response.use(config=>{
// 把返回的数据去掉一层data属性
return res,data
}, err=>{
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) // hello
const info='msg'
console.log(obj[info]) // hello
const obj ={
msg:'hello'
}
console.log(obj)
const info =abc
const obj ={
msg:'hello',
[info]:'nihao'
}
console.log(obj) // { msg:'hello', abc:'nihao'}
const obj ={
msg:'hello',
['info']:'nihao'
}
console.log(obj) // { msg:'hello', info:'nihao'}