上篇文章給大家介紹了使用Promise封裝小程式wx.request的實現方法，本文重點給大家介紹promise封裝wx.request的方法，具體內容如下所示：

為什麼要封裝wx.request？

因為我們請求介面時，有時候會請求一個介面的多個api，如果沒有使用封裝，那麼我們編寫程式碼會變得繁瑣，並且也會導致效能問題。

封裝的話，利於我們編寫，並且提高使用者體驗和便於程式碼的修改。

對於封裝的選擇為什麼使用promise？

當我們進行微信小程式的編寫時，寫到wx.request的時候，我想大家一定不陌生這種寫法，和$.ajax的寫法有相似之處。我們對於$.ajax的封裝，想必大家並不陌生，這也就不難讓我們聯想到promise了。並且我們的微信小程式是支援es6語法，那promise就是一個好得封裝選擇。

該怎麼封裝wx.request？

我們找好了封裝的理由www.cppcns.com和工具，那接下來就是針對wx.request這個棘手的東西進行封裝了，首先在我們的開發工具中建立好檔案

我們用一個大的資料夾將其包裹，在將內容分部處理

首先呢，在我們的fetch.js檔案中，我們用promise來對wx.request進行封裝：

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

然後，在我們的api程式設計客棧.js檔案中，我們可以將所需要請求的東西都放在這裡，方便統一管理：

//介面的管理
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"
 
//匯出內容
    function banner(){
        return fetch(baseUrl+api.banner,{},'get')
   http://www.cppcns.com }
 
    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        
        })
            }
    }

到此這篇關於promise封裝wx.request的方法的文章就介紹到這了,更多相關promise封裝wx.request內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！