异步返回的Promise点then失败

Question

我在其他地方调用这个getShelfList方法时如果数据是从缓存中获取的我就可以正常使用getShelfList().then() 但如果数据是调用接口获取的返回的是undefined我就无法点then，我想问问为什么这跟异步返回是不是有啥关系，为什么会这样？我应该怎么处理呢

Answer 1

来简化一下你的代码，把结构理出来

if (!shelfList) {
    shelfApi().then();
    // 注意这里没有 return，所以实际返回的是 undefined
}
else {
    return this.setShelfList(shelfList);
}

那么，上面一个 return this.setShelfList(shelfList) 是返回的哪个函数呢？注意找到它所处的函数（包括箭头函数），发现

response => {
    //....
    return this.setShelfList(shelfList);
}

它的返回值实际上是给 Promise 的 then 处理去了，但是处理完了并没有使用（没有接下来的 then，也没有使用 await 之类的东西。

如果改用 await 语法，会更容易

async getShelfList() {
    let shelfList = getBookShelfCache();
    if (!shelfList) {
        const response = await shelfApi();
        // ...
        return this.setShelfList(shelfList);
    } else {
        return this.setShelfList(shelfList);
    }
}

看，现在两个 return 都在同一个函数里，所以它们都是 getShelfList 的返回语句。但是注意，这还没完 —— 注意到 getShelfList 前面的 async 修饰没有？这个修饰表示它返回的是一个 Promise，所以外层使用的时候并不能直接拿到值，而是需要 then 或者再次 await 来拿值。

关于 await 语法，请阅读「理解 JavaScript 的 async/await」

---

已参与了 SegmentFault 思否社区 10 周年「问答」打卡 ，欢迎正在阅读的你也加入。

Answer 2

一个函数要想保证外在的一致性的话，应当确保在所有分支 return 相同的类型：

JS 中如果不显式 return 的话就是 return undefined。

使用 TypeScript 就不会遇到这种问题了，代之以更复杂的问题。