async和await、promise

promise

https://blog.csdn.net/qq_45952585/article/details/122218645?spm=1001.2014.3001.5501

async和await

任意一个名称都是有意义的，先从字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于声明一个 function 是异步的，async声明的函数返回值是一个promise对象，而 内部await 用于等待一个异步方法执行完成。他还解决了promise中.then的链式调用。
一般用法(await后面接收的是一个new Promise对象或者是其他异步回调函数)

<script>
     function getData() {
         return new Promise((resolve)=> {
             var xhr = new XMLHttpRequest();  //这里没有考虑IE浏览器，如果需要择if判断加
             xhr.open('GET', "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312", true);
             xhr.send(JSON.stringify(null));//这里要是没有参数传，就写null
             xhr.onreadystatechange = function () {
                 if (xhr.status === 200 && xhr.readyState === 4) {
                     //js处理数据
                     resolve (xhr.responseURL)
                 }
             }
         })
     }
     function yyds(val) {
         return new Promise((resolve)=> {
             setTimeout(()=> {
                 resolve(val + '我是拼接的内容')
             }, 100)
         })
     }
     async function test() {
         let resData = await getData()
         /*
             await接收的如果是一个new Promise对象的话，他会阻塞后面的代码运行，
             当resolve拿到了结果并且赋值给左边的变量后
             也就是 当resData有值了以后才能进行下面的代码执行，
             并且解决了调用多个Promise函数时.then的回调地域
         */
         let add = await yyds(resData)
         console.log(add); // https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312我是拼接的内容
         // return add
     }
     test()
 </script>

当await接收的是一个同步函数时

    <script>
        function yyds() {
            return 666
        }
        async function test() {
            let del = await yyds()
            console.log(del);
        }
        test()
    </script>

async返回的是一个promise对象

<script>
	function getData() {
	    return new Promise((resolve)=> {
	        var xhr = new XMLHttpRequest();  //这里没有考虑IE浏览器，如果需要择if判断加
	        xhr.open('GET', "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312", true);
	        xhr.send(JSON.stringify(null));//这里要是没有参数传，就写null
	        xhr.onreadystatechange = function () {
	            if (xhr.status === 200 && xhr.readyState === 4) {
	                //js处理数据
	                resolve (xhr.responseURL)
	            }
	        }
	    })
	}
	function yyds(val) {
	    return new Promise((resolve)=> {
	        setTimeout(()=> {
	            resolve(val + '我是拼接的内容')
	        }, 100)
	    })
	}
	async function test() {
	    let resData = await getData()
	    /*
	        await接收的如果是一个new Promise对象的话，他会阻塞后面的代码运行，
	        当resolve拿到了结果并且赋值给左边的变量后
	        也就是 当resData有值了以后才能进行下面的代码执行，
	        并且解决了调用多个Promise函数时.then的回调地域
	    */
	    let add = await yyds(resData)
	    // console.log(add);
	    return add
	}
	// async中使用return，有一个promise返回值，
	test().then(res=> {
	    console.log(res);  // https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312我是拼接的内容
	})
</script>