国王的许诺
In my previous blog, I explained the callback pattern and how it works, go to check it before reading this one because both are connected, and it is crucial to know the callback function before to dive into the Promises.
在我以前的博客中，我解释了回调模式及其工作方式，在阅读此回调函数之前先对其进行了检查，因为两者均已连接，并且在深入了解Promises之前了解回调函数至关重要。
This blog aims to compare the callback function with the Promises one; this means I will be writing the same function in both ways to compare them with each other. I suggest you open two different files and do the same by coding along the blog to understand better the concept.
该博客旨在将回调函数与Promises进行比较。 这意味着我将以两种方式编写相同的函数以将它们相互比较。 我建议您打开两个不同的文件，并通过在博客中编码来做同样的事情，以更好地理解该概念。
Let see how we would handle errors and results in a call back function by creating a sample example:
让我们通过创建一个示例示例来了解如何处理错误并产生回调函数：
This function will wait 2 minutes before to pass the results in our callback function. Below we are calling it, and we are expecting either an error or result. If we have an error, we will pass the first argument and pass null or undefined as the second argument as below:
此函数将等待2分钟，然后才能在我们的回调函数中传递结果。 在下面，我们称其为“错误”或“结果”。 如果发生错误，我们将传递第一个参数，并传递null或undefined作为第二个参数，如下所示：
Now if we would get as error the string “this is an error”, and we will get null as results. The same logic works for results:
现在，如果我们将得到错误字符串“ this is a error”，那么结果将为null。 相同的逻辑适用于结果：
Now we will get null as an error, and the string “this is the results” as results. The next step here would be to add some logic in the function once called to be able to use the right return value:
现在我们将null作为错误，并将字符串“ this is the results”作为结果。 下一步是在调用该函数后可以使用正确的返回值添加一些逻辑：
Here we are saying to the function that if “error’ is true stop the function execution and return the error otherwise return the results.
在这里，我们对函数说，如果“错误”为true，则停止函数执行并返回错误，否则返回结果。
Let see how we can implement the same function above using the Promises. However, most of the time, we won’t be the one creating Promises. Usually, these functions are created by the library we use. Still, it is important to know the syntax and what’s happening inside to be able to use it better in our application.
让我们看看如何使用Promises实现上面的相同功能。 但是，在大多数情况下，我们不会成为创建Promises的人。 通常，这些功能是由我们使用的库创建的。 不过，重要的是要了解语法和内部发生的事情，以便能够在我们的应用程序中更好地使用它。
As you can see, we created a function calling “new Promise”. As arguments, we passed two functions “resolve & reject”. As you can imagine in this case if things goas wrong we will call reject and if it goes well we would call resolve. So fare both function looks similar, so how we are going to call one of the two when the asynchronous process is completed ??.
如您所见，我们创建了一个名为“ new Promise”的函数。 作为参数，我们传递了两个函数“ resolve＆reject”。 您可以想象在这种情况下，如果出现问题，我们将称为拒绝，如果进展顺利，我们将称为解决。 因此，这两个函数的票价看起来很相似，因此异步过程完成后，我们将如何调用二者之一。
Let see how we can call this function ad to see if there is an error or a result:
让我们看看如何调用此函数广告以查看是否存在错误或结果：
The functions here is a bit different from the callback pattern, we are using a various method on our function, in this case, the “PromiseFucntion” is the Promise, and a Promise is nothing more than an object with different methods that we can access.
这里的函数与回调模式略有不同，我们在函数上使用了各种方法，在这种情况下，“ PromiseFucntion”是Promise，而Promise仅仅是具有可访问的不同方法的对象。
The first method we called on our function is “.then” which allow us to register a function to run when things go well, in this case, when we called “resolve”. Now we can get access to the data passed from the resolved function throughout the only parameter we have in the function that we called “result”. This first function will get executed if things go well, and the resolve function is called in our Promise.
我们在函数上调用的第一个方法是“ .then”，它使我们可以注册一个函数，以便在一切顺利时(在这种情况下，当我们称为“ resolve”时)运行。 现在，我们可以访问从解析函数传递来的数据，这是我们在函数中称为“结果”的唯一参数所造成的。 如果一切顺利，第一个函数将被执行，并且我们的Promise中将调用resolve函数。
So what happens if we call “reject” in our Promise? How can we access to that error? Let’s see an example of an error in case things goes wrong:
那么，如果我们在承诺中称“拒绝”会怎样？ 我们如何解决该错误？ 让我们看一个发生错误的错误示例：
In this example, we called “reject” inside our Promise, and to print the error to the console we used chained another method “.catch”. This method works exactly like the first method which prints the result, but in this case, this method will execute just in case thing goes wrong, and we have an error coming to form our Promise.
在此示例中，我们在Promise中调用了“拒绝”，并将错误打印到控制台，我们使用了另一种方法“ .catch”。 此方法的工作方式与第一个打印结果的方法完全相同，但是在这种情况下，此方法将在万一出错时执行，并且在形成Promise时会出现错误。
The benefit here is that the intention of the code is evident, we have “resolve” and “reject” which are two different functions that make easy to understand what’s going on in the function. If things go well “resolve” is called and we get our data, and if this goes wrong, we call “reject”, and we get our error.
这样做的好处是，代码的意图显而易见，我们拥有“解决”和“拒绝”这两个不同的函数，可以轻松理解该函数的运行情况。 如果一切顺利，则调用“解决”并获取数据，如果出错，则称为“拒绝”，并得到错误。
In the callback pattern, we have one function which does both operations. Means that we need to look at all the call of the callback and figure our which of the two-argument is provided, which can be a bit confusing and lead to errors.
在回调模式中，我们有一个函数同时执行这两种操作。 意味着我们需要查看回调的所有调用，并弄清楚提供了两个参数中的哪一个，这可能会造成混淆并导致错误。
Another benefit is the way we handle the error and the result. In the call back function we have one single functional that runs and is up to the developer to figure out if there is or not an error by setting an if statement like in our example to call the right code. In the Promise function we have to separate functions, and just one of the two functions will get called depending if there is or not an error. In fact in our example when the result was called the “.catch” method did not run because there was not an error, same when we called the error, the “.then” method did not run. It gives us more control over the outcome and how we debug our function. With Promise, we don’t need to add any additional logic.
另一个好处是我们处理错误和结果的方式。 在回调函数中，我们有一个单独的函数可以运行，并且由开发人员通过设置如我们示例中的if语句来调用正确的代码来确定是否存在错误。 在Promise函数中，我们必须分离函数，并且根据是否存在错误，将仅调用两个函数之一。 实际上，在我们的示例中，由于没有错误而导致结果被调用为“ .catch”方法而没有运行，而当我们调用该错误时，“。then”方法也没有运行。 它使我们可以更好地控制结果以及调试函数的方式。 使用Promise，我们不需要添加任何其他逻辑。
Another advantage in the Promise is that is easy to not mess up, in the function passed we have the two-argument “resolve” and “reject”, we cannot call both, and we cannot call one of them twice. Once one of the two is called the Promise is done, and its value or state cannot be changed. While in the callback pattern there is nothing built it that can prevent that we can call twice the call back function. Let’s proof that together:
Promise的另一个优点是不易混淆，在传递的函数中，我们有两个参数“ resolve”和“ reject”，我们不能两者都调用，也不能两次调用它们。 一旦将两者之一称为“承诺”就完成了，并且其值或状态无法更改。 虽然在回调模式中没有构建任何东西，但是它无法阻止我们调用两次回调函数。 让我们一起证明：
In the above example, I called twice the callback function by providing the first with an error and the second one with a result. In the terminal, we got both of them, the result and the error, as you can see. So what would happen if we try to do the same with the Promise function?
在上面的示例中，我通过向第一个提供错误并向第二个提供结果来两次调用了回调函数。 如您所见，在终端中，我们同时得到了结果和错误。 那么，如果我们尝试对Promise函数执行相同的操作会发生什么？
Here we tried to replicate the same by calling both of the function, as you can see once the first function “resolve” is called the second one won’t run. In the terminal, we get just the result and not the error, and the same if we do it the other way around:
在这里，我们试图通过调用这两个函数来复制相同的代码，如您所见，一旦第一个函数“ resolve”被调用，第二个函数将无法运行。 在终端中，我们只得到结果而不是错误，如果相反，则得到的结果相同：
I placed the error function first now, and as you can see the second one was not called, and in the terminal we got just the error running.
现在，我首先放置了错误函数，并且您可以看到没有调用第二个函数，并且在终端中，我们只是运行了错误。
I hope this blog was enough to explain the logic behind the Promise and why and how you should use them in your code.
我希望这个博客足以解释Promise背后的逻辑，以及为什么以及如何在代码中使用它们。
翻译自: https://medium.com/@musta7188/hitjavascript-promises-1ac9cd6c5982
国王的许诺
相关资源：四史答题软件安装包exe