vue uniapp将封装好的接口批量挂载到原型上

利用循环把目录下的接口文件全部挂载到原型

**webpack4以前附带了许多node.js核心模块的polyfill 在构建时给 bundle附加了庞大的polyfills 在大部分情况下polyfills并不是必须 现在webpack5在模块应用中不再引入polyfills 所以需要单独引入配置
这样就可以在浏览器环境下使用部分 Node.js 的标准库函数

1. 首先需要先下载模块配置

npm install node-polyfill-webpack-plugin

2. 然后在vue.config.js中引入

const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

3. 在module.exports配置

configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  },

4. 将Node下的path引入

const path = require('path')

5. 将api目录下的所有.js为后缀的文件名存入apiList内
   

const apiList = require.context('@/api',false,/\.js$/)  
//require.context有三个形参 1. 目录   2.是否检索子文件夹   3.匹配文件名（用正则）

6. 利用Object.keys()方法拿到apiList的每一项键名,再利用循环将其挂载至vue原型

 apiList.keys().map(key=>{ 
    //利用path.basename方法将所有匹配到的文件后缀去掉
        const name = path.basename(key,'.js')
        //使用循环将封装的接口文件挂载到原型上	   //使用require将文件导入	  
        Vue.prototype['$'+name]=apiList(key)= require("@/api/" + key)
        			//  ↑这里做了一个字符串拼接防止与原型上的键名冲突
    })

封装请求示例
仅为示例 粗略封装一下

const baseUrl="http://www.xxxxx.com"
function request(option,data){
	const {url,method}=option;
	const data=data||{};
	return new Promise((resolve,reject)=>{
		//封装request
		uni.request({
			//仅为示例,并非真实接口
			url:baseUrl+url,
			//默认get请求
			method:method||"get",
			//携带的参数
			data,
			//成功回调
			success((res)=>{
				resolve(res)
			}),
			//失败回调
			fail((err)=>{
				reject(err)
			})
		})
	})
}
export default request

封装接口示例

//示例 此文件名 home.js
//封装接口时只需要导出一个对象即可
const requestPort={
	homeInfo:{
		url:'接口',
		method:'请求方式'
	}
}
export default requestPort

请求示例
这样在就不用每次引入接口文件 直接用指针在Vue的实例上拿即可 用起来会更方便

const obj={
	name:'张三',
}
this.$request(this.$home.homeInfo,obj).then((res)=>{
	console.log(res);
})