1.开发环境 uni-app
2.电脑系统 windows10业余为版
3.在应用uni-app开发的过程中,咱们须要数据申请,然而应用uni-app 框架自带的申请形式咱们须要写很多反复的代码,我进行了封装,心愿对你有所帮忙,为什么要封装h5端数据申请还要封装微信端的数据申请,上面会有所解释!
4.封装前的数据申请办法:

chengeth5(){            return new Promise((resolve,reject)=>{                uni.request({                    url:'/api/feng', //申请接口                    method:'post',  //申请办法                    data:this.ChenindexconOnj,//传递的参数                    success:(res)=>{                        // console.log(res);//输入申请到的数据                        resolve(res);                    },                })            })        },

5.对h5端数据申请封装,在 pages 目录下新建 h5hhtp 文件,在文件下新建一个 h5hhp.js,增加如下代码:

function req(obj) {    return new Promise((resolve, reject) => {        // const HOST = baseUrl;        const HOST = 'http://192.168.137.78:3000';  //申请后盾地址        var method = obj.method || "GET"; //申请形式,默认为GET        var url = HOST + obj.url || "";        var url =  obj.url || "";        var data = obj.data || {};        var header = obj.header || obj.method == ('post' || 'POST') ? {            'Content-Type': obj.contentType || 'application/x-www-form-urlencoded',        } : {            'Content-Type': obj.contentType || 'application/json',        };        var success = obj.success; // 胜利回调函数        var fail = obj.fail; //示意失败后，要执行的回调函数        uni.request({            url: url,            data: data,            method: method,            header: header,            success: ((res) => {                if (res.statusCode === 203) {                    console.log('返回203状态码')                    // 错误处理，返回登录页                    // uni.reLaunch({url:'/pages/login/index'})                } else if (res.statusCode === 200) {                    resolve(res)                }            }),            fail: ((err) => {                reject(err)            })        })    })}export default req

6.在http目录同级,新增 api 文件,在api目录下,新建一个 api.js,增加代码如下:

import req from '../h5http/h5http.js'  //导入封装的 h5数据申请let api = {};//申请数据// getfeng 示意办法名; data 示意参数;method 示意申请办法 ;url 示意申请接口api.getfeng = data => {    return req({        url: '/api/feng',        method: 'post',        data: data    })};export default api

7.在vue模板中应用,在methods中增加如下代码:

chengeth5(){            api.getfeng({name:'陈',age:'100'}).then((res)=>{                console.log(res);            })},

8.在onLoad中增加如下代码:

// #ifdef H5this.chengeth5();// #endif

9.运行到浏览器,成果如下:

9-1.传参成果为:

10.当初咱们来证实一下这个封装在微信端能应用吗?在onLoad中增加如下代码:

// #ifdef MP-WEIXINthis.chengeth5();// #endif

11.成果如下:

咱们看到了同样的办法在 h5端就没问题,然而在 微信端不行,所以我才会对h5数据申请和微信端的数据申请进行了不同的封装

12.对微信端数据申请封装,在 pages 同级新增 wxhttp,在文件wxhttp 下新增 wxhttp.js,增加代码如下:

const BASE_URL='http://192.168.137.78:3000';export const myRequest=(options)=>{    return new Promise((resolve,reject)=>{        uni.request({            url:BASE_URL+options.url,//申请接口            method:options.method || 'GET', //申请办法,默认为 GET            data:options.data || {}, //传递的参数            success:(res)=>{                if(res.statusCode !==200){  //做一个判断,如果http状态返回的不是200,示意数据申请失败了                    return uni.showToast({                        title:'获取数据失败'                    })                }                resolve(res)            },            fail:(err)=>{                uni.showToast({                    title:'申请接口失败'                })                reject(err)            }        })    })}

13把微信封装的数据申请挂载到全局,在main.js中增加如下如下:

import {myRequest} from 'wxhttp/wxhttp.js';Vue.prototype.$myRequest=myRequest;

14.在vue模板中华应用,在methods中增加如下代码:

async chenwxget(){    let res=await this.$myRequest({        url:'/feng', //申请接口        method:'post', //申请形式        data:this.chenWxObj, //传递的参数    })    console.log(res);},

15.把我的项目运行到微信小程序,成果如下:

15-1.传参成果为:

16.咱们把封装的微信申请办法,简略的批改,运行到h5端,在 onLoad中增加如下代码:

// #ifdef MP-WEIXINthis.chenwxget();// #endif

17.运行到浏览器成果如下:

咱们看到这个图,咱们晓得微信封装的数据申请在 h5是不能应用的,h5端封装的申请不能在微信端应用,所以我才对 h5端数据申请和微信端数据申请进行了不同的封装。

18.解决办法,在onLoad中应用条件编译,应用不同的数据申请封装,在methods中增加代码如下:

chengeth5(){    api.getfeng({name:'陈',age:'100'}).then((res)=>{        console.log(res);    })},async chenwxget(){let res=await this.$myRequest({    url:'/feng',    method:'post',})console.log(res);},

19.在onLoad中增加如下代码:

// #ifdef H5this.chengeth5();// #endif// #ifdef MP-WEIXINthis.chenwxget();// #endif

20.运行到h5端,成果为:

21.运行到微信小程序,成果为:

22.本期的分享到了这里就完结啦,是不是很nice,心愿对你有所帮忙,让咱们一起致力走向巅峰!