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

資訊專欄INFORMATION COLUMN

微信小程序踩坑系列——從wx.request談?wù)劗惒教幚?

RdouTyping / 648人閱讀

摘要：其實我們在同步流程中才說返回，異步?jīng)]有返回這個概念或者說異步返回是沒有意義的，異步對應(yīng)的是回調(diào)，也就是說，對于一個異步函數(shù)，我們應(yīng)該傳入一個回調(diào)函數(shù)來接收結(jié)果。

原文鏈接：https://www.xksblog.top/talk-...

見到wx.request的第一眼，就讓我想起了$.ajax這東西，使用起來確實有很多不方便，不能忍，幸好小程序是支持ES6語法的，所以可以使用promise稍加改造。

先來說說wx.request為什么不能忍。

鋪墊：“看得見卻抓不住“的異步請求 
Page({
  data: {
    myData: ""
  },
  // loadMyData函數(shù)用于打印myData的值
  loadMyData () {
    console.log("獲取到的數(shù)據(jù)為：" + this.data.myData)
  },
  // 生命周期函數(shù)onload用于監(jiān)聽頁面加載
  onload: function () {
    wx.request({
      url: "https://api",  // 某個api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 調(diào)用之前的函數(shù)
    this.loadMyData()
  }
})

然后我們會在控制臺到這樣的結(jié)果：

這其實是一個很簡單的異步問題，wx.request是異步請求，JS不會等待wx.request執(zhí)行完畢再往下執(zhí)行，所以JS按順序會先執(zhí)行this.loadMyData()，等服務(wù)器返回數(shù)據(jù)以后，loadMyData()早就執(zhí)行完了，當(dāng)然也就沒有拿到值啦。

其實我們在同步流程中才說“返回”，異步?jīng)]有“返回”這個概念（或者說異步返回是沒有意義的），異步對應(yīng)的是“回調(diào)”，也就是說，對于一個異步函數(shù)，我們應(yīng)該傳入一個“回調(diào)函數(shù)”來接收結(jié)果。

初步解決：通過回調(diào)接收結(jié)果

最簡單的解決方案，就是把需要使用異步數(shù)據(jù)的函數(shù)寫在回調(diào)里：

...
onload: function () {
  wx.request({
    url: "https://api",  // 某個api接口地址
    success: res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      // 把使用數(shù)據(jù)的函數(shù)寫在回調(diào)函數(shù)success中
      this.loadMyData()
    }
  })
}

這樣就可以正確輸出了：

但是如果邏輯復(fù)雜，需要多層異步操作，會出現(xiàn)怎么樣的情況呢？

asyncFn1(function(){
  //...
  asyncFn2(function(){
    //...
    asyncFn3(function(){
      //...
      asyncFn4(function(){
        //...
        asyncFn5(function(){
           //...
        });
      });
    });
  });
});

有沒有感覺頭皮發(fā)麻？什么優(yōu)雅什么可讀性，瞬間蕩然無存，這就是恐怖的“回調(diào)地獄”（Callback Hell）。

而我們發(fā)現(xiàn)，微信小程序的網(wǎng)絡(luò)請求wx.request，也正是這種依靠回調(diào)函數(shù)的形式，類似于以前的$.ajax，它在邏輯復(fù)雜、頁面執(zhí)行順序要求多的情況下，弊端也是很明顯的。不過好在小程序支持ES6，我們可以盡情地?fù)肀romise！

使用Promise包裝wx.request

Promise這東西簡單說來就是，它可以將異步的執(zhí)行邏輯和結(jié)果處理分離，摒棄了一層又一層的回調(diào)嵌套，使得處理邏輯更加清晰。想具體了解的還請自行查找資料。

現(xiàn)在我們就用Promise包裝一下wx.request：

/**
 * requestPromise用于將wx.request改寫成Promise方式
 * @param：{string} myUrl 接口地址
 * @return: Promise實例對象
 */
const requestPromise = myUrl => {
  // 返回一個Promise實例對象
  return new Promise((resolve, reject) => {
    wx.request({
      url: myUrl,
      success: res => resolve(res)
    })
  })
}
// 我把這個函數(shù)放在了utils.js中，這樣在需要時可以直接引入
module.exports = requestPromise

現(xiàn)在再使用試試：

