微信小程序wx.request異步解決方案

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Page({
  data: {
    myData: ''
  },
  // loadMyData函數(shù)用于打印myData的值
  loadMyData () {
    console.log('獲取到的數(shù)據(jù)為：' + this.data.myData)
  },
  // 生命周期函數(shù)onload用于監(jiān)聽(tīng)頁(yè)面加載
  onload: function () {
    wx.request({
      url: 'https://api',  // 某個(gè)api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 調(diào)用之前的函數(shù)
    this.loadMyData()
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

// 引用模塊
const utilApi = require('../../utils/util.js')
Page({
  ...
  // 生命周期函數(shù)onload用于監(jiān)聽(tīng)頁(yè)面加載
  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()
    })
  }
})