ECMAScript 6 Promise - Promise

前言

分享一首歌：青花 - 周传雄，貌似挺好听的~~~~

1 什么是Promise

Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。可以替换掉传统的回调函数解决方案（回调地狱）。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。好美啊~

（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

下面先 new一个Promise

let p = new Promise(function(resolve, reject){
		//做一些异步操作
		setTimeout(function(){
			console.log('执行完成Promise');
			resolve('要返回的数据可以任何数据例如接口返回数据');
		}, 2000);
	});

刷新页面会发现控制台直接打出

其执行过程是：执行了一个异步操作，也就是setTimeout，2秒后，输出“执行完成”，并且调用resolve方法。

注意！我只是new了一个对象，并没有调用它，我们传进去的函数就已经执行了，这是需要注意的一个细节。所以我们用Promise的时候一般是包在一个函数中，在需要的时候去运行这个函数，如：

<div onClick={promiseClick}>开始异步请求</div>
 
const promiseClick =()=>{
	 console.log('点击方法被调用')
	 let p = new Promise(function(resolve, reject){
		//做一些异步操作
		setTimeout(function(){
				console.log('执行完成Promise');
				resolve('要返回的数据可以任何数据例如接口返回数据');
			}, 2000);
		});
        return p
	}

刷新页面的时候是没有任何反映的，但是点击后控制台打出

当放在函数里面的时候只有调用的时候才会被执行

那么，接下里解决两个问题：

1、为什么要放在函数里面

2、resolve是个什么鬼

我们包装好的函数最后，会return出Promise对象，也就是说，执行这个函数我们得到了一个Promise对象。接下来就可以用Promise对象上有then、catch方法了，这就是Promise的强大之处了，看下面的代码：

promiseClick().then(function(data){
    console.log(data);
    //后面可以用传过来的数据做些其他操作
    //......
});

这样控制台输出

先是方法被调用起来执行了promise，最后执行了promise的then方法，then方法是一个函数，接收一个参数，是接收resolve返回的数据，输出了“要返回的数据可以任何数据例如接口返回数据”

这时候你应该有所领悟了，原来then里面的函数就跟我们平时的回调函数一个意思，能够在promiseClick这个异步任务执行完成之后被执行。这就是Promise的作用了，简单来讲，就是能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

你可能会觉得在这个和写一个回调函数没有什么区别；那么，如果有多层回调该怎么办？如果callback也是一个异步操作，而且执行完后也需要有相应的回调函数，该怎么办呢？总不能再定义一个callback2，然后给callback传进去吧。而Promise的优势在于，可以在then方法中继续写Promise对象并返回，然后继续调用then来进行回调操作。

所以：精髓在于：Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的：

promiseClick()
.then(function(data){
    console.log(data);
    return runAsync2();
})
.then(function(data){
    console.log(data);
    return runAsync3();
})
.then(function(data){
    console.log(data);
});

这样能够按顺序，每隔两秒输出每个异步回调中的内容，在runAsync2中传给resolve的数据，能在接下来的then方法中拿到。

（Ps：此处执行多次是因为研究该用法的时候我在一个react的demo中进行的，该页面多个元素改变导致页面多次渲染执行所致，正常页面只渲染一次的话就所有只会执行一次）
————————————————
版权声明：本文为CSDN博主「傻小胖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_34645412/article/details/81170576

2 Promise.all （Promise并行）

Promise.all 接受的数组参数中的 promises 是按照顺序执行的，数组中的第一个 promise 会首先执行，第二个 promise 将会第二个执行，以此类推。

Promise.all 在任意一个传入的 promise 失败时返回失败！！

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values);
});
// Expected output: Array [3, 42, "foo"]

3 Promise.race（Promise并行）

