【谈谈对异步编程和promise的理解】

ES6中promise的理解

经常被问到promise的相关问题，如promise.all（）这些的使用等等，总感觉知道一些又不太清楚，今天来整理一下

---

---

一、异步编程

同步：如果程序调用某个方法，等待其执行全部处理后才能继续执行，我们称其为同步的。同步至程序必须依次执行，前一个方法没有执行完，后面的函数处于阻塞状态。
那么异步编程呢，当前调用发出之生在没有得到结果之前后续代码可以执行，当前调用的结果会通知、回调函数等方式告诉调用者，异步是非阻塞。
简单理解就是，我先烧水，然后去做其他事情，水烧好了然后告诉我，我再拿来用。
常见的应用场景：(1)网络请求(2)读取文件(3)js中的事件函数就是非常典型的异步表现形式。

二、回调函数

一个函数被作为参数传递给另一个函数（在这里我们把另一个函数叫做“otherFunction”），回调函数在otherFunction中被调用，也被称为高阶函数。
并且它不会立即执行，只有当满足一定条件后该函数才可以执行，这种函数就称为回调函数。回调函数自定义。

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

function（）{console.log()}在三秒之后才被执行，并且是在定时器里面，函数是作为参数。

三、回调地狱

为什么会出现回调地狱呢？
异步编程是因为我们不想等同步完成之后再去进行后面的操作，觉得浪费时间，所以异步编程也就不能保证它会顺序执行了；

回调地狱是因为，假如我们有几个异步任务，每个异步任务的完成时间不一样，但是我们又需要每个异步任务里面的结果，并且想要顺序执行，而异步任务不能保证，我们想到的解决方法是，在上一个异步任务里面调用另一个异步任务，这样嵌套，这样等就出现的层层嵌套的问题，也就是回调地狱

比如下面的代码，我们就是想先打印张三，在打印李四…

             //地狱回调
            setTimeout(function () {  //第一层
                console.log('张三');//等3秒打印张三在执行下一个回调函数
                setTimeout(function () {  //第二层
                    console.log('李四');//等2秒打印李四在执行下一个回调函数
                    setTimeout(function () {   //第三层
                        console.log('王五');//等一秒打印王五
                    }, 1000)
                }, 2000)
            }, 3000)

但是这种嵌套，代码可读性比较差，ES6引入了promise

四、 promise

Promise是js中的一个原生对象，是一种异步编程的解决方案，可以替换掉传统的回调函数解决方案,使函数调用更加优雅。

promise用法

Promise对象是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve, reject) {});

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

使用promise进行异步函数调用

// promise解决方式
function fn(str) {
    var promise = new Promise(function (success, error) { //success 是成功的方法  error是失败的方法  
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                success(str)
            }
            else {
                error('失败')
            }
        })
    })
    return promise;
}
 
fn('张三')
    .then((res) => { //then是成功执行的方法 返回的还是一个promise对象
        console.log(res);//打印张三  res是执行
        return fn('李四');
    })
    .then((res) => {
        console.log(res);
        return fn('王五')
    })
    .then((res) => {
        console.log(res);
    })
    .catch((res) => { //catch是失败执行的方法
        console.log(res);
    })

promise解决异步操作的优点：

• 链式操作减低了编码难度
• 代码可读性明显增强

实例方法

Promise构建出来的实例存在以下方法：

1. then()
2. catch()
3. finally()

then()

then是实例状态发生改变时的回调函数，第一个参数是resolved状态的回调函数，第二个参数是rejected状态的回调函数,用来处理成功响应的数据

then方法返回的是一个新的Promise实例，也就是promise能链式书写的原因
可以用 then 方法和 catch 方法分别指定 resolved 状态和 rejected 状态的回调函数。

catch()

catch()方法是.then(null, rejection)或.then(undefined, rejection)的别名，用于指定发生错误时的回调函数
Promise对象的错误具有“冒泡”性质，会一直向后传递，直到被捕获为止，即如果.then()没有传递第二个参数reject，在后面的catch中回捕获并打印错误

finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

promise的状态

promise对象仅有三种状态

1. pending（进行中）
2. fulfilled（已成功）
3. rejected（已失败）

promise的特点

对象的状态不受外界影响，只有异步操作的结果，可以决定当前是哪一种状态
一旦状态改变（从pending变为fulfilled和从pending变为rejected，只有这两种可能），就不会再变，任何时候都可以得到这个结果

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”
reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”

promise的缺点

• 无法取消promsie,因为promsie一旦new出来就是会立即执行的，无法中途取消
• 不设置回调函数，无法捕获到promise内部抛出的错误；比如没有catch，也没有reject无法抛出错误
• 处于pending阶段的时候，无法得知当前进行的阶段（刚刚开始还是即将完成）

promise的方法

Promise构造函数存在以下方法：

• all()
• race()
• allSettled()
• resolve()
• reject()
• try()

all()

all字面意思 所有，只有所有的promise实例通过才通过，只要有一个不通过就失败
Promise.all()方法用于将多个 Promise实例，包装成一个新的 Promise实例

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

接受一个数组（迭代对象）作为参数，数组成员都应为Promise实例

实例p的状态由p1、p2、p3决定，分为两种：

1. 只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数
2. 只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数
   注意，如果作为参数的 Promise 实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法，

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e); //这里p2有自定义的catch

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

如果p2没有自己的catch方法，就会调用Promise.all()的catch方法

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了
//这里p2没有自定义的catch 调用的是promise.all().catch()

race()

race 字面意思竞赛 ，只要有一个promise实例改变就改变状态
Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例

const p = Promise.race([p1, p2, p3]);
只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变

率先改变的 Promise 实例的返回值则传递给p的回调函数

const p = Promise.race([
  fetch('/resource-that-may-take-a-while'),
  new Promise(function (resolve, reject) {
    setTimeout(() => reject(new Error('request timeout')), 5000)
  })
]);

p
.then(console.log)
.catch(console.error);

allSettled()

allSettled可以字面意思理解 ，等所有的promise实例有配置完成，也就是都返回实例结果了，再将所有的promise包装成一个新的promise实例

Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例

只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束

resolve()

将现有对象转为 Promise对象

Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

参数可以分成四种情况，分别如下：

参数是一个 Promise 实例，promise.resolve将不做任何修改、原封不动地返回这个实例
参数是一个thenable对象，promise.resolve会将这个对象转为 Promise对象，然后就立即执行thenable对象的then()方法
参数不是具有then()方法的对象，或根本就不是对象，Promise.resolve()会返回一个新的 Promise 对象，状态为resolved
没有参数时，直接返回一个resolved状态的 Promise 对象

reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

p.then(null, function (s) {
  console.log(s)
});
// 出错了

Promise.reject()方法的参数，会原封不动地变成后续方法的参数

Promise.reject('出错了')
.catch(e => {
  console.log(e === '出错了')
})
// true

应用场景

图片加载
promise.all() 将多个请求任务合并到一起，设置一个loading，然后全部的请求完成再响应
promise.race()可以设置超时设置