你不知道的Axios封装api方式

前言

 本篇文章主要给大家介绍两种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 =  await 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'
	提示：路径别名需要自己去配置才有的，具体如何配置请参照其他博主的相关文章哈。
	函数参数说明： 
		第一个：对应 apis下的某个key（需要在apis配置后才能使用，否则要写很长的api请求地址）
		第二个：请求的参数对象
*/
// 目前我已知的获取异步函数只有两种(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方式真的很奈斯。如果文中哪里写错了、需要更改的地方、或者有更好的建议欢迎各位大佬在评论区指出。
 突破当前段位的天花板，一起向更高的段位迈进，加油，兄弟们！💪