ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

JavaScript Promise

2022-08-15 15:01:37  阅读:157  来源: 互联网

标签:function 异步 resolve console 函数 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 的数据。

标签:function,异步,resolve,console,函数,JavaScript,Promise
来源: https://www.cnblogs.com/openmind-ink/p/16588304.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有