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

前言

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

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

安装Axios

javascript 复制代码

 npm install axios
   或者
 yarn add axios

新建network网络请求文件

index.js:网络请求文件

config.js：自动导入apis文件夹下的所有js文件，需要把apis文件下的文件名写进去

home.js:自定义文件名称，根据自己请求类别进行分类，比home，购物车，等等

index.js 文件

javascript 复制代码

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页面了

javascript 复制代码

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

home.js文件

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

javascript 复制代码

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文件中全局导入

javascript 复制代码

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

使用方式

home：apis文件下的文件名称

xuqiuSave：home.js文件中的网络请求名称，

然后将网络请求写成对应得函数即可，使用时候调用对应得函数，就可以调用网络请求，使用得时候只需要调用该文件下的对应得请求即可进行网络请求

携带参数

javascript 复制代码

      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)));
        },

不携带参数

javascript 复制代码

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