ES6--Promise基础

Posted 2022-12-01 Sco_Jing1031

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ES6--Promise基础相关的知识，希望对你有一定的参考价值。

欢迎学习交流！！！
持续更新中…

文章目录

Promise

Promise

Promise是异步编程的一种解决方案，promise是一个对象，从它可以获取异步操作的消息。有三种状态：pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

promise目的：

解决回调地狱，代码难以维护，第一个函数的输出是第二个函数的输入
promise支持多个并发的请求，获取并发请求中的数据
解决异步问题，本身不能说promise是异步的

ES6 promise用法

Promise是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。

基础：

let p = new Promise((resolve, reject) => 
	//异步操作
    setTimeout(() => 
    	console.log('执行完成');
    	resolve('成功！')
    , 2000)
);

Promise的构造函数接收一个函数作为参数，且这个函数需要传入两个参数：

resolve ：异步操作执行成功后的回调函数
reject：异步操作执行失败后的回调函数

then 链式操作的用法

表面上看，Promise只是能够简化层层回调，但实质上，Promise的重点是“状态”，用维护状态、传递状态的方式使得回调函数能够及时调用，比传递callback函数要简单、灵活许多。

使用Promise的正确场景：

p.then((data) => 
    console.log(data);
)
.then((data) => 
    console.log(data);
)
.then((data) => 
    console.log(data);
);

reject 的用法

将Promise的状态设置为rejected，然后在then中就能捕捉到，执行“失败”的回调。

let p = new Promise((resolve, reject) => 
	//异步操作
	setTimeout(function() 
		var num = Math.ceil(Math.random()*10);   //生成1-10的随机数
		if (num <= 5) 
			resolve(num)
		 else 
			reject('数字太大了')
		
	, 2000)
);
p.then((data) => 
	console.log('resolved',data);
, (err) => 
	console.log('rejected', err);
)

then方法可以接收传的两个参数，第一个对应resolve的回调，第二个对应reject的回调，我们能够分别拿到他们传过来的数据。多次运行这段代码，会随机得到以下两种结果：

或者

catch 的用法

Promise对象除了then方法还有一个catch方法，它和then的第二个参数一样，用来指定reject的回调。用法：

p.then((data) => 
	console.log('resolve',data);
).catch((err) => 
	console.log('reject',err);
)

效果和写在then中的第二个参数一样，除此之外还会：在执行resolve的回调（上面then中的第一个参数）时，如果抛出异常即代码出错时，并不会报错卡死js，而是会进入catch方法中：

p.then((data) => 
    console.log('resolved',data);
    console.log(somedata); //此处的somedata未定义
)
.catch((err) => 
    console.log('rejected',err);
);

在resolve回调中，somedata变量未被定义，若不使用Promise，则代码运行此处会直接在控制台报错，但在此处会进入catch中，并且把错误原因传到reason参数中，控制台得到：

与try/catch语句功能相同

all 的用法：以跑得慢为准执行回调

all接收一个数组参数，里面的值最终都返回Promise对象

Promise的all方法提供了并行执行异步操作的能力，并在所有异步操作执行完后才执行回调：

let Promise1 = new Promise(function(resolve, reject))
let Promise2 = new Promise(function(resolve, reject))
let Promise3 = new Promise(function(resolve, reject))

let p = Promise.all([Promise1, Promise2, Promise3])

p.then(funciton()
  // 三个都成功则成功  
, function()
  // 只要有失败，则失败 
)

使用all可以并行执行多个异步操作，并在一个回调中处理所有的返回数据。使用场景：在素材较多的游戏应用中，打开网页时，预先加载需要用到的各种资源（图片、flash、静态文件等）。所有都加载完毕后再进行页面的初始化。

race 的用法：以跑得快为准执行回调

使用场景：用race给异步请求设置超时时间，并在超时后执行相应操作：

 //请求某个图片资源
    function requestImg()
        var p = new Promise((resolve, reject) => 
            var img = new Image();
            img.onload = function()
                resolve(img);
            
            img.src = '错误的图片路径';
        );
        return p;
    
    //延时函数，用于给请求计时
    function timeout()
        var p = new Promise((resolve, reject) => 
            setTimeout(() => 
                reject('图片请求超时');
            , 5000);
        );
        return p;
    
    Promise.race([requestImg(), timeout()]).then((data) =>
        console.log(data);
    ).catch((err) => 
        console.log(err);
    );

requestImg函数会异步请求一张图片，请求图片地址是错误的，因此无法成功请求到。timeout函数是一个延时5秒的异步操作。把这两个返回Promise对象的函数放进race，二者就会赛跑比较，若5秒之内图片请求成功了，则进入then方法，执行正常的流程。若5秒图片还未成功返回，那么timeout就跑赢了，则进入catch，报出“图片请求超时”的信息。运行结果如下：

手动实现promise

步骤一：实现成功和失败的回调方法

这是promise的基本功能。首先，创建一个构造函数promise，创建一个promise类，在使用的时候传入一个执行器executor，executor会传入两个参数：成功(resolve)和失败(reject)。因为成功和失败二者唯一且对立。在默认状态下，调用成功时，就返回成功态，调用失败时，返回失败态。代码如下：

class Promise 
    constructor (executor)
        //默认状态是等待状态
        this.status = 'panding';
        this.value = undefined;
        this.reason = undefined;
        //存放成功的回调
        this.onResolvedCallbacks = [];
        //存放失败的回调
        this.onRejectedCallbacks = [];
        let resolve = (data) => //this指的是实例
            if(this.status === 'pending')
                this.value = data;
                this.status = "resolved";
                this.onResolvedCallbacks.forEach(fn => fn());
            
        
        let reject = (reason) => 
            if(this.status === 'pending')
                this.reason = reason;
                this.status = 'rejected';
                this.onRejectedCallbacks.forEach(fn => fn());
            
        
        try//执行时可能会发生异常
            executor(resolve,reject);
        catch (e)
            reject(e);//promise失败了

步骤二：then方法链式调用

then方法是promise的最基本的方法，返回两个回调，成功的回调和失败的回调：

    then(onFulFilled, onRejected) 
    	if (this.status === 'resolved')  //成功状态的回调
      		onFulFilled(this.value);
    	
    	if (this.status === 'rejected') //失败状态的回调
      		onRejected(this.reason);

let p = new Promise(function()
    resolve('我是成功');
)
p.then((data) => console.log(data);,(err) => );
p.then((data) => console.log(data);,(err) => );
p.then((data) => console.log(data);,(err) => );

返回结果：

我是成功
我是成功
我是成功

为了实现该效果，则上一次的代码将要重新写过，因此可以把每次调用resolve的结果存入一个数组中，每次调用reject的结果存入另一个数组。这就是在上面定义两个数组,且分别在resolve()和reject()遍历两个数组的原因。

因此，在调用resolve()或者reject()之前，在pending状态时，会把多次then中的结果存入数组中，则上面的代码会改变为：

  then(onFulFilled, onRejected) 
    if (this.status === 'resolved') 
      onFulFilled(this.value);
    
    if (this.status === 'rejected') 
      onRejected(this.reason);
    
    // 当前既没有完成 也没有失败
    if (this.status === 'pending') 
      // 存放成功的回调
      this.onResolvedCallbacks.push(() => 
        onFulFilled(this.value);
      );
      // 存放失败的回调
      this.onRejectedCallbacks.push(() => 
        onRejected(this.reason);
      );