1.開發(fā)環(huán)境 uni-app

2.電腦系統(tǒng) windows10專業(yè)為版

3.在使用uni-app開發(fā)的過程中,我們需要數(shù)據(jù)請求,但是使用uni-app 框架自帶的請求方式我們需要寫很多重復(fù)的代碼,我進行了封裝,希望對你有所幫助,為什么要封裝h5端數(shù)據(jù)請求還要封裝微信端的數(shù)據(jù)請求,下面會有所解釋!

4.封裝前的數(shù)據(jù)請求方法:

chengeth5(){
            return new Promise((resolve,reject)=>{
                uni.request({
                    url:'/api/feng', //請求接口
                    method:'post',  //請求方法
                    data:this.ChenindexconOnj,//傳遞的參數(shù)
                    success:(res)=>{
                        // console.log(res);//輸出請求到的數(shù)據(jù)
                        resolve(res);
                    },
                })
            })
        },        

5.對h5端數(shù)據(jù)請求封裝,在 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"; //請求方式,默認(rèn)為GET
        var url = HOST + obj.url || "";
        var url =  obj.url || "";
        var data = http://www.wxapp-union.com/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; // 成功回調(diào)函數(shù)
        var fail = obj.fail; //表示失敗后，要執(zhí)行的回調(diào)函數(shù)
        uni.request({
            url: url,
            data: data,
            method: method,
            header: header,
            success: ((res) => {
                if (res.statusCode === 203) {
                    console.log('返回203狀態(tài)碼')
                    // 錯誤處理，返回登錄頁
                    // 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'  //導(dǎo)入封裝的 h5數(shù)據(jù)請求
let api = {};

//請求數(shù)據(jù)
// getfeng 表示方法名; data 表示參數(shù);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 H5
this.chengeth5();
// #endif

9.運行到瀏覽器,效果如下:

9-1.傳參效果為:

10.現(xiàn)在我們來證明一下這個封裝在微信端能使用嗎?在onLoad中添加如下代碼:

// #ifdef MP-WEIXIN
this.chengeth5();
// #endif

11.效果如下:

我們看到了同樣的方法在 h5端就沒問題,但是在 微信端不行,所以我才會對h5數(shù)據(jù)請求和微信端的數(shù)據(jù)請求進行了不同的封裝

12.對微信端數(shù)據(jù)請求封裝,在 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', //請求方法,默認(rèn)為 GET
            data:options.data || {}, //傳遞的參數(shù)
            success:(res)=>{
                if(res.statusCode !==200){  //做一個判斷,如果http狀態(tài)返回的不是200,表示數(shù)據(jù)請求失敗了
                    return uni.showToast({
                        title:'獲取數(shù)據(jù)失敗'
                    })
                }
                resolve(res)
            },
            fail:(err)=>{
                uni.showToast({
                    title:'請求接口失敗'
                })
                reject(err)
            }
        })
    })
}

13把微信封裝的數(shù)據(jù)請求掛載到全局,在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, //傳遞的參數(shù)
    })
    console.log(res);
},

15.把項目運行到微信小程序,效果如下:

15-1.傳參效果為:

16.我們把封裝的微信請求方法,簡單的修改,運行到h5端,在 onLoad中添加如下代碼:

// #ifdef MP-WEIXIN
this.chenwxget();
// #endif

17.運行到瀏覽器效果如下:

我們看到這個圖,我們知道微信封裝的數(shù)據(jù)請求在 h5是不能使用的,h5端封裝的請求不能在微信端使用,所以我才對 h5端數(shù)據(jù)請求和微信端數(shù)據(jù)請求進行了不同的封裝。

18.解決方法,在onLoad中使用條件編譯,使用不同的數(shù)據(jù)請求封裝,在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 H5
this.chengeth5();
// #endif
// #ifdef MP-WEIXIN
this.chenwxget();
// #endif

20.運行到h5端,效果為:

21.運行到微信小程序,效果為: