微信小程序教學第二章（含視頻）：小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

zhigoo 發布于2019-08-21 17:13 / 2246人閱讀

摘要：調用方法如下微信熱門官網訪問官網更快閱讀全部免費分享課程出品全網最新微信小程序基于最新版開發者工具之初中級培訓教程分享。

§ 封裝網絡請求及 mock 數據

本文配套視頻地址：
https://v.qq.com/x/page/i0554...

開始前請把 ch2-3 分支中的 code/ 目錄導入微信開發工具

上一節中，我們對 index.js 文件中增加了 util 對象，并在對象中封裝了很多公用方法

let util = {
  log(){……},
  alert(){……},
  getStorageData(){……},
  setStorageData(){……}
}

本節中，我們對常用的網絡請求方法 wx.request 進行封裝

  let util = {
    // 此處省略部分代碼
    request(opt){
      let {url, data, header, method, dataType} = opt
      let self = this
      return new Promise((resolve, reject)=>{
        wx.request({
          url: url,
          data: data,
          header: header,
          method: method,
          dataType: dataType,
          success: function (res) {
            if (res && res.statusCode == 200 && res.data) {
              resolve(res.data);
            } else {
              self.alert("提示", res);
              reject(res);
            }
          },
          fail: function (err) {
            self.log(err);
            self.alert("提示", err);
            reject(err);
          }
        })
      })
    }
  }

對于請求的參數，我們設置下默認值，方便調用

  const DEFAULT_REQUEST_OPTIONS = {
    url: "",
    data: {},
    header: {
 ? ? ?"Content-Type": "application/json"
    },
    method: "GET",
    dataType: "json"
  }

  let util = {
    // 此處省略部分代碼
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      // 此處省略部分代碼 
    }
  }

如果是本地開發調試，需要增加我們的 mock 假數據，對 util.request 進行修改

  let util = {
    // 此處省略部分代碼
    request (opt){
      let options = Object.assign({}, DEFAULT_REQUEST_OPTIONS, opt)
      let {url, data, header, method, dataType, mock = false} = options
      let self = this
      return new Promise((resolve, reject)=>{
        if(mock){
          let res = {
            statusCode: 200,
            data: Mock[url]
          }
          if (res && res.statusCode == 200 && res.data) {
            resolve(res.data);
          } else {
            self.alert("提示", res);
            reject(res);
          }
        }else{
          wx.request({
            url: url,
            data: data,
            header: header,
            method: method,
            dataType: dataType,
            success: function (res) {
              if (res && res.statusCode == 200 && res.data) {
                resolve(res.data);
              } else {
                self.alert("提示", res);
                reject(res);
              }
            },
            fail: function (err) {
              self.log(err);
              self.alert("提示", err);
              reject(err);
            }
          })   
        }
      })
      
    }
  }

如果請求接口調用時候，包含有參數 mock = true，會自動調用相應的 mock 數據，如果沒有這個參數，就走正常流程去調數據。

調用方法如下：

  util.request({
    url: "list",
    mock: true,
    data: {
      tag:"微信熱門",
      start: 1,
      days: 3,
      pageSize: 5,
      langs: "en"
    }
  }).then(res => {
    // do something
  })

iKcamp官網：http://www.ikcamp.com

訪問官網更快閱讀全部免費分享課程：《iKcamp出品｜全網最新｜微信小程序｜基于最新版1.0開發者工具之初中級培訓教程分享》。
包含：文章、視頻、源代碼

iKcamp原創新書《移動Web前端高效開發實戰》已在亞馬遜、京東、當當開售。

iKcamp最新活動

報名地址：http://www.huodongxing.com/ev...

與“天天練口語”小程序總榜排名第四、教育類排名第一的研發團隊，面對面溝通交流。

GPU云服務器云服務器微信小程序實時音視頻不用編程制作微信小程序視頻微信小程序數據微信小程序配置網絡

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

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

微信小程序教學第二章（含視頻）：小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

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

wqj97 2019-08-30 13:50 評論0 收藏0
微信小程序教學第二章（含視頻）：小程序中級實戰教程之預備篇 - 封裝網絡請求及 mock 數據

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

morgan 2019-08-01 17:49 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

elliott_hu 2019-08-21 17:28 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

paney129 2019-08-01 17:56 評論0 收藏0
iKcamp出品微信小程序教學共5章16小節匯總(含視頻)

摘要：微信小程序課程，面向所有具備前端基礎知識的同學閱讀要求讀者需要具備但不限于以下技能更佳一共四部分十五小節，適合七天的訓練營。 ?? 微信小程序課程，面向所有具備前端基礎知識的同學 ?? 閱讀要求讀者需要具備但不限于以下技能 HTML JavaScript es6更佳 CSS 一共四部分十五小節，適合七天的訓練營。從現在開始，我假裝你已經掌握了 html、 css以及 ES6...

lmxdawn 2019-08-29 13:45 評論0 收藏0