axios 的三层封装进阶版
1. 用处
- 在做项目的时候频繁的去调接口其实非常麻烦,这种重复的工作就需要axios的三层封装来解决。
2. 简单版的三层封装实现
1. 第一层
- 第一步当然是安装引入axios了
yarn add axios
- 创建一个js文件,用来封装第一层。
import axios from "axios";
- 设置基础的服务器地址
axios.defaults.baseURL = ‘服务器地址’
- 然后
一定要暴露出去
,因为第二层会引入。
//默认暴露
export default axios
2. 第二层
- 创建一个js文件,还是先引入,引入第一层的axios。注意这个引入的文件是第一层创建的js文件。
//根据自己路径引入
import axios from "@/utils/axios.js";
- 写好api接口,暴露出去。get方式参数要用params,post用data。
- get 方式
//get方式
export const getGoodsList = (params) => {
return axios({
method: 'get',
url: '/goods/catelist',
params,
})
}
- post方式
//post方式
export const EditGoodsClass = (data) => {
return axios({
method: 'post',
url: '/goods/editcate',
data,
})
}
3. 第三层
- 第三层自然是引入使用了,在vue组件中引入。注意引入的是
第二层的js文件
。
import { getGoodsList, EditGoodsClass,} from "@/api/user.js";
- 去使用,因为请求是异步的,所以可以async、await修饰它。
async getList() {
let res = await getUserList(this.form);//使用
this.tableData = res.data.data;
this.total = res.data.total;
},
3. 进阶版的axios三层封装。
1. 响应拦截
- 在发请求后,收到数据一般要根据不同的状态进行不同的处理,而不是直接使用。
- 去官网可以直接找到axios的拦截器。
- 这里的状态码要根据服务器的数据来。
axios.interceptors.response.use(function (res) {
if ((typeof res.data.code) === 'number') {
// 3.1 根据反馈结果显示提示信息。
if (res.data.code === 0) {
//成功时,用elenetUI显示成功的提示信息
Message.success(res.data.msg)
} else if (res.data.code === 200) {
Message.success(res.data.msg)
} else {
//失败显示失败的
Message.error(res.data.msg)
}
}
return res;
}, function (error) {
// 这里可以处理违规访问,跳转登录页。
return Promise.reject(error);
})
2. 请求拦截
axios.interceptors.request.use(function (config) {
// 在发送请求之前可以携带token
if (local.get('token')) {
config.headers.Authorization = 'Bearer ' + local.get('token')
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
})
这样就基本完成了进阶版