初解Promise

Promise用途

Promise是异步编程的一种解决方案,可以用来解决JavaScript中回调嵌套过多导致的回调地狱(callbackhell)而产生的。你可以将Promise当做一个容器,里面保存着某个未来才会结束的事件(通常为异步操作)的结果。从语法上说Promise是一个对象,可以通过其提供的统一的API来获取异步操作的消息。

创建一个new Promise

const promise = new Promise(function(resolve,reject){
//code
if(/*异步操作成功*/){
      resolve(value);
  } else{
      reject(error);
  }
});

Promise.prototype.then的使用

Promise实例具有then方法,它的作用是为Promise实例添加状态改变时的回调函数。then的第一个参数是resolved状态的回调函数,第二个参数(可选)是rejected状态的回调函数。then方法返回的是一个新的Promise实例!因此可以采用链式写法。

语法:

p.then(onFulfilled[,onRejected]);

p.then(value=>{
//fulfillment
},reason=>{
//rejection
});

简单示例

const promise1 = new Promise((resolve,reject)=>{
resolve('成功!');
});
promise1.then((value)=>{
console.log(value);
});

onFulfilled(可选):当Promise变成接受(fulfilled)状态时调用的函数

onRejected(可选):当Promise变成拒绝状态(rejected)时调用的函数

链式用法

Promise.resolve("www")
//接受"www"并且和".2demo"合并,并将结果作为下一个resolved返回
  .then(function(string){
      return new Promise(function(resolve,reject){
          setTimeout(function(){
  string+='.2demo';
  resolve(string);
          },2000);
      });
  })
  //接受"www.2demo",放入到一个异步函数中处理该字符并将其打印至控制台,但是不将处理后的字符串返回下一个
  .then(function(string){
  setTimeout(function(){
      string +=".top";
      console.log(string);
      },5000);
  return string;
  })
  //接受上一个回调函数处理前的字符串,并且打印帮助理解
  .then(function(string) {
      console.log("这句话会2s后出现")
      console.log(string+"这句话中没有.top");
  });

Promise.all 的使用

Promise.all是将多个Promise实例包装成一个新的Promise实例

const p = Promise.all([p1,p2,p3])

Promise.all方法接受一个Promise的iterable类型(Array,Map,Set都属于ES6的iterable了下)的输入,输入的说有Promise的resolve的回调结果都是一个数组,这个Promise的resolve回调执行需所有输入的Promise的resolve回调结束或者输入的iterable里不含Promise的时候。它的reject回调执行只需要任何一个输入的Promise的reject回调执行或者输入不合法就会立即抛出错误,且reject的是第一个抛出的错误

上面代码中Promise.all()接受一个数组作为参数,p1,p2,p3都是Promise实例

简单示例

const p1= Promise.resolve(23);
const p2= 41;
const p3 =new Promise((resolve,reject)=>{
  setTimeout(resolve,1000,"2demo")
});
Promise.all([p1,p2,p3]).then((values)=>{console.log(values)})

Promise.race 的使用

Promise.race用法和Promise.race类似,也是将多个实例包装成一个新的Promise实例

const p = Promise.race([p1,p2,p3])

与Promise.all不同的是Promise.race只要一个实例率先改变状态那么p的状态就跟着改变,率先改变的Promise实例的返回值就会传递给P的回调函数。

Promise.race方法的参数与Promise.all相同

简单示例:

const p1=new Promise((resolve,reject)=>{
  setTimeout(resolve,1000,"第一个实例")
});
const p2 = new Promise((resolve,reject)=>{
  setTimeout(resolve,300,"第二个实例")
});
Promise.race([p1,p2]).then((values)=>{console.log(values)});
前端

跨域详解

2021-3-2 22:23:56

小工具

音乐解锁|解锁网易云,QQ音乐,酷我音乐,虾米音乐等主流音乐平台的加密格式

2020-8-14 12:52:11

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
今日签到
有新私信 私信列表
搜索