自定义Await异步函数解构报错：返回值不可迭代问题排查

问题场景 #

先封装jQuery Ajax：

function Ajax(settings) {
  let p = $.ajax(settings).then(
    (data, textStatus, jqXHR) => ({ data, textStatus, jqXHR }),
    (jqXHR, textStatus, errorThrown) => { throw ({ jqXHR, textStatus, errorThrown }); });

  return Promise.resolve(p);
}

定义to函数并执行，运行正常：

function to (promise) {
  return promise
    .then(data => [null, data])
    .catch(err => [err, undefined])
}

// 执行代码
const [err, res] = await to(Ajax(...));
if (err) return;
let d = res.data;

但定义Await异步函数后直接执行，出现错误：

async function Await(promise) {
  return await promise
   .then(data => [null, data])
   .catch(err => [err, undefined]);
}

// 报错的执行代码
const [arr, res] = Await(Ajax(...));
if (err) return;
let d = res.data;

错误信息：

unncaught (in promise) TypeError: Await is not a function or its return value is not iterable

错误原因 #

核心问题在于异步函数的返回值特性：

• 普通函数to返回的是一个Promise，通过await等待这个Promise resolve后，拿到的是内部的数组，此时解构数组完全合法。
• 而异步函数Await不管内部return的是什么值，最终都会被自动包装成一个Promise返回。也就是说Await(Ajax(...))返回的是一个「resolve值为数组的Promise」，而非数组本身。

直接对Promise对象进行数组解构，而Promise并不是可迭代对象，所以会抛出「返回值不可迭代」的错误。

解决办法 #

在解构前加上await，等待Promise resolve拿到内部的数组后再解构：

const [err, res] = await Await(Ajax(...));
if (err) return;
let d = res.data;

另外注意：原代码中解构变量名arr和判断的err不匹配，需要统一变量名，避免逻辑错误。

内容的提问来源于stack exchange，提问作者kofifus