微信小程序項(xiàng)目構(gòu)建后http請(qǐng)求封裝的示例分析

這篇文章將為大家詳細(xì)講解有關(guān)微信小程序項(xiàng)目構(gòu)建后http請(qǐng)求封裝的示例分析，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

一、http模塊分裝

首先我們?yōu)槭裁匆シ盅b微信的http模塊呢，我們先看一下微信自帶的http請(qǐng)求它的一個(gè)寫法

wx.request({
  url: 'test.php', //僅為示例，并非真實(shí)的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {    'content-type': 'application/json' // 默認(rèn)值
  },
  success (res) {
    console.log(res.data)
  }
})

這種請(qǐng)求方式呢類似我們古老的jquery方式的分裝，我們需要在success的回調(diào)函數(shù)里面做一些業(yè)務(wù)操作，這種方式會(huì)形成我們的回調(diào)地獄問(wèn)題，同時(shí)代碼也不夠直觀，以及代碼過(guò)于繁瑣；

接下來(lái)我會(huì)通過(guò)promise的這種方式對(duì)于代碼進(jìn)行分裝，將請(qǐng)求方式做一些簡(jiǎn)化

一、項(xiàng)目目錄構(gòu)建

在utils目錄下邊創(chuàng)建request.js文件，去做http請(qǐng)求封裝，我們是通過(guò)promise這種方式進(jìn)行封裝，這樣有利于我們對(duì)于錯(cuò)誤的處理，也可以很直觀的查看業(yè)務(wù)邏輯，封裝示例代碼如下：

/**
 * 
 * @param {String} url 
 * @param {Object} data 
 * @param {String} method 
 * @param {String} header 
 */
function request(url, data={}, method='GET', header="Content-Type: application/json",) {
    return new Promise(function (resolve, reject) {
        wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: 'json',
            responseType: 'text',
            success: (res)=>{
                if(res.statusCode === 200) {
                    if (res.data.code === 200) {
                        resolve(res.data)
                    } else {
                        wx.showToast({
                            title: res.data.msg,
                            icon: 'none',
                            image: '',
                            duration: 1500,
                            mask: false,
                            success: (result)=>{
                                resolve(res.data);
                            },
                        });
                    }
                } else {
                   
                }
            },
            fail: (res)=>{
                // 需要我們加上統(tǒng)一的錯(cuò)誤處理代碼
                reject(res)
            },
            complete: ()=>{}
        });
    }) 
}

// 封裝方法
// 如果對(duì)于header有什么特殊的要求，可以在請(qǐng)求參數(shù)里面做一些添加，例如后續(xù)我們會(huì)在headder中加入我們的sessionkey這些內(nèi)容
// header = {}里面添加header內(nèi)容
// 這塊是一個(gè)簡(jiǎn)版的說(shuō)明
const header = {
    "Content-Type": "application/json",
    // 這個(gè)token是微信登錄以后，將token存入在緩存中
    "token": "*****************"
}

const get = function(url, data, header) {
    return request(url, data, 'GET', header);
}

const post = function(url, data, header) {
    return request(url, data, 'POST', header);
}

const del = function(url, data, header) {
    return request(url, data, '', header);
}


module.exports = {
    get,
    post,
    del,
}

二、項(xiàng)目中請(qǐng)求的使用

首先我們?cè)谑褂玫奈恢靡胛覀兎庋b好的http模塊

import webHttp from './utils/request';

接下里我們可以使用我們封裝好的webhttp工具，比之前直接用微信的request請(qǐng)求方式代碼量降低，同時(shí)鏈?zhǔn)椒绞绞沟眠壿嫺忧逦?/p>

webHttp.get(api.user.info, {
    // nick_name: 
    ...self.globalData.userInfo
}).then((res) => {
    console.log(res);
})

大概上是這樣的一個(gè)過(guò)程，實(shí)際過(guò)程中可能根據(jù)后端restful api的方式需要對(duì)封裝繼續(xù)完善，同樣是對(duì)于post請(qǐng)求的data參數(shù)也有不同的處理，這個(gè)需要按照實(shí)際情況做出相應(yīng)的調(diào)整，如果本篇文章有幫助到你，歡迎收藏點(diǎn)贊，同樣有什么地方有更好的方式歡迎交流，進(jìn)步永不停息

關(guān)于“微信小程序項(xiàng)目構(gòu)建后http請(qǐng)求封裝的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。