Question

我目前正在学习javascript，我经常在观看的教程中找到它。 Javascript自动将函数的结果作为参数传递给下一个函数。

fetch('SampleApi')
.then( function(data) { return data.json() } )
.then( function(data) { console.log(data.name); } )
.catch(function(err) { console.log(error) })

提取的结果直接作为参数传递给函数，然后函数的结果直接作为参数传递给下一个函数。

我只想知道这是什么，这叫什么。在深入探究之前，我需要了解这一点。

Answer 1

编辑：修改后的示例以显示在方法之间传递参数以直接回答问题。

基本前提是，只要请求的操作合理且可用，JavaScript就可以立即对返回的结果采取行动。一个简单的示例如下所示：

console.log("|" + "   This is a string with extra spaces   ".trim() + "|");

这也可以用您自己的代码完成。在下面的示例中，请注意，操作返回的是对象本身。这使我们能够在同一对象中的其他操作返回后执行该对象中可用的任何操作：

class Test {
  sayHi(message = "Passed Message") {
    console.log('parameter: ' + message);
    this.message = message;
    return this;
  }

  sayBye(cb) {
    cb(this.message);
    return this;
  }
}

const test = new Test();
test.sayHi("hello!").sayBye(passed => console.log('passed in: ' + passed));

因此，在您使用JavaScript的整个过程中，您会发现这种想法的许多实例，称为方法链接。

在您提供的示例中，只是将此概念应用于fetch API。

Answer 2

这称为函数链接。

fetch函数返回一个对象，该对象具有一个函数then，该函数接受一个函数作为其参数。

调用then时，它将使用存储在对象中的数据作为参数来执行给定的函数，并将返回值存储为新的内部数据，并在第二个{{ 1}}呼叫。 then返回与then返回的对象相同的对象。

对fetch的调用将检查是否遇到错误（并将其存储到对象中），如果是，则将使用错误来调用给定的函数。

您可以展开整个过程，而无需链接：

catch

Answer 3

简短的回答是“这就是承诺的实现方式”

为了更好地说明为什么这是好的行为：

function getOrganizedData() {
    return fetch("somedata").then(function(rawData) {
        // do some stuff
        return organizedData;
    });
}

任何使用此功能的人都可以使用organizedData-因此，如果您有共享服务，则只有该服务需要知道如何将rawData转换为organizedData要使用的应用程序。

如果这不是您想要的行为怎么办？

容易，只是不要兑现承诺：

const fetchPromise = fetch('SampleApi');
fetchPromise.then( function(data) { return data.json() } );
fetchPromise.then( function(data) { console.log(data.name); } );
fetchPromise.catch(function(err) { console.log(error) });

但是，等等，因为catch并没有应用于每个链，我会不会因为这种方法而出错？

是的！因此，您需要抓住两条链：

const errorFunction = function(err) { console.log(error) };
const fetchPromise = fetch('SampleApi');
fetchPromise.then( function(data) { return data.json() } ).catch(errorFunction);
fetchPromise.then( function(data) { console.log(data.name); } ).catch(errorFunction);

注意：此链接行为也适用于.catch：

fetch("somethingThatWillError")
.then(function() { console.log("THEN - I will not run because there's an error"); })
.catch(function() { console.log("CATCH - I will run because I am handling the error"); })
.then(function() { console.log("THEN - I will run because the error has been handled"); })
.catch(function() { console.log("CATCH - I will not run because there is no error to handle"); })

Answer 4

编辑：对于简历，fetch的结果是成功的第一个data，第二个data是第一个then和{{ 1}}在拒绝的情况下err的结果。

您在这里实际上正在兑现承诺，您可以查看有关Promise here的一些文档。

在javascript中，您正在运行的任务可以是同步的或异步的，promise是用于处理异步任务的。您可以了解有关异步here的更多信息。

快速而简单的承诺现在可以在十分钟之内解决，甚至永远也不会解决。在构建Promise时，您需要一个执行程序，该执行程序带有两个参数，即resolve函数和拒绝函数，它们将在您的promise最终解决之前（例如，在API调用之后）被调用。 >

如果您的承诺失败（例如，在您的api调用上超时），则将调用拒绝，而在您的承诺成功时，将调用解决方法。在这两个回调（resolve和promise）中，如果您不了解回调，则必须学习here，您将有一个参数返回您的promise的分辨率，例如，promise是拒绝，您将在邮件中找到原因，并在解决方案中获得从api调用中所需的数据。

在您的情况下，fetch的构建类似于fetch，其中fetch = new Promise(...);是成功的解析器，then(...)是被拒绝的解析器。您可以使用catch(...)和finally(...)之后的then()。而示例中的catch()是成功的保证结果，而data是错误结果的结果。

为什么javascript自动将函数的结果作为参数传递给下一个函数

4 个答案: