promise封裝wx.request的方法

Posted on by

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

為什麼要封裝wx.request？

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

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

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

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

該怎麼封裝wx.request？

我們找好瞭封裝的理由和工具，那接下來就是針對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')
    }
 
    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內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：