将多个Promise放在一个数组中，数组中有一个promise最先得到结果，不管是" 完成（resolved）“还是” 失败（resolved）" ， 那么这个 .race 方法就会返回这个结果。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then((value) => {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// Expected output: "two"

4 Promise串行

    var p = function () {
       return new Promise(function (resolve, reject) {
         setTimeout(() => {
           console.log('1000')
           resolve()
         }, 1000)
       })
     }
     var p1 = function () {
       return new Promise(function (resolve, reject) {
         setTimeout(() => {
           console.log('2000')
           resolve()
         }, 2000)
       })
     }
     var p2 = function () {
       return new Promise(function (resolve, reject) {
         setTimeout(() => {
           console.log('3000')
           resolve()
         }, 3000)
       })
     }


     p().then(() => {
       return p1()
     }).then(() => {
       return p2()
     }).then(() => {
       console.log('end')
     })

5 实现一个Promise

6 回调地狱 -> Promise -> async/await

在正式了解“回调地狱”之前，我们先了解两个概念：

6.1 回调函数

当一个函数作为参数传入另一个参数中，并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。我们熟悉的定时器和Ajax中就存在有回调函数：

setTimeout(function(){   //function(){console.log('执行了回调函数')}就是回调函数，它只有在3秒后才会执行
	console.log('执行了回调函数');
},3000)  //3000毫秒

这里的回调函数是function(){console.log('执行了回调函数')}，在满足时间3秒后执行。

//1.创建异步对象
			var xhr=new XMLHttpRequest();
      //2.绑定监听事件(接收请求)
			xhr.onreadystatechange=function(){
				//此方法会被调用4次
				//最后一次，readyState==4
				//并且响应状态码为200时，才是我们要的响应结果 xhr.status==200
				if(xhr.readyState==4 && xhr.status==200){
					//把响应数据存储到变量result中
					var result=xhr.responseText;
					console.log(result);
				}
			}
      //3.打开链接（创建请求）
			xhr.open("get","/demo/ajaxDemo",true);
      //4.发送请求
			xhr.send();

这里的回调函数是xhr.onreadystatechange绑定的函数，在xhr.send()发送请求并拿到响应后执行。

6.2 异步任务

与之相对应的概念是“同步任务”，同步任务在主线程上排队执行，只有前一个任务执行完毕，才能执行下一个任务。异步任务不进入主线程，而是进入异步队列，前一个任务是否执行完毕不影响下一个任务的执行。同样，还拿定时器作为异步任务举例：

setTimeout(function(){
    console.log('执行了回调函数');
},3000)
console.log('111');

如果按照代码编写的顺序，应该先输出“执行了回调函数”，再输出“111”。但实际输出为：

这种不阻塞后面任务执行的任务就叫做异步任务。
接下来让我们看看什么是回调地狱。

6.3 回调地狱

6.3.1 回调地狱是什么？

根据前面我们可以得出一个结论：存在异步任务的代码，不能保证能按照顺序执行，那如果我们非要代码顺序执行呢？

比如我要说一句话，语序必须是下面这样的：武林要以和为贵，要讲武德，不要搞窝里斗。
我必须要这样操作，才能保证顺序正确：

setTimeout(function () {  //第一层
    console.log('武林要以和为贵');
    setTimeout(function () {  //第二程
        console.log('要讲武德');
        setTimeout(function () {   //第三层
            console.log('不要搞窝里斗');
        }, 1000)
    }, 2000)
}, 3000)

可以看到，代码中的回调函数套回调函数，居然套了3层，这种回调函数中嵌套回调函数的情况就叫做回调地狱。

总结一下，回调地狱就是为是实现代码顺序执行而出现的一种操作，它会造成我们的代码可读性非常差，后期不好维护。

那该如何解决回调地狱呢？

6.3.2 如何解决回调地狱

1.Promise
Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案。

1. Promise构造函数接收一个函数作为参数，我们需要处理的异步任务就是在该函数体内，该函数的两个参数是resolve，reject。异步任务执行成功时调用resolve函数返回结果，反之调用reject。
2. Promise对象的then方法用来接收处理成功时响应的数据，catch方法用来接收处理失败时相应的数据。
3. Promise的链式编程可以保证代码的执行顺序，前提是每一次在then做完处理后，一定要return一个Promise对象，这样才能在下一次then时接收到数据。
   下面是实例代码：

function fn(str){
    var p=new Promise(function(resolve,reject){
        //处理异步任务
        var flag=true;
        setTimeout(function(){
            if(flag){
                resolve(str)
            }
            else{
                reject('操作失败')
            }
        })
    })
    return p;
}

fn('武林要以和为贵')
.then((data)=>{
    console.log(data);
    return fn('要讲武德');
})
.then((data)=>{
    console.log(data);
    return fn('不要搞窝里斗')
})
.then((data)=>{
    console.log(data);
})
.catch((data)=>{
    console.log(data);
})

但是Promise最大的问题就是代码冗余，原来的异步任务被Promise封装一下，不管什么操作都用then，就会导致一眼看过去全是then…then…then…,这样也是不利于代码维护的。

所以下面的async/await 可以时代码看起来更像同步代码。

2.async/await
首先我们看async关键字，他作为一个关键字放到声明函数前面，表示该函数为一个异步任务，不会阻塞后面函数的执行：

    async function fn(){
        return '不讲武德';
    }
    console.log(fn());

可以看到async函数返回数据时自动封装为一个Promise对象。

和Promise对象一样，处理异步任务时也可以按照成功和失败来返回不同的数据，处理成功时用then方法来接收，失败时用catch方法来接收数据：

    async function fn() {
        var flag = true;
        if (flag) {
            return '不讲武德';
        }
        else{
            throw '处理失败'
        }
    }
    fn()
    .then(data=>{
        console.log(data);
    })
    .catch(data=>{
        console.log(data);
    })

    console.log('先执行我，表明async声明的函数是异步的');

当把flag设置为false是，执行结果为：

async关键字说完了，我们看看await关键字

• await关键字只能在使用async定义的函数中使用

• ​await后面可以直接跟一个 Promise实例对象（可以跟任何表达式，更多的是跟一个返回Promise对象的表达式）

• await函数不能单独使用

• await可以直接拿到Promise中resolve中的数据。

    //封装一个返回promise的异步任务
    function fn(str) {
        var p = new Promise(function (resolve, reject) {
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    resolve(str)
                } else {
                    reject('处理失败')
                }
            })
        })
        return p;
    }
  
    //封装一个执行上述异步任务的async函数
    async function test(){
        var res1=await fn('武林要以和为贵');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2=await fn('要讲武德');
        var res3=await fn('不要搞窝里斗');
        console.log(res1,res2,res3);
    }
    //执行函数
    test();
  

结果为：

为什么叫await等待呢，因为当代码执行到async函数中的await时，代码就在此处等待不继续往下执行，知道await拿到Promise对象中resolve的数据，才继续往下执行，这样就保证了代码的执行顺序，而且使异步代码看起来更像同步代码。

6.3.3 总结

总结一下，当我们写代码遇到异步回调时，我们想让异步代码按照我们想要的顺序执行，如果按照传统的嵌套方式，就会出现回调地狱，这样的代码不利于维护，我们可以通过Promise对象进行链式编程来解决，这样尽管可以解决问题，但是ES7给我们提供了更加舒适的async/await语法糖，可以使得异步代码看起来更像是同步代码。

7 通过输出顺序理解Promise

可参考我的其他博客：
ECMAScript 6 Promise - 通过Promise输出题理解Promise
JS - 事件循环EventLoop

8 阅读

Promise
ES6 Promise用法小结
一文告诉你什么是回调地狱，如何解决回调地狱？

俺困了，随缘看看，