为什么.json()会返回一个承诺？

Question

我最近一直在搞乱fetch()api,并注意到一些有点古怪的东西.

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => {
      return {
          data: response.json(),
          status: response.status
      }
  })
  .then(post => document.write(post.data));
;

post.data返回一个promise对象. http://jsbin.com/wofulo/2/edit?js,output

但是如果写成:

let url = "http://jsonplaceholder.typicode.com/posts/6";

let iterator = fetch(url);

iterator
  .then(response => response.json())
  .then(post => document.write(post.title));
;

post这里是一个标准对象,您可以访问title属性. http://jsbin.com/wofulo/edit?js,output

所以我的问题是:为什么response.json在对象文字中返回一个promise,但是如果刚刚返回则返回值？

Answer 1

为什么要response.json回报承诺？

因为您收到response所有标头到达时的时间.调用.json()会为您提供尚未加载的http响应正文的承诺.另请参阅为什么来自JavaScript fetch API的响应对象是一个承诺？.

如果我从then处理程序返回promise,为什么我会得到值？

因为这是承诺的工作方式.从回调中返回promises并获取它们的能力是它们最相关的特性,它使它们可以在没有嵌套的情况下进行链接.

您可以使用

fetch(url).then(response => 
    response.json().then(data => ({
        data: data,
        status: response.status
    })
).then(res => {
    console.log(res.status, res.data.title)
}));

或者访问先前promise的任何其他方法都会导致.then()链在等待json主体后获得响应状态.

Answer 2

这种差异是由于Promises的行为而不是fetch()具体的.

当.then()回调返回一个额外Promise的.then()回调时,链中的下一个回调基本上绑定到该Promise,接收其解析或拒绝履行和值.

第二个片段也可以写成:

iterator.then(response =>
    response.json().then(post => document.write(post.title))
);

在这个表单和你的表单中,值post都是由返回的Promise提供的response.json().

Object但是,当您返回平原时,会.then()认为成功的结果会立即自行解决,类似于:

iterator.then(response =>
    Promise.resolve({
      data: response.json(),
      status: response.status
    })
    .then(post => document.write(post.data))
);

post在这种情况下,只是Object您创建的,其中包含Promise其data属性.等待该承诺的履行仍然不完整.

Answer 3

另外，帮助我理解您所描述的这种特定情况的是Promise API 文档，特别是在该文档中，它解释了如何then根据处理程序fn返回的内容来不同地解决方法返回的promise：

如果处理函数：

• 返回一个值，然后返回的promise将返回的值作为其值进行解析；
• 抛出错误，则返回的promise将被拒绝，并以抛出的错误作为其值；
• 返回一个已经解决的承诺，然后以该承诺的值作为其值解决返回的承诺；
• 返回已经被拒绝的承诺，然后以该承诺的值作为其值被拒绝的承诺被拒绝。
• 返回另一个未处理的promise对象，届时返回的promise的解析/拒绝将在处理程序返回的promise的解析/拒绝之后。而且，那时返回的promise的值将与处理程序返回的promise的值相同。

Answer 4

除了上面的答案之外,这里是你如何处理来自你的api的500系列响应,你收到一个用json编码的错误信息:

function callApi(url) {
  return fetch(url)
    .then(response => {
      if (response.ok) {
        return response.json().then(response => ({ response }));
      }

      return response.json().then(error => ({ error }));
    })
  ;
}

let url = 'http://jsonplaceholder.typicode.com/posts/6';

const { response, error } = callApi(url);
if (response) {
  // handle json decoded response
} else {
  // handle json decoded 500 series response
}