uniapp中对网络请求的简单封装

最近刚开始写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的方法全部放在里面，然后挂载到全局，方便你自己在其他地方使用。