ES6-Promise简介、ES7 新特性及ES8新特性-async和await

ES6-Promise

Promise简介

Promise 是ES6引入异步编程的新解决方案。语法上Promise是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果
通过new关键字可以实例化出一个Promise对象用法：

• new Promise(excutor){}
  参数：
  excutor是一个这样的函数function(resolve, reject){}
  • resolve: resolve方法可以改变Promise实例对象的状态为 成功
  • reject:reject:方法可以改变promise实例对象的状态为 失败

// 实例化Promise对象
const p = new Promise(function(resolve, reject){
    // 封装异步操作
})

Promise.prototype.then方法

用法： p.then(function(value){}, function(){}}

• promise对象then方法有两个函数为形参
• 当 promise对象状态为 成功时调用第一个函数，第一个函数也有一个形参value
• value的值就是异步调用中由resolve方法返回的数据
• 当 promise对象状态为 失败时调用第二个函数，第二个函数也有一个形参reason
• reason的值是异步调用中由reject方法返回的错误

成功的异步读取:

// 调用promise对象的then方法
p.then(function(value){
    console.log(value); // 用户数据
},function(reason){

})

失败的异步读取:

// 实例化Promise对象
const p = new Promise(function(resolve, reject){
    // 封装异步操作
    setTimeout(function(){
        let err = "读取失败";
        reject(err)
    })
})
// 调用promise对象的then方法
p.then(function(value){
    
},function(reason){
    console.error(reason); //读取失败
})

then方法返回结果
then方法返回结果也是一个Promise对象，对象的状态由回调函数的执行结果决定

• 如果回调函数中返回的结果是非Promise类型的属性，状态为成功，返回值为对象的成功的值

// 实例化Promise对象
const p = new Promise(function (resolve, reject) {
    // 封装异步操作
    setTimeout(function () {
       	let data = "用户数据"
        resolve(data)
    })
})
// 调用promise对象的then方法
const result = p.then(function (value) {
    console.log(value);
    // 1.返回非Promise类型的属性，返回成功的Promise类型对象
    // return "iloveyou"
    // 2.返回Promise对象
     return new Promise((resolve, reject)=>{
        // 2.1 成功 返回成功的Promise类型对象
        resolve("成功！")
    //     // 2.2 失败 返回失败的Promise类型对象
    //     reject("失败！")
     })
    // 3.抛出错误 返回失败的Promise类型对象
    // throw new Error("出错啦")
}, function (reason) {

})

console.log(result);

Promise.prototype.catch方法

catch方法可以获取 Promise类型对象的状态为失败的值

• 该方法等同于then方法的参数不写第一个回调函数的内容
  用法：
  p.catch(function(reason){})

// 实例化Promise对象
const p = new Promise(function (resolve, reject) {
    // 封装异步操作
    setTimeout(function () {
        // 设置p对象的状态为失败，并设置失败的值
        let err = "读取失败";
        reject(err)
    })
})

p.catch(function(reason){
    console.warn(reason);
})

ES7 新特性

Array.prototype.includes

includes方法用来检测数组中是否包含某个元素，返回布尔类型值

const arr = ["江流","心猿","木龙","刀圭","意马"];
console.log(arr.includes("心猿"));// true
console.log(arr.includes("蜘蛛精"));// false

指数操作符

在ES7中引入了指数运算符**,用来实现幂运算，功能与Math.pow()结果相同

console.log(5 ** 2);//25
console.log(2 ** 10);//1024

ES8新特性-async和await

async 和 await

ES8提出的async 和 await 关键字两种语法结合可以让异步代码像同步代码一样，可以解决promise对象不断使用then方法的代码不简洁问题

async函数

• async函数的返回值为Promise类型对象
• Promise类型对象的结果由async函数执行的返回值决定
  • 如果返回的结果不是一个Promise类型的对象，返回的结果就是状态 成功的Promise对象
  • 如果返回的结果是一个Promise类型的对象，返回的结果Promise对象状态由返回的那个Promise类型的对象的状态决定，如果成功，返回的结果状态也是成功，失败则返回的结果状态也是失败，返回结果的值也是Promise类型的对象的值决定

async function fn() {
    // 1.返回非Promise类型的属性，返回成功的Promise类型对象
    // return "iloveyou"

    // 2.抛出错误 返回失败的Promise类型对象
    // throw new Error("出错啦")

    // 3.返回Promise对象
    return new Promise((resolve, reject) => {
        // 3.1 成功 返回成功的Promise类型对象
        resolve("成功！")
        //     // 3.2 失败 返回失败的Promise类型对象
        //     reject("失败！")
    })
}

const result = fn();
console.log(result);

await表达式

• await关键字必须写在async函数中
• await关键字右侧的表达式一般为promise对象
• await返回的是promise成功的值
• await表达式返回的promise成功的值
• await表达式的promise状态失败了，就会抛出异常，需要通过try...catch捕获处理

await表达式状态成功时

// await 要放在async函数中
async function main() {
    let result = await new Promise((resolve, reject) => {
        resolve("用户数据");
    })
    // 打印await表达式返回值
    console.log(result);
}
// 调用函数
main()//用户数据

await表达式状态失败时，通过try...catch捕获处理

// await 要放在async函数中
async function main() {
    try {
        let result = await new Promise((resolve, reject) => {
            reject("读取失败")
        })
        // 打印await表达式返回值
        console.log(result);
    }
    catch (e) {
        console.warn(e);
    }
}
// 调用函数
main()

async和await结合读取文件

文件路径

JS代码

// 引入fs文件模块
const fs = require("fs");

// 读取《登鹤雀楼》
function readPoetry(){
    return new Promise((resolve, reject)=>{
        fs.readFile("./resource/登鹳雀楼.md", (err, data)=>{
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}
// 读取译文
function readTranslation(){
    return new Promise((resolve, reject)=>{
        fs.readFile("./resource/译文.md", (err, data)=>{
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}
// 读取创作背景
function readBackground(){
    return new Promise((resolve, reject)=>{
        fs.readFile("./resource/创作背景.md", (err, data)=>{
            if(err){
                reject(err)
            }else{
                resolve(data)
            }
        })
    })
}
// 声明一个async函数
async function main(){
    //获取《登鹤雀楼》内容
    let poetry = await readPoetry();
    // 获取 译文内容
    let translation = await readTranslation();
    // 获取 创作背景内容
    let background = await readBackground();
    console.log(poetry.toString());
    console.log(translation.toString());
    console.log(background.toString());
}
// 执行main函数
main()

执行结果

async和await结合发送AJAX请求

代码

    <script>
        // 发送AJAX请求，返回是Promise对象
        function sendAJAX(url) {
            return new Promise((reslove, reject) => {

                // 1.创建AJAX对象
                const xhr = new XMLHttpRequest();

                // 2.初始化
                xhr.open("GET", url);

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

                // 4.事件绑定
                xhr.onreadystatechange = function () {
                    if (xhr.readyState === 4) {
                        if (xhr.status >= 200 && xhr.status < 300) {
                            // 成功
                            reslove(xhr.response);
                        }else{
                            // 失败
                            reject(xhr.status)
                        }
                    }
                }
            })
        }
        // 测试
        async function main(){
            // 发送AJAX请求
            let data = await sendAJAX("https://api.apiopen.top/getJoke");
            console.log(data);
        }
        main()
    </script>

效果