ES8：async 和 await

拼搏现实的明天。 2022-12-30 12:58 130阅读 0赞

### 文章目录 ###

*   *   *  一、async 函数
         *  二、await 表达式
         *  三、async 和 await 结合读取文件内容
         *  四、async 与 await 封装AJAX请求

### 一、async 函数 ###

**1. return的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象**

//async 函数
    async function fn(){ 
        // 返回一个字符串
        return 'aaa';
    }
    
    const result = fn();
    console.log(result);
    
    //调用 then 方法
    result.then(value => { 
        console.log(value);
    }, reason => { 
        console.warn(reason);
    })

![在这里插入图片描述][20201225152611253.png]

//async 函数
    async function fn(){ 
        return;
    }
    
    const result = fn();
    console.log(result);
    
    //调用 then 方法
    result.then(value => { 
        console.log(value);
    }, reason => { 
        console.warn(reason);
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]  
**2.抛出错误, 返回的结果是一个失败的 Promise**

//async 函数
    async function fn(){ 
        throw new Error('出错啦!');
    }
    
    const result = fn();
    console.log(result);
    
    //调用 then 方法
    result.then(value => { 
        console.log(value);
    }, reason => { 
        console.warn(reason);
    })

![在这里插入图片描述][20201225152938543.png]  
**3. 返回的结果如果是一个 Promise 对象**

//async 函数
    async function fn(){ 
        //返回的结果如果是一个 Promise 对象
        return new Promise((resolve, reject)=>{ 
            resolve('成功的数据');
            // reject("失败的错误");
        });
    }
    
    const result = fn();
    console.log(result);
    
    //调用 then 方法
    result.then(value => { 
        console.log(value);
    }, reason => { 
        console.warn(reason);
    })

![在这里插入图片描述][20201225153139920.png]

//async 函数
    async function fn(){ 
        //返回的结果如果是一个 Promise 对象
        return new Promise((resolve, reject)=>{ 
            // resolve('成功的数据');
            reject("失败的错误");
        });
    }
    
    const result = fn();
    console.log(result);
    
    //调用 then 方法
    result.then(value => { 
        console.log(value);
    }, reason => { 
        console.warn(reason);
    })

![在这里插入图片描述][2020122515322887.png]

### 二、await 表达式 ###

**1. 成功**

//创建 promise 对象
    const p = new Promise((resolve, reject) => { 
        resolve("用户数据");          
    })
    
    // await 要放在 async 函数中.
    async function main() { 
        let result = await p;
        console.log(result);
    }
    //调用函数
    main();

![在这里插入图片描述][20201225153352229.png]

**2. 失败**

//创建 promise 对象
    const p = new Promise((resolve, reject) => { 
        reject("失败啦!");
    })
    
    // await 要放在 async 函数中.
    async function main() { 
        try { 
            let result = await p;
            console.log(result);
        } catch (e) { 
            console.log(e);
        }
    }
    //调用函数
    main();

![在这里插入图片描述][20201225153453940.png]

### 三、async 和 await 结合读取文件内容 ###

![在这里插入图片描述][20201225153950350.png]

//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();

![在这里插入图片描述][20201225154057109.png]

### 四、async 与 await 封装AJAX请求 ###

这里用的是视频里的接口。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]

[20201225152611253.png]: /images/20221120/01300d0517704245b71b14860c1b3b10.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201225152831758.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70
[20201225152938543.png]: https://img-blog.csdnimg.cn/20201225152938543.png
[20201225153139920.png]: https://img-blog.csdnimg.cn/20201225153139920.png
[2020122515322887.png]: https://img-blog.csdnimg.cn/2020122515322887.png
[20201225153352229.png]: https://img-blog.csdnimg.cn/20201225153352229.png
[20201225153453940.png]: https://img-blog.csdnimg.cn/20201225153453940.png
[20201225153950350.png]: https://img-blog.csdnimg.cn/20201225153950350.png
[20201225154057109.png]: https://img-blog.csdnimg.cn/20201225154057109.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201225154748153.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky,size_16,color_FFFFFF,t_70