Promise学习-2

async与await

1 async 函数

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

// 与then逻辑一样
async function main(){
	// 1.如果返回值是一个非Promise类型的数据
	// 结果是一个成功Promise对象并且PromiseResult为该值
	// return 521;

	// 2.如果返回值是一个非Promise类型的数据
	// 结果是根据Promise对象的状态,PromiseResult为回调函数的值
	// return new Promise((resolve,reject) =>{
	//     //resolve("OK");
	//     // reject("Error")
	// });

	// 3.抛出异常
	// 结果是一个失败的Promise对象并且PromiseResult为抛出的字符串或Error
	throw "Oh no";
}

let result = main();

console.log(result);

2 await表达式

await右侧的表达式一般为promise对象,但也可以是其他的值.
如果表达式是promise对象,await返回的是promise成功的值.
如果表达式是其他值,直接将此值作为await的返回值

// 可以使用箭头函数的形式
// const main = async()=>{

// }

async function main(){
	let p = new Promise((resolve,reject) =>{
		// resolve("OK");
		reject("Error");
	});

	// 1.右侧为promise的情况
	// let res = await p; 
	// console.log(res); //OK

	// 2.右侧为其他类型的数据  很少见
	// let res2 = await 20;
	// console.log(res2); //20

	// 3.如果promise为失败的状态
	try{
		let res3 = await p;
	}catch(e){
		console.log(e); //Error
	}
}

main();

3 注意

await必须写在async函数中,但async函数中可以没有await.
如果await的promise失败了,就会抛出异常,需要通过try...catch捕获处理.

实战使用:

/*
resource content.txt的文件内容
 */


const fs = require("fs");
const util = require("util");
// util的promisify函数可以将一个函数封装为返回promise对象的函数,并将封装好的返回
const mineReadFile = util.promisify(fs.readFile);

//回调函数的方式 读取三个html文件
// fs.readFile("./resource/1.html", (err,data1)=>{
//     if(err){
//         throw err;
//     }
//     fs.readFile("./resource/1.html", (err,data2)=>{
//         if(err){
//             throw err;
//         }
//         fs.readFile("./resource/1.html", (err,data3)=>{
//             if(err){
//                 throw err;
//             }
//             console.log(data1+data2+data3);
//         });
//     });
// });


//async 与 await
//使用过程中看不到回调函数,非常简洁,仿佛在写同步代码一样,然而内部执行是异步的
async function main(){
    try{
        //读取文件的内容
        let data1 = await mineReadFile("./resource/content.txt");
        let data2 = await mineReadFile("./resource/content.txt");
        let data3 = await mineReadFile("./resource/content.txt");
        console.log(data1 + data2 +data3);
    }catch(e){
        console.log(e.code);
    }
}

main();

4 async和await结合发送ajax请求

首先我们需要用express搭建一个本地服务器,编辑其get请求并开放一个端口,AJAX学习篇中介绍过,server.js代码如下:

const express = require("express");

const app = express();

app.get("/ajax",(request,response)=>{
    response.setHeader("Access-Control-Allow-Origin","*");
    response.setHeader("Access-Control-Allow-Headers","*");
    response.setHeader("Access-Control-Allow-Methods","*");
    response.send("奶奶问上幼儿园的小孙女 \n奶奶：宝宝你是哪个国家的人呀？\n孙女：中国人呀! \n奶奶：你是哪个省的呀？ \n孙女：妈妈生的呀！\n我直接喷饭了。。。");
});

app.listen(8000,()=>{
    console.log("服务已经启动,8000 端口监听中...");
})

然后在server.js的上一级目录打开终端,输入nodemon server.js启用服务,此时端口就可以正常工作了,并且可以自动根据server.js的内容修改而重新开启端口.

然后我们写async和await结合发送AJAX请求的代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async和await结合发送ajax请求</title>
</head>
<body>
    <div class="container">
        <h2 class="page-header">async和await结合 AJAX 操作</h2>
        <button class="btn btn-primary" id="btn">点击发送 AJAX</button>
    </div>
    <script>
        // axios 可以自己封装,是一个基于promise操作方式的一个ajax封装的包
        function sendAJAX(url){
            return new Promise((resolve,reject) =>{
                const xhr = new XMLHttpRequest();
                xhr.open("GET",url);
                xhr.send();
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if(xhr.status >=200 && xhr.status < 300){
                            resolve(xhr.response);
                        }else{
                            reject(xhr.status);
                        }
                    }
                }
            });
        }

        // 接口地址:http://127.0.0.1:8000/ajax
        // 获取元素
        let btn = document.getElementById("btn");
        btn.addEventListener("click",async function(){
            try{
               //获取信息
                let joke = await sendAJAX("http://127.0.0.1:8000/ajax"); 
                console.log(joke);
            }catch(e){
                console.log(e);
            }

        })
    </script>
</body>
</html>

可以看出只要有封装好返回promise的函数,使用async和await结合来实现AJAX请求的操作特别简单,而axios可以做到自己封装函数,是一个基于promise操作方式的一个ajax封装的包,那么我们下一步就应该学习axios了.

posted @ 2021-09-29 18:02 bleaka 阅读(51) 评论(0) 收藏举报

刷新页面返回顶部

bleaka