// 引用模塊
const utilApi = require("../../utils/util.js")
Page({
  ...
  // 生命周期函數(shù)onload用于監(jiān)聽頁面加載
  onLoad: function () {
    utilApi.requestPromise("https://www.bilibili.com/index/ding.json")
    // 使用.then處理結(jié)果
    .then(res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      this.loadMyData()
    })
  }
})

結(jié)果和使用回調(diào)函數(shù)一致。當(dāng)有多個異步請求時，直接不斷地.then(fn)去處理即可，邏輯清晰。

當(dāng)然，這里只是寫了一個最簡單的Promise函數(shù)，還不完整。更完整的Promise化wx.request，等以后業(yè)務(wù)需要再完善吧。另外各種小程序開發(fā)框架也都有了現(xiàn)成的promise化API，拿來即用。

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

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

相關(guān)文章

  • 把微信小程序異步API轉(zhuǎn)為Promise，簡化異步編程，告別層層回調(diào)

    摘要：微信官方?jīng)]有給出來處理異步操作，而官方異步的又非常多，這使得多異步編程會層層回調(diào)，代碼一復(fù)雜，回調(diào)起來就想砸電腦。是一個轉(zhuǎn)換微信小程序異步為的一個工具庫優(yōu)點避免小程序異步編程多次回調(diào)帶來的過多回調(diào)導(dǎo)致邏輯不清晰，篇幅過長等問題。 把微信小程序異步API轉(zhuǎn)化為Promise。用Promise處理異步操作有多方便，誰用誰知道。微信官方?jīng)]有給出Promise API來處理異步操作，而官方AP...

    antz 評論0 收藏0

  • 微信小程序開發(fā)踩坑總結(jié)（持續(xù)完善中）

    摘要：由于個人技術(shù)水平有限，在問題描述，解決方案中存在的問題，希望可以得到各位前輩的指點。本篇主要是記錄我在開發(fā)微信小程序中遇到的問題。各記錄點排序，跟隨自己開發(fā)過程中的問題出現(xiàn)時間而定。。微信小程序數(shù)據(jù)頁面數(shù)據(jù)傳遞總結(jié) 由于個人技術(shù)水平有限，在問題描述，解決方案中存在的問題，希望可以得到各位前輩的指點。本篇主要是記錄我在開發(fā)微信小程序中遇到的問題。各記錄點排序，跟隨自己開發(fā)過程中的問題出現(xiàn)...

    tianhang 評論0 收藏0

  • 【浙政釘】微信-專有釘釘小程序-開發(fā)踩坑實記

    摘要：一開始的思路是先將微信小程序轉(zhuǎn)為釘釘小程序。接下來就是轉(zhuǎn)化階段，關(guān)于微信和釘釘具體可參考其開發(fā)文檔。 文章目錄 ?【浙政釘】微信-專有釘釘小程序-開發(fā)踩坑實記? ...

    widuu 評論0 收藏0

  • 300行代碼寫一個音樂播放器小程序

    摘要：項目主要是微信小程序也用到了等。前端部分主要是歌曲播放控制和交互部分的代碼，更多關(guān)于小程序的內(nèi)容可見微信小程序開發(fā)文檔小程序框架結(jié)構(gòu)微信小程序的入口是根目錄下的它們分別描述的小程序的主題邏輯和公共配置部分。 剛進(jìn)公司不久，因為公司部門年后業(yè)務(wù)拓展的關(guān)系，可能在年后會被分配到公司的微信公眾號組做小程序相關(guān)的開發(fā)工作，因此寫了個微信小程序wx-audio踩坑。目前還有一些功能沒有寫完：如返...

    chenatu 評論0 收藏0

  • 「前端早讀君009」快速小程序開發(fā)之微信小程序內(nèi)嵌 H5

    摘要：前言微信小程序中可以直接運行頁面，這一新組件的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。微信小程序配置系列問題配置域名業(yè)務(wù)域名中配置的就是小程序以及和中引用的域名。 今日勵志語 要接受自己行動所帶來的責(zé)任而非自己成就所帶來的榮耀。 前言 微信小程序中可以直接運行 web 頁面，這一新組件 web-view 的產(chǎn)生，可能直接導(dǎo)致小程序數(shù)量迎來一波高峰。本篇博文將從業(yè)務(wù)選型，微信小程序后臺...

    wh469012917 評論0 收藏0

發(fā)表評論

0條評論

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