ES6：Promise

1.同步操作和异步操作

在了解Promise之前，咱们先聊一下什么是同步操作和异步操作

1.1 同步操作和异步操作详解

任务可以分成两种，一种是同步任务（synchronous），另一种是异步（asynchronous）。

同步任务：在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；

异步任务：不进入主线程、而进入"任务队列"（task queue）的任务，只有等主线程任务执行完毕，"任务队列"开始通知主线程，请求执行任务，该任务才会进入主线程执行

console.log("这是开始");

function fn1() {
  console.log("这是一条消息2");
  fn2();
}

function fn2() {
  console.log("这是一条消息3");
}

setTimeout(function cb1() {
  console.log("这是来自第一个回调的消息");
});

console.log("这是一条消息1");
fn1();

setTimeout(function cb2() {
  console.log("这是来自第二个回调的消息");
}, 0);

console.log("这是结束");
//输出的结果：
//这是开始
//这是一条消息1
//这是一条消息2
//这是一条消息3
//这是结束
//这是来自第一个回调的消息
//这是来自第二个回调的消息

1.2 js中的异步操作：

1.定时器都是异步操作

2.事件绑定都是异步操作

3.AJAX中一般我们都采取异步操作（也可以是同步）

4.回调函数可以理解为异步（不是严谨的异步操作）剩下的都是同步处理

1.3 补充：什么是回调函数

被作为实参传入另一函数，并在该外部函数內被调用，用以来完成某些任务的函数，被称为回调函数

function age(age){
    alert("I am "+age);
}
function f(callback){
    let value=prompt("请输入你的年龄");
    callback(value);
}
f(age);

二.Promise

Promise是异步编程的一种解决方案，是一个对象，可以获取异步操作的消息，大大改善了异步编程的困难，避免了回调地狱，比传统的解决方案回调函数和事件更合理和更强大。

从语法上讲，Promise是一个对象，它可以获取异步操作的消息。提供了一个统一的API，各种异步操作都可以用同样的方法进行处理

2.1 Promise的实例有三个状态：

（1）Pending（进行中）
（2）Resolved（已完成）
（3）Rejected （已拒绝）

2.2 Promise的实例有两个过程

（1）pending > fulfiled ：Resolved

（2）pending > rejected ：Rejected

注意：一旦从进销项状态变为其他状态就永远不能更改状态了
推荐参考文章：https://www.jb51.net/article/226161.htm

2.3 Promise的基本使用

const pro = new Promise((resolve, reject) => {
  // 未决阶段的处理
  // 通过调用resolve函数将Promise推向已决阶段的resolved状态
  // 通过调用reject函数将Promise推向已决阶段的rejected状态
  // resolve和reject均可以传递最多一个参数，表示推向状态的数据
});

pro.then(
  (data) => {
    //这是thenable函数，如果当前的Promise已经是resolved状态，该函数会立即执行
    //如果当前是未决阶段，则会加入到作业队列，等待到达resolved状态后执行
    //data为状态数据
  },
  (err) => {
    //这是catchable函数，如果当前的Promise已经是rejected状态，该函数会立即执行
    //如果当前是未决阶段，则会加入到作业队列，等待到达rejected状态后执行
    //err为状态数据
  }
);
//catch:该方法相当于 then 方法的第二个参数，指向 reject 的回调函数。
//另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止陨星，而是进入catch 方法中。
pro.then((data)=>{
    
}).catch((err)=>{
    //错误
}).finally(()=>{
    //finally 方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。
})

案例：

const promise = new Promise((resolve, reject) => {
  console.log(1);
  setTimeout(() => {
    console.log("timerStart");
    resolve("success");
    console.log("timerEnd");
  }, 0);
  console.log(2);
});
promise.then((res) => {
  console.log(res);
});
console.log(3);

/*输出结果
1
2
3
"timerStart"
"timerEnd"
"success"
*/

三.async和wait

3.1 async

async：目的是简化在函数的返回值中对 Promise 的创建，用于修饰函数（无论是函数字面量还是函数表达式），放置在函数最开始的位置，被修饰函数的返回结果一定是 Promise 对象

async function test() {
  console.log(1);
  return 2;
}

//等效于

function test() {
  return new Promise((resolve, reject) => {
    console.log(1);
    resolve(2);
  });
}

3.2 await

await：await 关键字必须出现在 async 函数中，用在某个表达式之前，如果表达式是一个 Promise，则得到的是 thenable 中的状态数据。

async function test1() {
  console.log(1);
  return 2;
}

async function test2() {
  const result = await test1();
  console.log(result);
}

test2();//2