JavaScript Promise


异步编程

同步(synchronous):同步按照代码顺序执行。
异步(asynchronous):异步不按照代码顺序执行。

JS异步操作函数往往通过回调函数来实现异步任务的结果处理

回调函数

回调函数是一个函数,在启动一个异步任务的时候告诉它,等你完成这个任务之后要做什么。主线程不用关系异步任务的状态了。

function print() {
  document.getElementById("demo").innerHTML="RUNOOB";
}
setTimeout(print, 3000);

异步Ajax

除了setTimeout函数以外,异步回调也应用于Ajax变成。
XMLHttpRequest常用于请求来自远程服务器上的XML或JSON数据,一个标准的XMLHttpRequest对象包含多个回调。

JavaScript Promise

Promise是ECMAScript6提供的类,为了更快捷优雅的编写异步任务。

  • 构造Promise
new Promise(function(resolve, reject){
  
});

代码比对

// 采用函数瀑布实现
setTimeout(function() {
  console.log("First");
  setTimeout(function() {
    console.log("Second");
  },4000);
}, 1000);

// 采用new Promise实现
new Promise(function(resolve, reject){
  setTimeout(function(){
    console.log("First");
    resolve();
}, 1000);
}).then(function() {
  return new Promise(function(resolve, reject) {
    setTimeout(function () {
      console.log("Second");
      resolve();
    }, 4000;
  });
}).then(function(){
});

Promise的使用

Promise构造函数只存在一个参数,是一个函数,这个函数在构造之后会直接被异步执行。
当Promise被构造的时候,起始函数被异步执行;

new Promise(function(resolve, reject) {
  console.log("Run");
});

Promise类中存在3个方法【.then()】【.catch()】和【.finally】三个方法
三个方法的参数都是一个函数,

  • .then()可以将参数中的函数添加到当前Promise的正常执行序列。
  • .catch()则设定Promise的异常处理序列。
  • .finally()在Promise执行的最后一定会执行序列。

.then()传入的函数会按照顺序依次执行,有任何异常都会直接跳到catch序列;

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});
resolve() 中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。

reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。

但是请注意以下两点:

resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列;
resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。

Promise对象代表一个异步操作。存在3中状态: Pending(进行中)、Resolved(已完成 fulfilled) 和 Rejected(已失效)
通过回调里的 resolve(data) 将这个 promise 标记为 resolverd,然后进行下一步 then((data)=>{//do something}),resolve 里的参数就是你要传入 then 的数据。

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/280681.html

(0)
上一篇 2022年8月15日
下一篇 2022年8月15日

相关推荐

发表回复

登录后才能评论