前言

 本篇文章主要给大家介绍两种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方式真的很奈斯。如果文中哪里写错了、需要更改的地方、或者有更好的建议欢迎各位大佬在评论区指出。
 突破当前段位的天花板,一起向更高的段位迈进,加油,兄弟们!💪

07-27 09:23