前言
本篇文章主要给大家介绍两种axios 封装api的方式。第一种是每个api分模块进行封装，第二种是所有api接口和请求函数都写在一个js文件中。两者的优缺点文章后面再说哈，因为需要脑子里有印象后再来对比这样更直观一些，这样就不会太抽象。😊
一、api分模块进行封装
// 创建一个api文件夹，里面存放若干个api.js文件
// 例如这是商品分类页的 category.js
import axios from "@/utils/request";
export const getShopList = () => {
return axios.request({
url: "/api/getshoplist", // 获取商品列表
method: "get",
});
};
export const editShop = data => {
return axios.request({
url: '/api/editshop', // 修改商品信息
method: "post",
data
});
};
// 如果是购物车的 shopCart.js
export const getCartList = () => {
return axios.request({
url: "/api/getcartlist", // 获取购物车列表
method: "get",
});
};
export const editCart = data => {
return axios.request({
url: '/api/editcartshop', // 修改购物车信息
method: "post",
data
});
};
有没有发现两个api.js文件中的请求函数代码是一样的，既然一样那我们为何不用函数封装的思想进行改造呢?也就是下面准备给大家介绍的。
二、封装的请求函数和api接口都统一写在一个index.js文件中管理
创建一个api文件夹，里面存放一个index.js文件，index.js的内容如下
1、引入封装好的axios.js文件
import request from '@/utils/axios';
2、apis对象存放各种以 key为api名称，value为api接口地址
// 提示：每个模块的所有api接口用华丽的注释分割线隔开并注明所属模块名称
const apis = {
//------------------------个人中心-------------------
getUserInfo: '/api/getUserInfo', // 获取用户信息
editUserInfo: '/api/editUserInfo', // 修改用户信息
//------------------------购物车--------------------
getCartList: '/api/getCartList', // 获取购物车列表
editCart: '/api/editcartshop', // 修改购物车信息
}
3、上面封装好了就可以拿来使用啦,下面给大家介绍几种常用的api请求函数哈
// 再次提示一下，怕有些同学忘了: request是从外部封装好的axios文件导入进来的
/* params:
key：对应上面apis对象中的key，也就是说需要提前在上面配置好你的api
data: 前端传的params对象
url: 三元判断用户是否有传入key，有的话该key是否为上面apis对象下某个api key，
如果不是就让该url的值等于空字符串。
data: 用户传入的值，因为对象中key和value同名可以省略写一个，无需写data: data。*/
// GET 请求
export function getData(key, data) {
return request({
url: key ? apis[key] : '',
method: 'get',
data,
/* 这里还可以配置请求头，虽然在axios封装的函数(request)中可以配置全部接口请求时都携带上解决跨域
的请求头，但是有些特殊的接口则需要手动加上(此处并不是说你必须加上哈，而是指某些特殊的接口)。*/
headers:{
"Content-Type": "application/json",
"Access-Control-Allow-Origin": "*",
}
});
}
// POST 请求
export function postData(key, data) {
return request({
url: key ? apis[key] : '',
method: 'post',
data,
});
}
// 删除或修改单条数据
export function delOnlyData(key, id) {
return request({
url: `${apis[key]}?id=${id}`,
method: 'post',
});
}
// 登录请求
/* 有些同学看到这里可能有个疑问，那我如果只修改部分值应该怎么写，答案有两种：
1、将你要修改的属性放到一个对象中，然后传过来，用对象.形式取出 在模板字符串中拼接。
2、直接把整个data类似上面的获取数据一样直接传进来就行。 */
/* for example
let params = { code: 1, phone: 123456789 } // 将要传的属性都放到临时对象中，最终传入接口
const res = login('login', params)
*/
export function login(key, data) {
return request({
url: key ? `${apis[key]}?code=${data.code}&phone=${data.phone}`,
method: 'post',
});
}
// 上传图片
export function uploadImg(key, file) {
if (!file) return;
let formData = new FormData();
formData.append('file', file);
return request({
url: key ? apis[key] : '',
method: 'post',
headers: {
'Content-Type': 'multipart/form-data',
},
data: formData,
});
}
4、接口函数已经封装好了，接下来就是使用啦
/* 引入方式：
1、使用相对路径本地引入 import { login } from '../../api/index'
2、使用路径别名alias import { login } from '@/api/index'
提示：路径别名需要自己去配置才有的，具体如何配置请参照其他博主的相关文章哈。
*/
// 目前我已知的获取异步函数只有两种(promise, async await)，可能还有其他，暂且介绍这两种
import { login } from '@/api/index'
// 第一种 原生promise
login(){
let params = { code: 1, phone: 123456789 }
login('login', params)
.then( res => {})
.catch( err => {} )
}
// 第二种：async await 这种是我强烈推荐的同时也是我最喜欢的写法，没有回调地狱，干净又卫生啊，兄弟们😄
async Login(){
let params = { code: 1, phone: 123456789 }
const res = await login('login', params)
if(res.code == 0) {}
}
区别
第一种：需要创建多个api.js，封装请求的函数重复度高，查找时需要一个一个api.js点进去看。
第二种：可以封装公用的函数，也可以写指定页面使用的函数，同时还可以把所有api都放一起，用对象字面量直接获取使用。这种统一管理的方法可以减少创建很多的api.js，同时还利于api接口的维护和查找，这也是我为什么要写这篇文章的原因。
总结
感谢各位能看到这里，如果大家觉得还可以建议去实操下哈，文中第二种封装api方式真的很奈斯。如果文中哪里写错了、需要更改的地方、或者有更好的建议欢迎各位大佬在评论区指出。
突破当前段位的天花板，一起向更高的段位迈进，加油，兄弟们！💪