ES8-async和await-学习笔记

最新推荐文章于 2022-10-31 14:56:33 发布

雨浅听风吟

最新推荐文章于 2022-10-31 14:56:33 发布

阅读量510

点赞数

分类专栏：前端文章标签： javascript 前端 react.js

本文链接：https://blog.csdn.net/weixin_39289876/article/details/122604744

版权

前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

文章目录

1概念
2async函数
async和await结合读取文件
async和await封装ajax请求

1概念

async 和 await
async 和 await 两种语法结合可以让异步代码像同步代码一样
async 函数
2.1. async 函数的返回值为 promise 对象，
2.2. promise 对象的结果由 async 函数执行的返回值决定
await 表达式
3.1await 必须写在 async 函数中
3.2await 右侧的表达式一般为 promise 对象
3.3await 返回的是 promise 成功的值
3.4. await 的 promise 失败了, 就会抛出异常, 需要通过 try…catch 捕获处理

2async函数

返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
在这里插入图片描述

抛出错误, 返回的结果是一个失败的 Promise

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>async函数</title>
</head>
<body>
    <script>
        //async 函数
        async function fn(){
            // 返回一个字符串
            // return '尚硅谷';
            // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象
            // return;
            //抛出错误, 返回的结果是一个失败的 Promise
            // throw new Error('出错啦!');
            //返回的结果如果是一个 Promise 对象
            return new Promise((resolve, reject)=>{
                resolve('成功的数据');
                // reject("失败的错误");
            });
        }

        const result = fn();

        //调用 then 方法
        result.then(value => {
            console.log(value);
        }, reason => {
            console.warn(reason);
        })
    </script>
</body>
</html>

和promise效果相同，返回reject出来就是reason回调
在这里插入图片描述 # await

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>await</title>
</head>

<body>
    <script>
        //创建 promise 对象
        const p = new Promise((resolve, reject) => {
            // resolve("用户数据");
            reject("失败啦!");
        })

        // await 要放在 async 函数中.
        async function main() {
            try {
                let result = await p;
                //
                console.log(result);
            } catch (e) {
                console.log(e);
            }
        }
        //调用函数
        main();
    </script>
</body>

</html>

async和await结合读取文件

//1. 引入 fs 模块
const fs = require("fs");

//读取『为学』
function readWeiXue() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/为学.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readChaYangShi() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

function readGuanShu() {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            //如果失败
            if (err) reject(err);
            //如果成功
            resolve(data);
        })
    })
}

//声明一个 async 函数
async function main(){
    //获取为学内容
    let weixue = await readWeiXue();
    //获取插秧诗内容
    let chayang = await readChaYangShi();
    // 获取观书有感
    let guanshu = await readGuanShu();

    console.log(weixue.toString());
    console.log(chayang.toString());
    console.log(guanshu.toString());
}

main();

在这里插入图片描述

async和await封装ajax请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发送 AJAX 请求</title>
</head>

<body>
    <script>
        // 发送 AJAX 请求, 返回的结果是 Promise 对象
        function sendAJAX(url) {
            return new Promise((resolve, reject) => {
                //1. 创建对象
                const x = new XMLHttpRequest();

                //2. 初始化
                x.open('GET', url);

                //3. 发送
                x.send();

                //4. 事件绑定
                x.onreadystatechange = function () {
                    if (x.readyState === 4) {
                        if (x.status >= 200 && x.status < 300) {
                            //成功啦
                            resolve(x.response);
                        }else{
                            //如果失败
                            reject(x.status);
                        }
                    }
                }
            })
        }
    
        //promise then 方法测试
        // sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
        //     console.log(value);
        // }, reason=>{})
  
        // async 与 await 测试  axios
        async function main(){
            //发送 AJAX 请求
            let result = await sendAJAX("https://api.apiopen.top/getJoke");
            //再次测试
            let tianqi = await sendAJAX('https://www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P')

            console.log(tianqi);
        }

        main();
        
    </script>
</body>

</html>

雨浅听风吟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES8-async和await-学习笔记

文章目录1概念2async函数async和await结合读取文件async和await封装ajax请求1概念async 和 awaitasync 和 await 两种语法结合可以让异步代码像同步代码一样async 函数2.1. async 函数的返回值为 promise 对象，2.2. promise 对象的结果由 async 函数执行的返回值决定await 表达式3.1await 必须写在 async 函数中3.2await 右侧的表达式一般为 promise 对象3.3await
复制链接

扫一扫