如何使用async await 优化下列回调嵌套呢？

Question

伪代码：

getData = () => {
request({
    success: (res) => {
        console.log(res.data1)
        request({
            url: https://test.com/v1?data=res.data1,
            success: (res) => {
                conosle.log(res.data2)
                request({
                    url: https://test.com/v1?data=res.data2,
                    success: (res) => {
                        console.log(res.data3)
                    }
                });
            }
        });
    }
});
}

问题：如上所示每一次回调的返回值会作为下一个接口的入参，最终得到data3，那么如何使用async await方法优化回调嵌套呢？

Answer 1

async function asyncRequest(options) {
    return new Promise(resolve => {
        options.success = resolve;
        request(options);
    });
}

async function main() {
    const res1 = await asyncRequest({ url: url1});
    const res2 = await asyncRequest({ url: url2, data: res1});
    // ....
}

main();

代码没有验证，仅供参考，另请参考：

• 参考：理解 JavaScript 的 async/await

Answer 2

因为是实例，故request的响应我就不按照data1,data2,data3这样命名了，统一成data.

function request(options) {
    setTimeout(() => {
        options.success({data: options.url});
    }, Math.random() * 30);
}

function promisify(api) {
    return function (options) {
        return new Promise(resolve => api({...options,success: resolve}));
    }
}

async function getData() {
    const requestP = promisify(request);
    const res1 = await requestP({url: '1'});
    const res2 = await requestP({url: res1.data + '2'})
    const res3 = await requestP({url: res2.data + '3'});
    console.log(res3.data); // '123'
}

getData()

Answer 3

// request再次封装为promise

function fetch({url, data}){
   return new Promise((resolve,reject) => {
    request({
      url,
      data,
      success:(res) => {
        resolve(res)
      },
      fail: (err) => {
        reject(err)
      }
    })
   })
}

const getData = async () => {
  try{
    let result1 = await fetch({url: `https://test.com/v1`})
    let result2 = await fetch({url: `https://test.com/v1?data=${result1.data1}`})
    let result3 = await fetch({url: `https://test.com/v1?data=${result2.data2}`})
    console.log(result3)
  }catch(err){
    console.log(err)
  }
}