异步htpp请求带来的困惑

Question

在做自己demo的过程中遇到了一个问题。

在app.js中定义了globalData，然后在app.js的onLaunch中发送http请求，把请求的响应结果赋值给globalData，在另外一个组件中要使用globalData时取到的都是空值，这是因为请求异步，数据的请求完成是要晚于组件加载的，那么怎么能够在组件中取得请求赋值之后的globalData值？

（产生问题的原因是想尽量减少http请求，demo中一共有三个页面，发送一次http请求就可以取到三个页面所有需要的数据。所以打算只在小程序加载时发送http请求，然后在三个页面中使用，上面问题中的globalData是为了解决页面之间传值的问题，或者有没有其他方案？）

谢谢解答！！

Answer 1

runzx 2018-08-10 09:50:59

因为小程序异步加载流程， 你首页不结束是不会转到http请求处理的，所以方法：

1。 在首页里发起http请求，而不是在app.js里。这样在回调函数里加载数据。

2。app.js的http请求成功回调函数里，最后一行加入跳转首页。 而首页里判断globalData若空就什么都不干，等http来再次激活首页。

• 提问者 卖女孩的小男孩_ #1

  谢谢同学！
  
  我在app.js中发http请求，然后在需要数据的页面中根据globalData是否存在设置回调函数处理数据，解决了问题。
  
  谢谢！

Answer 2

提问者 卖女孩的小男孩_ 2018-08-12 11:52:21

我使用的方法是这一种。 index中使用app.js请求的数据： 

index.js

// 设置一个测试数据，用于判断app.js中的http请求是否已经获取到数据
const testVal = app.globalData.dis

if (testVal && testVal != '') {
this.setData(app.globalData)
} else {

// 如果测试数据的值仍然为初始值 空字符串，则在app上定义一个回调函数
// 用于在http请求获取数据成功的回调函数中执行此回调函数
app.handleIndex = (res) => {
this.setData(app.globalData)
}
}

 app.js请求成功时 

// 判断页面中处理数据的回调函数是否存在，存在则执行 
this_.handleIndex && this_.handleIndex(res)

• runzx #1

  这方法最有效率。 
  不过你的this_ 是自己新定义一个代表app变量？ 是不是多余了？

• 提问者 卖女孩的小男孩_ 回复 runzx #2

  之前的代码里http请求这一块用了多层success嵌套，所以this_是用于保存指向的。
  后面用promise重构了这一块的代码，现在没有用this_了。

Answer 3

runzx 2018-08-12 11:38:08

还有一种方法，在app.js里异步请求回调中加上一句，例：

if (this.userInfoReadyCallback) {
    this.userInfoReadyCallback(res)
}

然后在首页里判断如果数据为空，则把setData()放到上面全局变量里，让app.js里异步回调来实现数据捆绑：

//页面开始时
const app = getApp()
...
app.userInfoReadyCallback = res => {
    this.setData({
        userInfo: res.userInfo,
    })
}

因为app.js的异步回调一定是在首页的基本生命周期函数执行完后才运行，所以首面里给app.userInfoReadyCallback 赋值为所需处理数据的函数。

这方法比重新跳转首页效率高。

• 提问者 卖女孩的小男孩_ #1

  我使用的方法是这一种。
  index中使用app.js请求的数据：
  index.js
  ```
      // 设置一个测试数据，用于判断app.js中的http请求是否已经获取到数据
      const testVal = app.globalData.dis
  
      if (testVal && testVal != '') {
        this.setData(app.globalData)
      } else {
  
        // 如果测试数据的值仍然为初始值 空字符串，则在app上定义一个回调函数
        // 用于在http请求获取数据成功的回调函数中执行此回调函数
        app.handleIndex = (res) => {
          this.setData(app.globalData)
        }
      }
  ```
  app.js请求成功时
  ```
  // 判断页面中处理数据的回调函数是否存在，存在则执行
                  this_.handleIndex && this_.handleIndex(res) 
  ```

• 提问者 卖女孩的小男孩_ #2

  不支持markdown好尴尬，我写成回复在上面了