async与await

一、async和await

promise使用.then链式调用，但也是基于回调函数

async+await更加优雅的异步编程的写法

1.消灭异步回调的终极武器，

2.它是同步语法，也就是同步语法写异步代码

       

           ps：

• 

• new一个Promise对象(pending状态)包装异步操作,执行操作,成功了执行resolve函数，promise状态改为成功,成功再调用then方法时，调用第一个参数,也就是第一个回调函数中的代码,返回一个新的promise对象

async:

        1.async 函数的返回值为promise对象

        2.promise对象的结果由async函数执行的返回值决定

     //这样就变成了async 函数
      async   function fn(){
           //特殊之处在与 它的返回结果是一个promise对象


          // return '尚硅谷';
           //只要你返回的结果不是一个Promise类型的对象,则这个函数的返回结果就是一个 成功  的promise对象
           
           //抛出错误   这样返回的是一个失败的 Promise
           //throw new Error('出错了');

           //返回的结果是一个Promise对象  这种情况居多(返回值不是promise则成功,返回值是promise【promise的值的返回值是成功的】fn返回的结果也是成功的promise对象)

           return    new Promise ((resolve,reject)=>{
                resolve('成功的数据');
                // reject('失败的错误');
           });             // promise resovle返回的数据就是            函数fn返回的数据   差不多这个意思

         }

         const result =fn();
          
         //调用 then 方法
         result.then(value =>{    //result的then方法  回调
             console.log(value)
         }),reason =>{
             console.log(reason);
         }

         //console.log(result);

await:

        1.await必须写在async函数中,

        2.await右侧的表达式一般为promise对象

        3.await返回的是promise成功的值

        4.await的promise失败了，就会抛出异常,需要通过try...catch捕获处理

//创建一个promise对象 
        const p = new Promise((resolve, reject) => {
            reject('失败的值');      //调用resolve把p的状态改为了成功，并且传参改了成功的值
        })

        //await 要放在async函数中
        async function main() {
            try {
                // await 后放一个实例对象promise
                let result = await p;
                //await p这个表达式返回的结果（即promise对象成功状态返回的值）
                console.log(result);
            }
            catch (e) {   //失败
                console.log(e);
            }
        }
        //调用函数main
        main();

     

 需求 ：封装一个函数发送ajax请求，返回一个promise对象，用then方法处理异步回调返回的结果

   开源社区 - by apizza (apiopen.top)(接口开源地址)

//需求 发送 ajax 返回的结果是一个 promise 对象

        function sendAJAX(url) {

            //所以要在最外侧返回一个promise对象

            return new Promise((resolve, reject) => {



                //1.创建xhr 对象
                const xhr = new XMLHttpRequest();

                //2.初始化
                xhr.open('get', url);

                //3.发送请求

                xhr.send();

                //4.事件绑定处理服务器返回的数据
                xhr.onreadystatechange = function () {

                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            //外层返回了一个promise对象，
                            resolve(xhr.response);  //成功了promise会调用这个函数
                        } else {
                            //如果失败
                            reject(xhr.status);
                        }
                    }


                }

            });
        }

     

                                    不用async与await解决，then方法拿到异步的返回值

 //测试
       /*  const result  =  */   sendAJAX('https://api.apiopen.top/getJoke').then(value => {
            console.log(value);
        },
            reason => {

            }
        )
       // console.log(result);

 

 

                  async 与 await 测试(await方法拿到异步返回值)

   ps:  async与await实现上面的效果(async与await结合发送ajax请求--同步语法解决异步)

    

async function main(){

           //发送请求

        let  result  =     await sendAJAX("https://api.apiopen.top/getJoke")

        //再次测试

        //let xxx = await sendAJAX('xxx')

           console.log(result);

       }

       main();

  

           ps： 

           async的作用是声明一个函数为异步函数，当用了async声明后，这个函数就成了一个promise对象 ，如果这个函数有返回值，那么函数内部会把这个return 的值赋值给promise对象的PromiseValue。通过await就可以拿到这个异步返回值。当然通过then()也可以拿到。

await 是等待的意思，用于含有async的函数体内，可以让两个异步函数按照同步的顺序执行，也就是自上而下，依次执行。这样可以避免写过多的嵌套代码。