uniapp + Axios + 小程序封装网络请求

前言

小程序自带的网络请求使用起来比较麻烦，不便于管理，就需要封装网络请求，减少繁琐步骤，封装最终效果，根据类别将网络请求封装在文件中，使用得时候调用文件名名称加文件中得自定义名称，就可以了

需要vue2+Axios封装网络请求的点这里
需要vue3+ts+Axios封装网络请求的点这里

安装Axios

 npm install axios或者yarn add axios

新建network网络请求文件

index.js:网络请求文件
config.js：自动导入apis文件夹下的所有js文件，需要把apis文件下的文件名写进去
home.js:自定义文件名称，根据自己请求类别进行分类，比home，购物车，等等

index.js 文件

import config from "./config";
// 定义函数完成网络请求
function startNetwork(params) {return new Promise((resolve, reject) => {uni.request({...params,success(res) {resolve(res);if (res.code != 0) {reject(res.msg);}else {resolve(res);}},fail: () => {reject('网络请求失败!');}})});
}
const files = config.files;
//完成文件名称的提取并且将对应文件中的模块数据进行导入
const modules = files.reduce((target, filePath) => {const fileName = filePath.replace(/^(\w+)\.(js)$/i, "$1");const module = require("./apis/" + filePath);for (let key in module) {target[fileName + "/" + key] = module[key];}return target;
}, {});//设置代理数据完成对modules对象的数据拦截
const proxy = new Proxy(modules, {async get(target, key) {const params = target[key](target.meta ? target.meta : null);const res = await startNetwork(params);target.meta = null;return res;}
});//定义函数完成网络数据的获取
async function getDatas(keyName, meta = null) {if (meta) {proxy.meta = meta;}return await proxy[keyName];
}export default getDatas;

config.js文件

把apis文件夹下的名称导入，就不用一个一个导入index.js页面了

export default {files:["home.js",]
}

home.js文件

Header部分这里是我的Header，用的时候替换自己的就可以了

var md5 = require("../../utils/md5.js");
function getHeader() {var timestamp = Date.parse(new Date());timestamp = parseInt(timestamp / 1000);let herder_info = {"content-type": "application/json", // 默认值"access-token": getToken(),"access-sign": md5.hexMD5(timestamp + "c-q-z-n") + "." + timestamp,};return herder_info;
}
const getToken = function () {var token = uni.getStorageSync("token");return token;
};module.exports = {xuqiuInfo(mate) {  //网络请求名称，一个文件中名称不可重复return {method: "GET",url: "",//放入你自己的真实的请求地址header: getHeader(),data: mate,};},xuqiuSave(mate) { //网络请求名称，一个文件中名称不可重复return {method: "POST",url:  "",//放入你自己的真实的请求地址header: getHeader(),data: mate,};},
};

main.js文件中全局导入

import getDatas from './static/network/index.js'
//完成网络请求的全局挂载 
Vue.prototype.$axios = getDatas

使用方式

home：apis文件下的文件名称
xuqiuSave：home.js文件中的网络请求名称，
然后将网络请求写成对应得函数即可，使用时候调用对应得函数，就可以调用网络请求，使用得时候只需要调用该文件下的对应得请求即可进行网络请求

携带参数

      async xuqiuSave() {const res = await this.$axios("home/xuqiuSave", {title: this.search,status: '',//状态(留空查询全部，0禁用1正常)types: '',// 客户分类id (留空查询全部)page: this.currentPage,//页码limit: '',//每页数量});console.log("xuqiuSave", JSON.parse(JSON.stringify(res.data)));},

不携带参数

      async xuqiuInfo() {const res = await this.$axios("home/xuqiuInfo");console.log("xuqiuInfo", JSON.parse(JSON.stringify(res.data)));},