微信小程序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函数用于打印myData的值
  loadMyData () {
    console.log('获取到的数据为：' + this.data.myData)
  },
  // 生命周期函数onload用于监听页面加载
  onload: function () {
    wx.request({
      url: 'https://api',  // 某个api接口地址
      success: res => {
        console.log(res.data)
        this.setData({
          myData: res.data
        })
        console.log(this.data.myData)
      }
    })
    // 调用之前的函数
    this.loadMyData()
  }
})

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

...
onload: function () {
  wx.request({
    url: 'https://api',  // 某个api接口地址
    success: res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      // 把使用数据的函数写在回调函数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改写成Promise方式
 * @param：{string} myUrl 接口地址
 * @return: Promise实例对象
 */
const requestPromise = myUrl => {
  // 返回一个Promise实例对象
  return new Promise((resolve, reject) => {
    wx.request({
      url: myUrl,
      success: res => resolve(res)
    })
  })
}
// 我把这个函数放在了utils.js中，这样在需要时可以直接引入
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({
  ...
  // 生命周期函数onload用于监听页面加载
  onLoad: function () {
    utilApi.requestPromise("https://www.bilibili.com/index/ding.json")
    // 使用.then处理结果
    .then(res => {
      console.log(res.data)
      this.setData({
        myData: res.data
      })
      console.log(this.data.myData)
      this.loadMyData()
    })
  }
})