龙空技术网

JavaScript,ES8,async和await,两种语法结合让异步像同步一样

古怪今人 70

前言:

眼前兄弟们对“ajax await”可能比较讲究,大家都需要了解一些“ajax await”的相关文章。那么小编在网摘上搜集了一些对于“ajax await””的相关资讯,希望你们能喜欢,姐妹们一起来了解一下吧!

async和await

async和await两种语法结合可以让异步代码像同步代码一样。

async函数

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

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

await表达式

1、await必须写在 async 函数中。

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

3、await返回的是promise成功的值。

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

代码案例

<!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>
<!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>
//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();
<!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(";).then(value=>{        //     console.log(value);        // }, reason=>{})          // async 与 await 测试  axios        async function main(){            //发送 AJAX 请求            let result = await sendAJAX(";);            //再次测试            let tianqi = await sendAJAX(';)            console.log(tianqi);        }        main();    </script></body></html>

标签: #ajax await