微信小程序教學(xué)第二章（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程之預(yù)備篇 - 封裝網(wǎng)絡(luò)請(qǐng)求及 mock 數(shù)據(jù)

wqj97 發(fā)布于2019-08-30 13:50 / 1913人閱讀

摘要：調(diào)用方法如下微信熱門(mén)官網(wǎng)訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程出品全網(wǎng)最新微信小程序基于最新版開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享。

§ 封裝網(wǎng)絡(luò)請(qǐng)求及 mock 數(shù)據(jù)

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

開(kāi)始前請(qǐng)把 ch2-3 分支中的 code/ 目錄導(dǎo)入微信開(kāi)發(fā)工具

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

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

本節(jié)中，我們對(duì)常用的網(wǎng)絡(luò)請(qǐng)求方法 wx.request 進(jìn)行封裝

  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);
          }
        })
      })
    }
  }

對(duì)于請(qǐng)求的參數(shù)，我們?cè)O(shè)置下默認(rèn)值，方便調(diào)用

  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
      // 此處省略部分代碼 
    }
  }

如果是本地開(kāi)發(fā)調(diào)試，需要增加我們的 mock 假數(shù)據(jù)，對(duì) util.request 進(jìn)行修改

  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);
            }
          })   
        }
      })
      
    }
  }

如果請(qǐng)求接口調(diào)用時(shí)候，包含有參數(shù) mock = true，會(huì)自動(dòng)調(diào)用相應(yīng)的 mock 數(shù)據(jù)，如果沒(méi)有這個(gè)參數(shù)，就走正常流程去調(diào)數(shù)據(jù)。

調(diào)用方法如下：

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

iKcamp官網(wǎng)：http://www.ikcamp.com
訪問(wèn)官網(wǎng)更快閱讀全部免費(fèi)分享課程：《iKcamp出品｜全網(wǎng)最新｜微信小程序｜基于最新版1.0開(kāi)發(fā)者工具之初中級(jí)培訓(xùn)教程分享》。
包含：文章、視頻、源代碼

iKcamp原創(chuàng)新書(shū)《移動(dòng)Web前端高效開(kāi)發(fā)實(shí)戰(zhàn)》已在亞馬遜、京東、當(dāng)當(dāng)開(kāi)售。

iKcamp最新活動(dòng)

報(bào)名地址：http://www.huodongxing.com/ev...
與“天天練口語(yǔ)”小程序總榜排名第四、教育類排名第一的研發(fā)團(tuán)隊(duì)，面對(duì)面溝通交流。

GPU云服務(wù)器云服務(wù)器微信小程序?qū)崟r(shí)音視頻不用編程制作微信小程序視頻微信小程序數(shù)據(jù) 微信小程序配置網(wǎng)絡(luò)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/115579.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

wqj97

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于LinuxBoot的云固件創(chuàng)新實(shí)踐_云技術(shù)

閱讀 2772·2021-10-14 09:42
uniapp 的基礎(chǔ)

閱讀 827·2021-10-11 10:57
為什么沒(méi)有 `<style src="">`

閱讀 773·2019-08-30 15:54
微信小程序教學(xué)第二章（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程之預(yù)備篇 - 封裝網(wǎng)絡(luò)請(qǐng)求及 mock 數(shù)據(jù)

閱讀 1914·2019-08-30 13:50
vertical-align 簡(jiǎn)明指南

閱讀 1684·2019-08-30 11:19
php項(xiàng)目—個(gè)人博客

閱讀 932·2019-08-29 12:38
JS錯(cuò)誤監(jiān)控總結(jié)

閱讀 1424·2019-08-26 11:51
深度理解Promise--Promise的特點(diǎn)和方法詳解

閱讀 1388·2019-08-26 10:48

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

微信小程序教學(xué)第二章（含視頻）：小程序中級(jí)實(shí)戰(zhàn)教程之預(yù)備篇 - 封裝網(wǎng)絡(luò)請(qǐng)求及 mock 數(shù)據(jù)

相關(guān)文章