教程里面都是单个请求后台接口，实际项目中有的页面要一次请求多个接口，请问如何解决按顺序加载异步请求数据

Question

Answer 1

双越 2017-09-05 08:40:52

fetch 的 then 方法 是链式的，不是callback的。

• 提问者 zhuxchen #1

  componentDidMount() {
          // 获取广告数据
          const result = getAdData()
          const cityName = this.props.cityName;
          // 获取列表
          const list = getListData(cityName, 0) 
          const list2 = getListData(cityName, 0) 
  
          result.then(res => {
              return res.json()
          }).then(json => {
              const data = json
              console.log('ad', data)
              return data;
          }).then((data) => {
              list.then(res => {
                  return res.json()
              }).then(json => {
                  console.log('ad传过来的值', data)
                  console.log('list', json.data)
                  return json.data
              }).then((data) => {
                  list2.then(res => {
                      return res.json()
                  }).then(json => {
                      console.log('list传过来的值', data)
                      console.log('list2',  json.data)
                  }).catch(ex => {
                      if (__DEV__) {
                          console.error('首页”猜你喜欢“获取数据报错, ', ex.message)
                      }
                  })
              })
          })
      }
  这样不是很类似callback, 我想说的是能不能像promise.all一下子把要请求的接口放到一个数组里，然后按顺序请求返回

• 提问者 zhuxchen #2

  我已经贴了一张图片，这样描述就比较清楚了

• 双越 回复 提问者 zhuxchen #3

  可以用 Promise.all 试一下。getAdData 和 getListData 返回的都是一个 Promise ，可以用 Promise.all

点开查看后面1条评论

Answer 2

双越 2017-09-02 13:58:30

在一个 fetch 的 then 方法中，再去请求下一个 fetch

• 提问者 zhuxchen #1

  这样就会出现callback的形式，能不能像promise.all 这样写法