promise链式调用_promise和async await

promise:

我理解的就是它优化了回调地狱，.then使回调函数变成了链式写法（链式编程 是将多个操作（多行代码）通过点号"."链接在一起成为一句代码。 链式代码通常要求操作有返回值），程序结构看上去更直观。

Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有两种状态改变：pending->fulfilled、pending->rejected

缺点：

①无法取消Promise，一旦新建它就会立即执行，无法中途取消。

②如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。

③当处于进行中状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

一个例子：

    new Promise((resolve,reject)=>{}).then(
        value=>{
      
            console.log(value);
        },
        reason=>{
      
            console.log(reason);
        }
    );

使用promise封装ajax异步请求：

https://www.bilibili.com/video/BV15J411G7FG?p=14​www.bilibili.com

function ajax(url){
      
    return new Promise((resolve,reject)=>{
      
        let xhr=new XMLHttpRequest();
        xhr.open("GET",url);
        xhr.send();
        xhr.onload=function(){
      
            if(this.status==200){
      
                resolve(JSON.parse(this.response));
            }else{
      
                reject("加载失败");
            }
        };
        xhr.onerror=function(){
      
            reject(this);
        }
    })
}

Javascript异步编程的4种方法 - 阮一峰的网络日志​www.ruanyifeng.com

async await：

语法糖（英语：Syntactic sugar）是由英国计算机科学家彼得·兰丁发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。

async=new promise

await=.then

手写async await：

function asyncToGenerator(generatorFunc){
      
    //返回的是一个新的函数
    return function(){
      
        //先调用generator函数，生成迭代器
        //对应var gen=testG()
        const gen=generatorFunc.apply(this,arguments)
        //返回一个promise，因为外部是用.then的方式或者await方式去使用这个函数的返回值的
        //var test=asyncToGenerator(testG)
        //test().then(res=>console.log(res))
        return new Promise((resolve,reject)=>{
      
            //内部定义一个step函数，用来一步步跨过yield的阻碍
            //key有next和throw两种取值，分别对应了gen的next和throw方法
            //args参数则是用来把promise resolve出来的值交给下一个yield
            function step(key,arg){
      
                let generatorResult
                //这个方法需要包裹在try catch中
                //如果报错了，就把promise给reject掉，外部通过.catch可以获取到错误
                try{
      
                    generatorResult=gen[key](arg)
                }catch(error){
      
                    return reject(error)
                }
                //gen.next()得到的结果是一个{value,done}的结构
                const {
      value,done}=generatorResult
                if(done){
      
                    //如果已经完成了，就直接resolve这个promise
                    //这个done是在最后一次调用next后才会为true
                    //此时的结果是{done:true,value:'success'}
                    //这个value也就是generator函数最后的返回值
                    return resolve(value)
                }else{
      
                    //除了最后结束的时候外，每次调用gen.next()其实是返回{value:Promise,done:false}的结构
                    //注意Promise.resolve可以接受一个promise为参数，且这个promise参数被resolve的时候，这个then才会被调用
                    return Promise.resolve(
                        //这个value对应的是yield后面的promise
                        value
                        ).then(
                            //value这个promise被resolve时，就会执行next，且只要done不是true时就会递归的往下解开promise
                            //对应gen.next().value.then(value=>{
                                //gen.next(value).value.then(value2=>{
                                  //  gen.next()
                                    //此时done为true了，整个promise被resolve了
                                    //最外部的test().then(res=>console.log(res))的then就开始执行了
                                //})
                            //})
                            function onResolve(val){
      
                                step("next",val)
                            },
                            //如果promise被reject了，就再次进入step函数
                            //不同的是这次的try catch中调用的是gen.throw(err)
                            //那么自然就被catch到，然后把promise给reject掉
                            function onReject(err){
      
                                step("throw",err)
                            },
                        )
                }
            }
            step("next")
        })
    }
}