js中的promise及async/await

什么是Promise？

Promise是一个构造函数，通过new来实例化，用于解决异步编程。

promise接受一个函数为参数,该函数接受两个函数为参数，分别是resolve和rejecte，由js引擎提供，不用自己部署。promise.then方法用于接收处理成功时相应的数据，catch用于接收处理失败时的数据。

promise的状态有哪些

promise的状态有pendding、fulfilled、rejected。
1.pendding：默认状态
2.当调用resolve函数，状态从pendding转为fulfilled；
3.当调用reject函数，状态从pendding转为rejected；
状态只会改变一次，改变之后不会再变。

promise的返回值—then方法

promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

Promise常见的问题

手写一个promise

//1.promise是一个构造函数并且接收一个函数作为参数
function myPromise(executor){
    //来到此处定义状态，一个state用于存储状态，一个result用于存储结果
    this.state= 'pending';
    this.result = undefined;
    //定义一个数组用于判断是否是异步，里面包含成功与失败的回调
    this.callBacks = [];
    //executor这个形参函数接收两个参数，一个是resolve，一个reject,所以此处构建这两个函数,注意，由于executor函数是直接调用的，所以this会指向window，故在此处记录this指向
    const _this = this;

    function resolve(data){
        //判断状态是否改变啦，改变啦就不在执行，因为状态只能改变一次
        if(_this.state !== 'pending') return;
        //执行resolve函数，将状态从pending转为fulfilled
        _this.state = 'fulfilled';
        //结果改为传入的值
        _this.result = data;

        _this.callBacks.forEach(item => {
            item.onResolved(data);
        });
    };
    function reject(data){
        //判断状态是否改变啦，改变啦就不在执行，因为状态只能改变一次
        if(_this.state !== 'pending') return;
         //执行reject函数，将状态从pending转为rejected
        _this.state = 'rejected';
        //结果改为传入的值
        _this.result = data;
        
        _this.callBacks.forEach(item => {
            item.onRejected(data);
        });
    };
    
    executor(resolve,reject);
};

//2.promise 能够调用then方法,且then方法接受两个函数作为参数，一个是成功的回调，一个是失败的回调
myPromise.prototype.then = function(onResolved, onRejected){
    //通过promise的状态去判断是执行成功还是失败函数（那Promise就应该有两个状态，去定义）
     if(this.state === 'fulfilled'){
         //调用成功函数,并将传入的值返回
         onResolved(this.result);
     }
     if(this.state === 'rejected'){
         //调用失败函数,并将传入的值返回
         onRejected(this.result);
     }
    //如果状态为pending，说明promise中执行的是异步任务
    if(this.state == 'pending'){
        this.callBacks.push({
            onResolved: onResolved,
            onRejected: onRejected
        });
    }
};



//使用
let p = new myPromise((resolve,reject)=>{
    setTimeout(()=>{
        console.log(1);
        resolve()
    },3000)
}).then((resolve,reject)=>{
    setTimeout(()=>{console.log(2);resolve()},2000)
})

面试题：delay(2000,1).then(res={console.log(res)}); //要求2秒以后输出为1

function delay(time,data){
    let p = new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(1);
        },time);
    });

    p.then(res=>console.log(res));
};
delay(2000,1)

async/await

async是用于申明一个function是异步的，而await是等待一个异步方法执行完成。

async返回的是一个promise对象，await就是等这个promise返回结果后再继续执行

async await和promise的区别

async/await 和 Promise 的区别主要体现在语法、错误处理、并发处理能力、代码可读性等方面。

1.语法差异：
Promise 使用 then() 和 catch() 方法来处理异步操作的结果和错误。
async/await 使用 async 和 await 关键字以更直观的方式编写异步代码。

2.错误处理：
Promise 使用 catch() 方法来捕获错误。
async/await 可以使用 try-catch 语句来捕获错误，这使得异常处理更加方便，代码更加清晰明了。

3.并发处理能力：
Promise 可以并行执行多个异步操作，例如使用 Promise.all() 方法
async/await 默认是串行执行异步操作，不适合并发执行多个异步任务。

4.代码可读性：
Promise 的链式调用语法有时会使代码阅读和维护变得困难。
async/await 让异步代码看起来更像同步代码，逻辑更清晰，可读性更好。

5.函数适用性：
Promise 更适用于一连串的异步请求。
async/await 更适合串行的异步请求之间的依赖关系比较复杂或需要控制执行顺序的情况。
综上所述，Promise 和 async/await 各有优势，适用于不同的场景。Promise 在并发处理和链式调用方面更为灵活，而 async/await 则提供了更接近同步编程的语法风格，使得代码更加清晰和易于理解。

参考链接：https://blog.csdn.net/Liw_J/article/details/137340305