欢迎来到站长教程网!

JavaScript

当前位置:主页 > 网页制作 > JavaScript >

JS 的 Promise 和 Async 详解

时间:2020-05-20|栏目:JavaScript|点击:

JS 的 Promise 和 Async 详解

因为 JavaScript 是单线程语言,所以同步代码一次只能执行一行。这就意味着同步代码的运行时间超过瞬间的话,它将停止其余代码的运行,直到完成运行为止。为了防止运行时间不确定的代码阻止其他代码的运行,我们需要使用异步代码。

Promise

为此,我们可以在代码中使用 Promise。Promise 表示流程运行时间不确定并且结果可能是成功或失败的对象。在 JavaScript 中创建一个 promises,我们使用 Promise 对象的构造函数来创建 promise。Promise 构造函数接受一个拥有 resolve 和 reject 参数的执行函数。两个参数也都是函数,它们让我们可以回调 promise 完成(成功调用得到返回值)或者拒绝(返回错误值并标记 promise 失败)。函数的返回值被忽略。因此,promise 只能返回 promise。

例如,我们在 JavaScript 定义一个承诺像下面的代码:

const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('abc'), 1000); });

上面的代码会创建一个一秒后返回 abc 的 promise。因为我们运行的 setTimeout 是在 executor 函数内一秒后返回值为 abc 的完成 promise,所以它是异步代码。我们无法在 setTimeout 的回调函数中返回值 abc,因此我们必须调用 resolve('abc') 来获取解析后的值。我们可以使用 then 函数来访问已完成 promise 的返回值。then 函数接受一个回调函数,该回调函数将已完成的 promise 的返回值作为参数。你可以得到你想要的值。例如,我们可以这么做:

const promise = new Promise((resolve, reject) => { setTimeout(() => resolve('abc'), 1000); }); promise.then((val) => { console.log(val); })

当我们运行上方代码,我们应该可以得到记录 abc。正如我们看到的,promise 会在其完成后调用 resolve 函数时提供值。

一个 promise 有三种状态。初始状态,promise 既没有成功也没有失败。完成状态,意味着操作成功完成。或者是失败状态,意味着 promise 操作失败。

一个挂起的 promise 可以通过返回值完成或者返回错误失败。当 promise 完成后,then 函数将得到相应的返回值,并传递给 then 函数的回调函数来调用。如果 promise 失败后,我们可以选择使用 catch 函数来捕获错误,该函数还可以传递给回调函数一个错误。then 和 catch 都返回一个 promise,因此它们可以一起链式使用。

例如,我们可以这么写:

const promise = (num) => { return new Promise((resolve, reject) => { setTimeout(() => { if (num === 1) { resolve('resolved') } else { reject('rejected') } }, 1000); }); } promise(1) .then((val) => { console.log(val); }) .catch((error) => { console.log(error); })promise(2) .then((val) => { console.log(val); }) .catch((error) => { console.log(error); })

在上面的代码中,我们有一个函数 promise,它返回一个 JavaScript promise,其在 num 为 1 时以 resolved 值完成承诺,在 num 不为 1 时通过错误 rejected 拒绝承诺。因此我们运行:

promise(1) .then((val) => { console.log(val); }) .catch((error) => { console.log(error); })

然后 then 函数运行,由于 num 为 1,promise(1) 函数调用会返回 promise 完成,并且解析后的值在 val 中是可用的。因此当我们运行 console.log(val),我们会得到 resolved。当我们运行下面的代码:

promise(2) .then((val) => { console.log(val); }) .catch((error) => { console.log(error); })

catch 会运行,因为 promise(2) 函数调用失败返回 promise,并且被拒绝的错误值可用并设置为错误。因此我们运行 console.log(error) 会得到 rejected 输出。

一个 JavaScript promise 对象有一下属性:length 和 prototype。 length 是构造器参数的数量,其设置为 1,也总是只有一个。prototype 属性表示 promise 对象的原型。

promise 还有一个 finally 方法无论 promise 完成还是失败都运行的代码。finally 方法接受一个回调函数作为参数,可以运行任何你想运行的代码, 并且无论 promise 运行结果如何,都可以执行。例如,我们运行:

Promise.reject('error') .then((value) => { console.log(value); }) .catch((error) => { console.log(error); }) .finally(() => { console.log('finally runs'); })

然后我们得到 error 和 finally runs 的记录,因为原始的 promise 得到 error 而拒绝。然后运行 finally 方法中的所有代码。

使用 promise 最主要的好处是编写的异步代码,我们可以使用 promise 顺序运行它们。为此,我们可以使用 then 函数链式 promise。then 函数在 promise 完成后接收一个回调函数并运行它。在 promise 拒绝后,它还接受第二个参数。链式使用 promise,我们必须将其第一个回调函数 then 函数返回另外一个 promise。如果我们不想将另外一个 promise 链接到现有的 promise,我们可以返回其他值,就像没有一样。我们可以返回一个值,该值将在下一个 then 函数中可获取到。它还可以抛出一个错误。然后 then 返回的 promise 将被拒绝,并抛出错误。它还可以返回已经完成或拒绝的 promise,挡在其后链接的 then 函数时将获得其完成后的值,或者 catch 函数的回调中获得错误原因。

上一篇:js中的布尔运算符如何使用

栏    目:JavaScript

下一篇:在 Vue 里面对 Axios 进行封装

本文标题:JS 的 Promise 和 Async 详解

本文地址:http://www.blue1000.com/wangyezhizuo/JavaScript/1305.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:1961407250 | 邮箱:1961407250#qq.com(#换成@)

Copyright © 2002-2022 BK网络学院版权所有 Power by DedeCms 粤ICP备19027147号-7