国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

微信小程序請求封裝(request)

JouyPub / 896人閱讀

摘要:開始寫小程序的時候對小程序請求接口的相當無奈,因為項目急就沒考慮那么多,直接開干。

開始寫小程序的時候對小程序請求接口的requestAPI相當無奈,因為項目急就沒考慮那么多,直接開干。后邊閑下來就考慮了一下做了一個封裝,來統一做一些數據處理,達到減輕開發重復性,優化代碼的作用:

首先我封裝了一個類:

import { base_url } from "../config/api" // 引入我們接口的ip,后續我們只需要傳入api

const tips = {
    1: "抱歉,出現了一個錯誤",
    1005: "appkey無效,請求錯誤",
    3000: "沒有權限",
    ...
} // 多種錯誤處理字符串


----------


export default class HTTP {
    fetch (params) {
        const {
                url,
                method = "GET",
                data = {},
                success
              } = params                            // es6對象解構請求是我們需要的傳參和成功的處理
              
        wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              "Content-Type": "application/json"
            },
            success: res => {
                const { code } = res.data
                
                if (code === 0) {                  // 與后臺約定的成功判斷
                    success && success(res.data)   // 成功的回調
                    return
                }
                
                const { error_code } = res.data
                this._show_error(error_code)       // 失敗的處理,彈出提示框
            },
            fail: err => {
                this._show_error(1)                // 失敗的處理,彈出提示框
            }
        })
    }
    
    _show_error (error_code = 1) {
        const tip = tips[error_code]
        
        wx.showToast({
            title: tip ? tip : tips[1],
            icon: "none",
            duration: 2000
        })
    }
}

這里,我們做了一個簡單的基礎封裝,但是也是必須從回調中做出相應的處理,如果我們需要一個變量直接拿到這次請求的數據呢,那我們就需要用到promise, async await 來進行處理了,代碼如下:

import { base_url } from "../config/api" // 引入我們接口的ip,后續我們只需要傳入api

const tips = {
    1: "抱歉,出現了一個錯誤",
    1005: "appkey無效,請求錯誤",
    3000: "沒有權限",
    ...
} // 多種錯誤處理字符串

export default class HTTP {
    fetch (params) {
      return new Promise((resolve, reject) => {
         const {
                url,
                method = "GET",
                data = {},
                success
              } = params                            // es6對象解構請求是我們需要的傳參和成功的處理
              
         wx.showLoading("加載中")    
              
         wx.request({
            url: base_url + url,
            method,
            data,
            header: {
              "Content-Type": "application/json"
            },
            success: res => {
                const {
                    data = {},                     // data默認是一個對象
                    data : { code, msg }
                } = res
                
                if (code === 0) {                  // 與后臺約定的成功判斷
                    wx.showToast({ title: msg })
                    resolve([null, _data])         // 成功的回調
                    return
                }
                
                const { error_code } = res.data
                this._show_error(error_code)       // 失敗的處理,彈出提示框
                reject([data])                     // 失敗的回調,并暴露出數據
            },
            fail: err => {
                this._show_error(1)                // 失敗的處理,彈出提示框
                reject([{msg = "請求出錯"}])                     // 失敗處理
            },
            complete: () => {
                wx.hideLoading("加載中")
            }
        }).catch(err => err)
      }
   })
        
    
    _show_error (error_code = 1) {
        const tip = tips[error_code]
        
        wx.showToast({
            title: tip ? tip : tips[1],
            icon: "none",
            duration: 2000
        })
    }
}

然后我們在調用的時候直接利用async和await:

import HTTP from "../util/HTTP "
import api from "../api"  // 引入接口

class Model extends HTTP {
    async search (data) {
        const [err, res] = await this.Fetch({
          url: api,
          data
        })
        
     if(err){
         //失敗做的對應處理
         return
     }
     
     // 成功的對應處理
  }
}

如果不采用繼承的方式,那么直接實例化HTTP然后調取fetch也是一樣的方式,這里就不過多演示了
希望大家能提出積極的建議,有問題可以聯系我

文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。

轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105434.html

相關文章

  • 信小程序教學第二章(含視頻):小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

    摘要:調用方法如下微信熱門官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 § 封裝網絡請求及 mock 數據 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導入微信開發工具 上一節中,我們對 index.js 文件中增加了 util 對象,并在對象...

    wqj97 評論0 收藏0
  • 信小程序教學第二章(含視頻):小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

    摘要:調用方法如下微信熱門官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 § 封裝網絡請求及 mock 數據 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導入微信開發工具 上一節中,我們對 index.js 文件中增加了 util 對象,并在對象...

    zhigoo 評論0 收藏0
  • 信小程序教學第二章(含視頻):小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

    摘要:調用方法如下微信熱門官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。 § 封裝網絡請求及 mock 數據 本文配套視頻地址:https://v.qq.com/x/page/i0554... 開始前請把 ch2-3 分支中的 code/ 目錄導入微信開發工具 上一節中,我們對 index.js 文件中增加了 util 對象,并在對象...

    morgan 評論0 收藏0
  • 信小程序 request請求封裝

    摘要:只用,只封裝了,等有用到再重寫,接口用的主要代碼請求前端使用獲取緩存里面的這里是控制器方法回調 request 只用POST,只封裝了POST,等有用到GET再重寫,接口用的ThinkPHP5.0 主要代碼 var apiurl = xxxxx; function http_post(controller,data,cb){ wx.request({ url:apiurl+...

    csRyan 評論0 收藏0

發表評論

0條評論

JouyPub

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<