Fetch within promise，零星的反向链序

Question

我将两个调用链接到一个使用 fetch 和 returns 承诺的函数。

呼叫有时会以错误的顺序到达，相反。

我假设我的函数代码是错误的，源于对 promises、fetch 或两者的错误理解。

这是功能代码，简化后：

function shop(id) {
  return new Promise(function(resolve, reject) {
    fetch('/shop', {
      method: 'post',
      body: JSON.stringify({id: id}) ,
      headers: {'Content-type': 'application/json '}
      }).then(function (response) {
        return response.json();
      }).then(function (data) {
        console.log(data);
        resolve(data);
      })
  })
}

我以这种方式链接函数：

shop('potatoe')
.then(shop('mushrooms'));

如前所述，这两个有时会按错误的顺序到达，蘑菇先于土豆。

我的 returns 或 resolve() 是否写错了 shop() 函数？

感谢您的帮助。

Answer 1

主要问题是您立即同步调用 shop('mushrooms')。您没有传递对 then 方法的回调，而是 执行了 预期的回调。所以把主要代码改成：

shop('potatoe')
.then(() => shop('mushrooms'));

这解决了您的问题。

但是，您在函数中创建了无用的承诺。 fetch().then().then()链已经returns一个承诺；你不需要再创建一个。了解 promise constructor antipattern.

所以删除这个 new Promise 包装器，并删除最后的 .then() 调用，它只在那里调用 resolve:

function shop(id) {
    // return the promise returned by this promise chain:
    return fetch('/shop', {
        method: 'post',
        body: JSON.stringify({id: id}) ,
        headers: {'Content-type': 'application/json '}
    }).then(function (response) {
        return response.json();
    });
}

Fetch within promise，零星的反向链序

Fetch within promise, sporadical reversed chain order

javascript

promise

fetch

chaining