最近刚开始写uniapp，涉及到了网络请求这一块儿。按照以前写小程序、APP的经验，肯定也会封装一个网络请求的工具，方便后续的使用。然后看了很多相关的文章，综合整理一下。
1：对uni.request的简单封装
首先新建一个用于请求的js文件--networkRequest.js
function netRequest(url, data = {}, method) {
data["deviceType"] = 3; //这里可以加入一些固定不变的数据
return new Promise(function(resolve, reject) {
uni.request({
url: url,
method: method || "POST",
data: data,
header: {
'content-type': 'application/json',
},
success(res) {
console.log('network---success', res);
//自己和后台的约定code
if (res.statusCode && res.statusCode == 200) {
resolve(res.data);
}
},
fail: function(err) {
console.log('network---fail', err);
reject(err);
}
})
});
}
module.exports = {
netRequest
}
或者是直接将方法export，然后只传递一个字典
export const netRequest2 = (options) => {
options.data["deviceType"] = 3;
return new Promise((resolve , reject) => {
uni.request({
url: options.url,
method: options.method || "POST",
data:options.data,
header: {
'Content-Type': 'application/json',
},
success(res) {
console.log('network---success', res);
if (res.statusCode && res.statusCode == 200) {
resolve(res.data);
}
},
fail: function(err) {
console.log('network---fail', err);
reject(err);
}
})
});
}
2：将方法挂载到全局
在网上看了下，将方法挂载全局大致分为两种。一种是导入networkRequest里面对应export的方法
//导入方法
import {netRequest2 } from './utils/networkRequest.js'
//挂载Vue上
Vue.prototype.$netRequest2 = netRequest2
一种是导入networkRequest.js文件。
//导入js文件
import networkRequest from './utils/networkRequest.js'
//挂载Vue上
Vue.prototype.networkRequest = networkRequest
3：在适当的地方引用
因为挂载到了全局，所以在对应页面的script里面调用就行了
1：如果是挂载export的方法，调用
var reqData = {
url: "http:example-url",
data: {"string":"string-----"}
}
this.$netRequest2(reqData).then(res => {
console.log('返回',res);
});
2：如果挂载的是js文件，调用方式
var url = "http:example-url";
var data = {"string": "string-------"};
this.networkRequest.netRequest(url,data).then(res => {
console.log('--------------',res)
});
如果接口比较多，为了方便管理，还可以单独创建一个请求方法的js文件，将所有的请求api的方法全部放在里面，然后挂载到全局，方便你自己在其他地方使用。
