理解js中的fetch

Question

我查看了一些资源，但并没有真正了解 fetch 方法。

有 2 个 then-s 有什么意义？第一个和第二个 then 有什么用？为什么第一个是return？

fetch('http://some-site.com/cors-enabled/some.json')  
  .then(function(response) {  
    return response.text();  
  })  
  .then(function(text) {  
    console.log('Request successful', text);  
  })  
  .catch(function(error) {  
    log('Request failed', error)  
  });

Answer 1

then 调用基于所谓的 Promises。有关详细说明，请参阅 Promises on Mozilla's documentation。

Chaining 是 Promises 的一个特殊用例。在您的代码片段中，链接用于首先从外部请求响应 (return response.text();) 的结果中提取文本。然后将 return 值作为参数提供给第二个 then()，后者将其记录到控制台。

如果您想执行多个独立的、可能异步的操作并希望将它们分开并序列化，这将特别有用。如果这些操作中的任何一个失败，catch 会像异常一样立即被调用。

Answer 2

每个 then returns 一个承诺，每个后续 then 的结果都传递给后者。

假设您有员工服务

class 员工服务 {

getEmployees() {
       return fetch('http://some-site.com/cors-enabled/some.json')  
           .then(function(response) {  
           return JSON.parse(response.text());  
       })  

      .catch(function(error) {  
      log('Request failed', error)  
     });
}

}

fetch url returns 一些响应但不在 json 中，服务实际上可以修改响应然后将结果传递给主要组件

employeeService.getEmployees().then(function(json) {  
           console.log('Request sucJcessful', text);  
})

先考虑再作为修饰符。

Answer 3

要获得更详细的答案，请点击文档链接 fetch and promises

'fetch'函数，执行异步操作，总是return一个Promise对象。

我在这里的目的只是为了澄清您似乎没有听懂的内容并帮助您更好地理解文档。

'.then' 是 Promise 的对象方法，当异步操作完成时调用一些代码。

如果考虑 Promise 'resolved'，'.then' 将按顺序调用，否则将调用 '.catch' 来处理错误。

传递给'.then'的函数中的return语句是第二个排队'.then'的输入。

在您 post 的示例中，有 2 个排队的 '.then' 只是为了说明可以这样做以及如何做。

不需要使用多个“.then”，它很有用，因为您可以将检索数据时执行的操作拆分为不同的步骤，这样您就可以在遇到错误时中止承诺。

这有助于编写干净的代码和调试，并且您可以概括一些操作并重用，而且还会有更多的失败错误。

理解js中的fetch

understanding fetch in js

javascript

promise

service-worker

fetch-api