ECMAScript 6 新增了正式的 Promise（期约）引用类型，支持优雅地定义和组织异步逻辑。接下来几个版本增加了使用 async 和 await 关键字定义异步函数的机制JavaScript 是单线程事件循环模型。异步行为是为了优化因计算量大而时间长的操作，只要你不想为等待某个异步操作而阻塞线程执行，那么任何时候都可以使用

JS中同步任务会立即执行并放入调用栈中，而异步任务会被放入事件队列中，等待调用栈中的任务执行完毕后再被推入调用栈中执行。当异步任务被推入调用栈中执行时，它就变成了同步任务。这种机制被称为事件循环。同步行为对应内存中顺序执行的处理器指令。每条指令都会严格按照它们出现的顺序来执行，而每条指令执行后也能立即获得存储在系统本地（如寄存器或系统内存）的信息。这样的执行流程容易分析程序在执行到代码任意位置时的状态（比如变量的值）。例如

let x = 3; x = x + 4;

在程序执行的每一步，都可以推断出程序的状态。这是因为后面的指令总是在前面的指令完成后才会执行。等到最后一条指定执行完毕，存储在 x 的值就立即可以使用。

(资料图片仅供参考)

异步行为类似于系统中断，即当前进程外部的实体可以触发代码执行。异步代码不容易推断例如，在定时回调中执行一次简单的数学计算：

let x = 3; setTimeout(() => x = x + 4, 1000);

这段程序虽与上面同步代码执行的任务一样，都是把两个数加在一起，但这一次执行线程不知道 x 值何时会改变，因为这取决于回调何时从消息队列出列并执行。虽然这个例子对应的低级代码最终跟前面的例子没什么区别，但第二个指令块（加操作及赋值操作）是由系统计时器触发的，这会生成一个入队执行的中断。到底什么时候会触发这个中断，这对 JavaScript 运行时来说是一个黑盒

异步编程主要包含以下几类，异步编程传统的解决方案是回调函数，这种传统的方式容易导致“回调地狱”，即函数多层嵌套，让代码难以阅读，维护困难，空间复杂度大大增加

require("fs").readFile("./index.html", (err,data)=>{})

$.get("/server", (data)=>{})

setTimeout(()=>{}, 2000);

Promise属于ES6规范， 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。期约故意将异步行为封装起来，从而隔离外部的同步代码

const p=new Promise(()=>{})console.log(p);

Promise 构造函数: Promise (excutor)

