promise封裝wx.request的方法

更新時(shí)間：2021年05月08日 10:11:43 作者：郭郭郭牧鑫

這篇文章主要介紹了promise封裝wx.request的方法,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

上篇文章給大家介紹了使用Promise封裝小程序wx.request的實(shí)現(xiàn)方法，本文重點(diǎn)給大家介紹promise封裝wx.request的方法，具體內(nèi)容如下所示：

為什么要封裝wx.request？

因?yàn)槲覀冋?qǐng)求接口時(shí)，有時(shí)候會(huì)請(qǐng)求一個(gè)接口的多個(gè)api，如果沒有使用封裝，那么我們編寫代碼會(huì)變得繁瑣，并且也會(huì)導(dǎo)致性能問題。

封裝的話，利于我們編寫，并且提高用戶體驗(yàn)和便于代碼的修改。

對(duì)于封裝的選擇為什么使用promise？

當(dāng)我們進(jìn)行微信小程序的編寫時(shí)，寫到wx.request的時(shí)候，我想大家一定不陌生這種寫法，和$.ajax的寫法有相似之處。我們對(duì)于$.ajax的封裝，想必大家并不陌生，這也就不難讓我們聯(lián)想到promise了。并且我們的微信小程序是支持es6語法，那promise就是一個(gè)好得封裝選擇。

該怎么封裝wx.request？

我們找好了封裝的理由和工具，那接下來就是針對(duì)wx.request這個(gè)棘手的東西進(jìn)行封裝了，首先在我們的開發(fā)工具中創(chuàng)建好文件

我們用一個(gè)大的文件夾將其包裹，在將內(nèi)容分部處理

在這里插入圖片描述

首先呢，在我們的fetch.js文件中，我們用promise來對(duì)wx.request進(jìn)行封裝：

//promise封裝wx.request
    module.exports=(url,data,method)=>{
        //先定義promise
        let promise=new Promise((resolve,reject)=>{
            wx.request({
                url:url,
                data:data,
                method:method,
 
                //成功時(shí)執(zhí)行
                success(res){
                    resolve(res)
                },
 
                //失敗時(shí)執(zhí)行
                fail(err){
                    reject(err)
                },
    })
    })
                //將promise推出去
                return promise
    }

然后，在我們的api.js文件中，我們可以將所需要請(qǐng)求的東西都放在這里，方便統(tǒng)一管理：

//接口的管理
module.exports={
    "banner":"/h8/home/multidata"
}

最后，在我們的http.js文件中，將其集中起來使用：

//引入文件
    const api=require("./api")
    const fetch=require("./fetch")
 
//定義路徑
    let baseUrl="http://123.207.32.32:8000/api"
 
//導(dǎo)出內(nèi)容
    function banner(){
        return fetch(baseUrl+api.banner,{},'get')
    }
 
    module.exports={
        banner
    }

封裝好以后，我們需在全局app.js中引入才可使用：

  const http=require('./http/http.js')
 
    App({
      http,
    })

在文件中使用：

    //引入app
    const app=getApp()
 
    Page({
      data: {
       list:[]
      }
 
    onLoad: function () {
        app.http.banner().then(res)=>{
            this.setData({
                list:res.data.data.banner.list        
        })
            }
    }

到此這篇關(guān)于promise封裝wx.request的方法的文章就介紹到這了,更多相關(guān)promise封裝wx.request內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: