2022-09-16 前后端交互方式总结:Promise定义和用法以及基于Promise 接口调用方式:ajax fetch axios async/await

零.Promise

1.什么是Promise?

Promise是JS中进行异步编程的一种新的解决方案,(旧方案是单纯使用回调函数)
语法上,Promise是一个对象,从Promise对象可以获取异步操作的消息

2.使用Promise有什么好处?

• Promise支持链式调用,可以避免回调地狱(回调地狱的终极解决方案:async/await)
• Promise对象提供了简介的API,使用控制异步操作变得容易

3.Promise的基本用法

var p = new Promise(function(resolve,reject){
   //实例化Promise对象
    resolve(data);// 成功时调用 resolve()
    reject(err); // 失败时调用 reject()
});
p.then(function(data){
   
    console.log(data);// 从resolve得到正常结果,data为resolve中的参数
},function(err){
   
    console.log(arr);// 从reject得到错误信息,err为reject中的参数
});

4.Promise的基本流程

5.pending,fulfilled和rejected是什么?

• Promise类的实例对象是有状态(state)的，对应三个值：pending(待定)、fullfilled(成功)、rejected(失败)
• 实例的初始状态为pending，一旦由pending状态落定成fulfilled状态或rejected状态，就不可再次改变，该过程是不可逆的
• 与之对应，Promise类实例对象有成功的结果(value)和失败的原因(reason)，默认值都为undefined，只有状态被改变后(pending==>fullfilled或者pending==>rejected)才会为其赋值。

Promsie内部的state、value、reason是私有的，外界是访问不到的

6.resolve和reject是什么?

在Promise的实例化对象中,存在一个用于处理异步任务的构造函数
resolve和reject就是该构造函数的两个形参,用于处理成功和失败两种情况

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
• reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

7.参数executor

什么是executor?

executor(读作:[ɪɡˈzekjətə®]),是带有 resolve 和 reject 两个参数的函数 。即(resolve,reject)=>{...}
Promise构造函数执行时立即调用executor函数,resolve和reject两个函数作为参数传递给executor(executor在Promise构造函数返回新建对象时被调用)

executor的resolve和reject被调用时改变Promise的状态

• resolve 和 reject 函数被调用时，分别将promise的状态改为fulfilled（完成）或rejected（失败）。
  executor 内部通常会执行一些异步操作
• 一旦完成，可以调用resolve函数来将promise状态改成fulfilled，
  或者在发生错误时将它的状态改为rejected。
• 如果在executor函数中抛出一个错误，那么该promise 状态为rejected。
  executor函数的返回值被忽略。

8.then()和catch()是什么?

then方法

then()的作用是为 Promise 实例添加状态改变时的回调函数。
then方法可以有两个参数:

第一个是resolve状态的回调函数
第二个是reject状态的回调函数（可选）

then方法返回的是**一个新的Promise实例（**不是原来那个Promise实例）
回顾:Promise接收一个函数作为参数，这个函数有两个参数，第二个参数可选，分别是resolve和reject，
这两个参数分别和then方法的两个参数对应。

catch方法

catch方法就是then方法的语法糖,是.then(null, rejection)或.then(undefined, rejection)的别名
也就是说，catch也是then，它用于捕获错误，它的参数也就是then的第二个参数。

9.Promise.race()和Promise.all()是什么?

promise中的all方法和race方法
这两个方法，都是并行执行多个异步操作
区别:all方法遵循“谁跑得慢，以谁为准执行回调”，race方法遵循的是“谁跑的快，以谁为准执行回调”

示例

        let p1 = Promise.resolve('aaa')
        let p2 = Promise.resolve('bbb')
        let p3 = Promise.reject('ccc')
        let p4 = Promise.resolve('ddd')
        Promise.all([<