let p = new Promise((resolve, reject) => {    // 同步调用    console.log(111);});console.log(222);

期约是一个有状态的对象，Promise实例对象中的属性PromiseState存储着该Promise实例的状态，可能处于如下 3 种状态之一：

let p = new Promise(() => {}); setTimeout(console.log, 0, p); // Promise 

之所以说是应付解释器，是因为如果不提供执行器函数，就会抛出 SyntaxError。无论 resolve()和 reject()中的哪个被调用，状态转换都不可撤销了。于是继续修改状态会静默失败，如下所示：

let p = new Promise((resolve, reject) => {  resolve(); reject(); // 没有效果});setTimeout(console.log, 0, p); // Promise 

期约主要有两大用途：

let p1 = new Promise((resolve, reject) => resolve()); setTimeout(console.log, 0, p1); // Promise  let p2 = new Promise((resolve, reject) => reject()); setTimeout(console.log, 0, p2); // Promise // Uncaught error (in promise)

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易

Promise.prototype.then([onResolved|null],[onRejected|null])是为期约实例添加处理程序的主要方法。参数：onResolved 处理程序和 onRejected 处理程序。这两个参数都是可选的，如果提供的话，则会在期约分别进入“兑现”和“拒绝”状态时执行。返回值：一个新的Promise对象

可以指定多个回调，当promise对象变为相应的状态的时候就都会执行

let p = new Promise((resolve, reject) => {    resolve("OK");});///指定回调 - 1p.then(value => {    console.log(value);});//指定回调 - 2p.then(value => {    alert(value);});

问：then()返回的Promise对象的状态是如何决定的呢？① 如果抛出异常, 新 promise 变为 rejected, reason 为抛出的异常

let p = new Promise((resolve, reject) => {    resolve("ok");});//执行 then 方法let result = p.then(value => {    console.log(value);    //1. 抛出错误    throw "出了问题";}, reason => {    console.warn(reason);});

② 如果返回的是非 promise 的任意值, 新 promise 变为 resolved, value 为返回的值

let p = new Promise((resolve, reject) => {    resolve("ok");});//执行 then 方法let result = p.then(value => {    console.log(value);//2. 返回结果是非 Promise 类型的对象    return 521;}, reason => {    console.warn(reason);});console.log(result);

③ 如果返回的是另一个新 promise, 此 promise 的结果就会成为新 promise 的结果

let p = new Promise((resolve, reject) => {    resolve("ok");});//执行 then 方法let result = p.then(value => {    console.log(value);    //3. 返回结果是 Promise 对象    return new Promise((resolve, reject) => {        // resolve("success");        reject("error");    });}, reason => {    console.warn(reason);});console.log(result);

不管调用的是onResolved还是onRejected函数，返回的新promise对象主要由返回值决定（抛出错误的情况除外）

问：promise 如何串连多个操作任务?(1) promise 的 then()返回一个新的 promise, 可以形成 then()的链式调用(2) 通过 then 的链式调用串连多个同步/异步任务

let p = new Promise((resolve, reject) => {    setTimeout(() => {        resolve("OK");    }, 1000);});const result=p.then(value => {    return new Promise((resolve, reject) => {        resolve("success");    });}).then(value => {    console.log(value);}).then(value => {    console.log(value);})console.log(result);

p.then(value => {return new Promise((resolve, reject) => {resolve("success");});}) // Promise (resolved): "success"

p.then(value => {return new Promise((resolve, reject) => {resolve("success");});}).then(value => {console.log(value);})// Promise (resolved): undefined 因为没有返回值也没有抛出错误，所以值是undefined, 因为undefined不是Promise对象，所以返回的Promise状态为resolved

p.then(value => {return new Promise((resolve, reject) => {resolve("success");});}).then(value => {console.log(value);}).then(value => {console.log(value);})// Promise (resolved): undefined

中断then()链方法：在then()的回调函数中返回一个 pendding 状态的 promise 对象。因为pendding状态的promise对象不会触发onResolved()或onRejected()函数

let p = new Promise((resolve, reject) => {    setTimeout(() => {        resolve("OK");    }, 1000);});p.then(value => {    console.log(111);    //有且只有一个方式    return new Promise(() => {});// }).then(value => {    console.log(222);}).then(value => {    console.log(333);}).catch(reason => {    console.warn(reason);});

穿透：当没有指定相应Promise状态的回调函数时，就可以跳过执行该then()练习：分析输出结果1.

let p = new Promise((resolve, reject) => {    setTimeout(() => {        // resolve("OK");        reject("Err");    }, 10);});p.then(null,reason => {    console.log(111);}).then(null,reason => {    console.log(222);}).then(null,reason => {    console.log(333);}).catch(reason => {    console.warn(reason);});

分析：p.then(null,reason => {console.log(111);})的返回值是Promise (resolved):undefined, 后面没有对应的onResolved的回调函数，就跳过了执行，所以控制台只输出了111

let p = new Promise((resolve, reject) => {    setTimeout(() => {        resolve("OK");        // reject("Err");    }, 10);});// console.log(p.then(value => {//     console.log(111);// },reason=>{//     throw "失败啦!";// })==p.then(value => {//     console.log(111);// },reason=>{//     throw "失败啦!";// }).then(value => {//     console.log(222);// })); // falseconsole.log(p.then(value => {    console.log(111);},reason=>{    throw "失败啦!";}).then(value => {    console.log(222);}).then(value => {    console.log(333);}));p.then(value => {    throw "失败啦!";}).then(value => {    console.log(222);}).then(value => {    console.log(333);}).catch(reason => {    console.warn(reason);});

p.then(value => {throw "失败啦!";})返回Promise (rejected): "失败啦！"，后面没有对应的onRejected()回调函数，就跳过了执行，所以就直接执行catch()来捕获错误信息

Promise.prototype.catch(onRejected)catch()基于then()做了一个单独的封装，只接收rejected状态的回调函数

给Promise对象设置回调函数的方法有Promise.prototype.then()和Promise.prototype.catch()，注意Promise.prototype.catch()只能指定错误的回调函数

静态方法，不是实例方法期约并非一开始就必须处于待定状态，然后通过执行器函数才能转换为落定状态。通过调用Promise.resolve()静态方法，可以实例化一个解决的期约。下面两个期约实例实际上是一样的：

let p1 = new Promise((resolve, reject) => resolve()); let p2 = Promise.resolve();

参数：成功的数据或 promise 对象说明: 返回一个成功/失败的 promise 对象

let p1 = Promise.resolve(521);console.log(p1);

let p = Promise.resolve(new Error("foo")); setTimeout(console.log, 0, p); // Promise : Error: foo

let p = Promise.resolve(7); setTimeout(console.log, 0, p === Promise.resolve(p)); // true setTimeout(console.log, 0, p === Promise.resolve(Promise.resolve(p))); // true // 这个幂等性会保留传入期约的状态：let p = new Promise(() => {}); setTimeout(console.log, 0, p); // Promise  setTimeout(console.log, 0, Promise.resolve(p)); // Promise  setTimeout(console.log, 0, p === Promise.resolve(p)); // true

let p2 = Promise.resolve(new Promise((resolve, reject) => {    resolve("OK");}));console.log(p2);p2.catch(reason => {    console.log(reason);})

let p2 = Promise.resolve(new Promise((resolve, reject) => {    reject("Error");}));console.log(p2);p2.catch(reason => {    console.log(reason);})

与 Promise.resolve()类似，Promise.reject()会实例化一个拒绝的期约并抛出一个异步错误（这个错误不能通过 try/catch 捕获，而只能通过拒绝处理程序捕获）。下面的两个期约实例实际上是一样的：

let p1 = new Promise((resolve, reject) => reject()); let p2 = Promise.reject();

参数：失败的理由或 promise 对象说明: 返回一个失败的 promise 对象

let p1 = Promise.reject(521);console.log(p1);

let p2 = Promise.reject(new Promise((resolve, reject) => {    resolve("OK");}));console.log(p2);

参数： 包含 n 个 promise 的数组说明: 返回一个新的 promise, 只有所有的 promise 都成功该promise才成功,成功结果为所有promise成功结果组成的数组。只要有一个promise失败了该promise就失败，失败理由为第一个失败的promise的失败理由

let p1 = new Promise((resolve, reject) => {    resolve("OK");})let p2 = Promise.resolve("Success");let p3 = Promise.resolve("Oh Yeah");const result = Promise.all([p1, p2, p3]);console.log(result);

let p1 = new Promise((resolve, reject) => {    resolve("OK");})let p2 = Promise.reject("Error1");let p3 = Promise.reject("Error2")const result = Promise.all([p1, p2, p3]);console.log(result);

通过这种方式，可以检测页面中某个请求是否超时，并输出相关的提示信息。参数： 包含 n 个 promise 的数组说明: 返回一个新的 promise, 该promise等于第一个完成的 promise（即第一个确定状态的promise）

let p1 = new Promise((resolve, reject) => {    setTimeout(() => {        resolve("OK");    }, 1000);})let p2 = Promise.resolve("Success");let p3 = Promise.resolve("Oh Yeah");//调用const result = Promise.race([p1, p2, p3]);console.log(result);

let p = new Promise((resolve, reject) => {    //1. resolve 函数    // resolve("ok"); // pending   => fulfilled (resolved)    //2. reject 函数    // reject("error");// pending  =>  rejected     //3. 抛出错误    // throw "出问题了";// pending  =>  rejected });console.log(p);

2. 调用实例方法Promise.resolve()或Promise.reject()

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例

const promise = new Promise(function(resolve, reject) {  // ... some code  if (/* 异步操作成功 */){    resolve(value);  } else {    reject(error);  }});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {  // success}, function(error) {  // failure});

下面是一个抽奖示例

    点击抽奖    <script>        const btn=document.getElementById("btn")        btn.onclick=function(){            // 每次点击按钮创建一个Promise实例对象            const p =new Promise((resolve,reject)=>{                setTimeout(()=>{                    let n =parseInt(Math.random()*101)//取值[1,100]的整数                    if(n<30){                        resolve(n)                    }else{                        reject(n)                    }                },10)            })            p.then((value)=>{                alert("恭喜中奖！中奖数字为"+value);            },(reason)=>{                alert("再接再厉! 中奖数字为"+reason);            })        }    </script>

                    
    <script>        function loadImageAsync(url) {            var promise = new Promise(function (resolve, reject) {                const image = new Image();                image.onload = function () {                    resolve(image);                };                image.onerror = function () {                    reject(new Error("Could not load image at " + url));                };                image.src = url;            });            return promise;        }        loadImageAsync("http://iwenwiki.com/api/vue-data/vue-data-1.png")        .then(function(data){            console.log(data);            $("div").append(data)        },function(error){            $("div").html(error)        })    </script>

实时效果反馈

1. Promise的作用是什么，下列描述正确的是：

APromise是异步编程的一种解决方案，可以将异步操作以同步操作的流程表达出来

BPromise是同步编程的一种解决方案，可以将同步操作以异步操作的流程表达出来

CPromise使得控制同步操作更加容易

DPromise还不是ES6的标准，目前是社区版本

答案

1=>A

Promise封装Ajax，让网络请求的异步操作变得更简单

                    <script>        const getJSON = function (url) {            const promise = new Promise(function (resolve, reject) {                const handler = function () {                    if (this.readyState !== 4) {                        return;                    }                    if (this.status === 200) {                        resolve(this.response);                    } else {                        reject(new Error(this.statusText));                    }                };                const client = new XMLHttpRequest();                client.open("GET", url);                client.onreadystatechange = handler;                client.responseType = "json";                client.setRequestHeader("Accept", "application/json");                client.send();            });            return promise;        };        getJSON("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php").then(function (json) {            console.log(json);        }, function (error) {            console.error("出错了", error);        });    </script>

传入一个遵循常见的错误优先的回调风格的函数（即以(err, value）=>{...}回调作为最后一个参数），并返回一个返回值为promise对象的函数版本“错误优先”是指回调函数中，错误参数为回调函数的第一个参数。node.js环境中fs模块中的异步api大多是这种风格的参数：函数返回值：函数，返回的该函数的返回值是promise对象将函数promise化的好处：函数promise化之后，函数的返回值就变成了promise对象，这样就可以调用promise的实例方法then()或catch(), 利用它们的链式写法，就能避免回调函数多层嵌套

示例：调用util.promisefy()函数，将fs.readFile()函数promise化

//引入 util 模块const util = require("util");//引入 fs 模块const fs = require("fs");//promise化fs.readFile()函数let mineReadFile = util.promisify(fs.readFile);// promise化之后就可以调用promise实例的then()或catch()方法mineReadFile("./resource/content.txt").then(value=>{    console.log(value.toString());});

在实际应用中，一个函数满足这几个条件，就可以被 promisify 化:

// promisefy()返回一个函数，返回的该函数的返回值是Promise对象// fn指要promise化的函数const promisefy = (fn) => {  // ‘...args’表示剩余参数  return function(...args){    return new Promise((resolve,reject)=>{      fn(...args,(err,data)=>{        if(err) reject(err);        resolve(data)      })    })  }}

实例（第14届蓝桥杯省赛第三期模拟题）题目

下面就请你以 Node.js 中常用的读取文件操作为例，封装一个 Promisefy 函数，将回调形式调用的读取文件方法转换成一个 Promise 的版本。目录结构如下：

请在 index.js 文件中的补全代码，完成 promisefy 函数的封装。将 fs 中的 readFile 方法 promise 化。也就是说 readFileSync 方法执行后，会返回一个 promise，可以调用 then 方法执行成功的回调或失败的回调。在控制台运行：node index, 此时应打印出 true，即：回调形式的 fs.readFile 方法读取同个文件的结果与 Promise 形式读取结果一致。

参考答案

const fs = require("fs")const path = require("path")const textPath = path.join(__dirname, "/test.md")// 读取示例文件fs.readFile(textPath, "utf8", (err, contrast) => {  // 通过promisefy转化为链式调用  const readFileSync = promisefy(fs.readFile)  readFileSync(textPath, "utf8")    .then((res) => {      console.log(res === contrast) // 此处结果预期：true，即promise返回内容与前面读取内容一致    })    .catch((err) => {})})const promisefy = (fn) => {  // TODO 此处完成该函数的封装  // ‘...args’表示剩余参数  return function(...args){    return new Promise((resolve,reject)=>{      fn(...args,(err,data)=>{        if(err) reject(err);        resolve(data)      })    })  }}module.exports = promisefy // 请勿删除该行代码

// 在异步任务中不能抛出错误，即使是内置的Promise也捕获不到class Promise{    constructor(executor){        // 设置默认的PromiseState和PromiseResult        // 因为Promise()构造函数是以实例的方式调用（new运算符），所以this指向实例        this.PromiseState="pendding"        this.PromiseResult=null        // 将callback对象定义到实例内部，用来存储后面通过then()或catch()指定的onResolved()和onRejected()函数，这是考虑到executor中通过异步任务改变promise实例状态和多个then()指定了多个onResolved()或onRejected()回调的情况        this.callbacks=[];        // 而resolve()和reject()是以函数形式调用的，this为window对象，所以这里用self存储指向实例的this        const self=this;        function resolve(data){            // 该判断为了避免状态重复改变            if(self.PromiseState!=="pendding") return;            self.PromiseState="fulfilled"//或"resolved"            self.PromiseResult=data            // 注意要在Promise实例状态改变并且数据赋值之后调用onResolved            // 注意在调用前要判断有没有定义onResolved()函数，所以就看callbacks数组第一个元素有没有onResolved属性            // if(self.callbacks[0].onResolved){                // 通过setTimeout将then中的回调设置成异步, 因为内置的Promise的实例方法then()中的回调是异步的                setTimeout(()=>{                    self.callbacks.forEach(item => {                        item.onResolved(data)                    })                });            // }        };        function reject(data){            // 该判断为了避免状态重复改变            if(self.PromiseState!=="pendding") return;            self.PromiseState="rejected"            self.PromiseResult=data            // 注意要在Promise实例状态改变并且数据赋值之后调用onRejected            // 注意在调用前要判断有没有定义onRejected()函数，所以就看callbacks数组第一个元素有没有onRejected属性            // if(self.callbacks[0].onRejected){                // 通过setTimeout将then中的回调设置成异步, 因为内置的Promise的实例方法then()中的回调是异步的                setTimeout(()=>{                    self.callbacks.forEach(item => {                        item.onRejected(data)                    })                })                            // }        };        try{            // executor在传入时就能确定是个函数，所以这里不需要再定义executor, 只是调用即可            executor(resolve,reject)        }catch(e){            reject(e)        }    }    //添加 then 方法    then(onResolved, onRejected){        self=this        // 考虑异常穿透情况        if(typeof onRejected!=="function"){            onRejected=reason=>{                throw reason;            }        }        if(typeof onResolved!=="function"){            onResolved=value=>value // (value)=>{return value}的简写形式        }        //                 return new Promise((resolve,reject)=>{            // 这个callback()函数得放到返回的Promise实例里，否则会报错，说resolve和reject未定义            function callback(type){                try{                    // 因为callback()是以函数形式调用的，此时this指向window对象，所以此处参数不能为this.PromiseResult                    let result=type(self.PromiseResult)                    if(result instanceof Promise){                        result.then(v=>{                            resolve(v)                        },e=>{                            reject(e)                        })                    }else{// 抛出错误时result是undefined还是null？ 不进入该分支应该                        resolve(result)                    }                }catch(e){//考虑抛出错误的情况                    reject(e)                }            }            // 考虑executor中同步任务改变promise实例状态                        if(this.PromiseState==="fulfilled"){                // 通过setTimeout将then中的回调设置成异步, 因为内置的Promise的实例方法then()中的回调是异步的                setTimeout(()=>{                    callback(onResolved)                })            }                        if(this.PromiseState==="rejected"){                // 通过setTimeout将then中的回调设置成异步, 因为内置的Promise的实例方法then()中的回调是异步的                setTimeout(()=>{                    callback(onRejected)                })            }            //             // 考虑executor中异步任务改变promise实例状态            if(this.PromiseState==="pendding"){                this.callbacks.push({                    onResolved:function(){                        callback(onResolved)                    },                    onRejected:function(){                        callback(onRejected)                    }                })            }        })    }    // 定义Promise.prototype.catch()    catch(onRejected){        return this.then(undefined,onRejected)    }    // 定义Promise.resolve()静态方法，注意静态方法要加关键词static    static resolve(value){        return new Promise((resolve,reject)=>{            if(value instanceof Promise){                value.then(                    v=>resolve(v),                    e=>reject(e))            }else{                resolve(value)            }        })    }    // 定义Promise.reject()静态方法    static reject(reason){        return new Promise((resolve,reject)=>{            reject(reason)        })    }    // 定义Promise.all()静态方法    static all(promises){        let arr=[]        let count=0;        return new Promise((resolve,reject)=>{            for(let i in promises){                promises[i].then(v=>{                    arr[i]=v;                    count++;                    if(count===promises.length){                        resolve(arr)                    }                },r=>{                    reject(r)                })            }            // 为什么这个判断不能放在这            // if(count===promises.length){            //     resolve(arr)            // }        })    }    // 定义Promise.race()静态方法    static race(promises){        return new Promise((resolve,reject)=>{            for(let i in promises){                promises[i].then(                    v=>resolve(v),                    r=>reject(r))            }        })    }}

async 英文单词的意思是异步，虽然它是 ES8 中新增加的一个关键字，但它的本质是一种语法糖写法（语法糖是一种简化后的代码写法，它能方便程序员的代码开发），async 通常写在一个函数的前面，表示这是一个异步请求的函数，将返回一个 Promise 对象，并可以通过 then 方法取到函数中的返回值使用 async 关键字可以让函数具有异步特征，但总体上其代码仍然是同步求值的。而在参数或闭包方面，异步函数仍然具有普通 JavaScript 函数的正常行为。异步函数的返回值会被 Promise.resolve()包装成一个期约对象。异步函数始终返回期约对象。ES2017 标准引入了 async 函数，使得异步操作变得更加方便async函数可以将异步操作变为同步操作

async function main(){    // return 521; // Promise:521    return new Promise((resolve, reject) => {        // resolve("OK"); // Promise:"OK"        reject("Error"); // Promise:"Error"    });    //3. 抛出异常    // throw "Oh NO"; // Promise:"Oh NO"}let result = main();console.log(result);

function print(){    setTimeout(() =>{        console.log("定时器");    },1000)    console.log("Hello");}print()

function timeout(ms) {  return new Promise((resolve) => {    setTimeout(resolve, ms);  });}async function asyncPrint(value, ms) {  await timeout(ms);  console.log(value);}asyncPrint("hello world", 50);

function ajax(url){    return new Promise(function(resolve,reject){        $.getJSON(url,function(result){            resolve(result)        },function(error){            reject(error)         })    })}async function getInfo(){    let ids = await ajax("http://iwenwiki.com/api/generator/list.php")    let names = await ajax("http://iwenwiki.com/api/generator/id.php?id="+ids[0])    let infos = await ajax("http://iwenwiki.com/api/generator/name.php?name=" + names.name)    console.log(infos);}getInfo();

实时效果反馈

1. Async是什么：

AAsync是完成网络请求，如Ajax一样

BAsync的作用是完成异步网络请求，如Ajax一样

CAsync使得异步操作变得更加方便

DAsync是新的网络请求解决方案

答案

1=>C

await 可以理解为 async wait 的简写，表示等待异步执行完成。await 后可以返回任意的表达式，如果是正常内容，则直接执行，如果是异步请求，必须等待请求完成后，才会执行下面的代码

注意

// 函数 p 返回的是一个 Promise 对象，在对象中，延时 2 秒，执行成功回调函数，相当于模拟一次异步请求function p(v) {  return new Promise(function (resolve) {    setTimeout(function () {      // 在 p 函数执行时，将函数的实参值 v ，作为执行成功回调函数的返回值。      resolve(v);    }, 2000);  });}// 一个用于正常输出内容的函数function log() {  console.log("2.正在操作");}async function fn() {  console.log("1.开始");  await log();  let p1 = await p("3.异步请求");  console.log(p1);  console.log("4.结束");}fn();

根据页面效果，源代码解析如下：

async function main(){    let p = new Promise((resolve, reject) => {        // resolve("OK");        reject("Error");    })    //1. 右侧为promise的情况    // let res = await p;    //2. 右侧为其他类型的数据, 但这种情况不常见    // let res2 = await 20;    //3. 如果promise是失败的状态，需要捕获错误来查看错误理由    try{        let res3 = await p;        console.log(res3);    }catch(e){        console.log(e);    }}main();

1.txt

观书有感       -朱熹半亩方塘一鉴开天光云影共徘徊。

2.txt

问渠那得清如许？为有源头活水来。

3.txt

---------中华古诗词

const fs = require("fs")const util= require("util")// 将fs.readFile promise化，即将异步函数转换成同步的形式（只是转换形式，实质还是异步）const myReadFile=util.promisify(fs.readFile)// 传统的读多个文件，并将文件内容串联起来输出。缺点是会有多个回调嵌套// fs.readFile("./resource/1.txt",(err,data1)=>{//     if(err) throw err;//     fs.readFile("./resource/2.txt",(err,data2)=>{//         if(err) throw err;//         fs.readFile("./resource/2.txt",(err,data3)=>{//             if(err) throw err;//             console.log(data1+data2+data3);//         })//     })// })// 结合使用async和await, 将异步任务以同步的形式调用，减少嵌套，结构更清晰async function main(){    try{        const data1=await myReadFile("./resource/1.txt")        const data2=await myReadFile("./resource/2.txt")        const data3=await myReadFile("./resource/3.txt")        console.log(data1+data2+data3);    }catch(e){        console.log(e);    }}main()

//axios是基于Promise封装的AJAX请求库function sendAJAX(url){    return new Promise((resolve, reject) => {        const xhr = new XMLHttpRequest();        xhr.responseType = "json";        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);                }            }        }    });}//段子接口地址 https://api.apiopen.top/getJokelet btn = document.querySelector("#btn");btn.addEventListener("click",async function(){    //获取段子信息    let duanzi = await sendAJAX("https://api.apiopen.top/getJoke");    console.log(duanzi);});

关键词：