ES6 学习笔记（十三）promise的简单使用

1、什么是promise

在JavaScript中，我们经常会用到回调函数，而回调函数的使用让我们没法使用return，throw等关键字。JS引用promise正好解决了这个问题。
promise单词意思是承诺，代表未来的某个事情或者是行为。promise是一个容器，包含了异步操作。因此我们认为promise是异步操作的解决方案。所有异步操作都可以通过promise来解决

2、了解promise

上面说到promise是一个容器，那我们先在控制台打印一下。

可以看到，Promise是一个构造函数，自身就有all、reject（代表失败的回调函数， 失败的操作）、resolve（代表成功的回调函数， 成功的操作）这几个于我们而言比较眼熟的方法，原型上有then、catch等同样很眼熟的方法。这么说用Promise new出来的对象肯定就有then、catch方法。

2.1、promise对象的特点

• Promise对象的状态不受外界影响。包含pending（进行中）、fulfilled（已成功）和rejected（已失败）三种状态。只有异步操作结果才可决定是哪种状态，其他任何操作都无法改变这种状态。
• 一旦状态改变，就不会再变。Promise对象的状态改变，只有两种情况：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就不会再变了，这时就称为 resolved（已定型）

举个例子：

let action = new Promise(function (resolve, reject) {
    // 包含一个异步操作
    setTimeout(function () {
        let data = Math.floor(Math.random() * 100);
        console.log(data);
        if (data > 50) {
            resolve({
                msg: '成功',
                data,
            });
        } else {
            reject({
                msg: '失败',
                data,
            });
        }
    }, 30)
});
console.log(action); // pending -- 进行中


// action -- 执行完的事件

action.then(function (d) {

// 参数1 - 成功回调

console.log(action); // resolved -- 已定型（fulfilled --- 已成功）

console.log(d);

}, function (d) {

// 参数2 - 失败回调（可选）

console.log(action); // rejected -- 已失败

console.log(d);

});

输出结果：
Promise { }
52
Promise { { msg: '成功', data: 52 } }
{ msg: '成功', data: 52 }

Promise也有一些不足的地方。其一，一旦新建Promise就会立即执行，无法取消。如果不设置回调函数，Promise内部抛出的错误不会反应到外部。其二，当处于pending状态时，无法得知目前是哪个阶段。

2.2、了解宏任务和微任务

先看个例子：

console.log("a");
setTimeout(() => console.log("b")) // 回调要等到出栈才会执行
let p = new Promise((resolve, reject) => {
    resolve()
    console.log("c"); // 同步代码
}).then(() => {
    console.log("d"); // 异步代码
})
console.log("e"); // 同步代码

输出结果：
a
c
e
d
b

总结：
宏任务指的是click，setTimeOut等DOM事件 微任务指的是promise的异步操作，数据查询
宏任务要比微任务先进栈，但是后出栈（微任务比宏任务先执行）。因此上述代码中setTimeout函数最后执行。

了解更多有关宏任务和微任务的内容

3、使用promise

3.1 异步加载图片

function loadImageAsync(url){
    return new Promise(function(resolve,reject){
        var image = new Image();
        image.onload = function(){
            resolve(this)
        };
        image.onerror = function(){
            reject(new Error('Counld not load image at'+url))
        }
        image.src = url
        document.body.appendChild(image)
    })
}
let urlimg = 'https://static.likepoems.com/cdn/sakurairo/logo.jpg'
loadImageAsync(urlimg).then(function(image){
    console.log(`Image loaded:${image.src}`);
},function(error){
    console.log(error);
})

3.2 使用Promise封装ajax

function getData(url) {
    let promise = new Promise(function (resolve, reject) {
        // 异步操作 - 做数据请求
        let ajax = new XMLHttpRequest();
        ajax.open('get', url);
        ajax.send();
        ajax.onreadystatechange = function () {
            if (ajax.readyState === 4) {
                if (ajax.status === 200) {
                    // 成功
                    resolve(ajax.responseText);
                } else {
                    // 失败
                    reject(ajax);
                }
            }
        }
    });
    return promise;
}


// 使用

getData('./1.txt').then(function (d) {

console.log(d);

console.log('成功');

}, function (err) {

console.log(err);

console.log('失败');

});

运行结果：

3.3 then方法与链式操作

举个例子：

2.txt

{
    "name":"李明",
    "sex":"男",
    "url":"./2.txt"
}

getData('./2.txt').then(function (d) {
    console.log('步骤1', JSON.parse(d).url);
    return getData(JSON.parse(d).url);
}).then(function (d) {
    console.log('步骤2', JSON.parse(d).url);
    return getData(JSON.parse(d).url);
}).then(function (d) {
    console.log('步骤3', JSON.parse(d).url);
    return getData(JSON.parse(d).url);
})

输出结果：
步骤1 ./2.txt
步骤2 ./2.txt
步骤3 ./2.txt

Promise实例的then( )可以一直调用下去。

3.4 出现错误的处理

getData('./2.txt').then(function (d) {
    console.log('步骤1', JSON.parse(d).url);
}).then(function (d) {
    console.log('步骤2', JSON.parse(d).url);
    resolve();
}).then(function (d) {
    throw new Error("Error");
    console.log("then");
}).catch(function (err) {
    console.log("catch error:" + err.message);
});

输出结果：
步骤1 ./2.txt
catch error:Unexpected token u in JSON at position 0

总结：
若遇到异常抛出，会顺着promise链寻找下一个onRejected失败回调函数或者由catch指定的回调函数。我们一般使用catch来终止promise链，避免链条中的rejection抛出错误到全局

3.5 Promise.all()使用方法

举个例子：

let p1 = new Promise((res, rej) => {
    setTimeout(() => {
        res("p1")
    }, 1000)
})
let p2 = new Promise((res, rej) => {
    setTimeout(() => {
        res("p2")
    }, 2000)
})
let p3 = new Promise((res, rej) => {
    setTimeout(() => {
        res("p3")
    }, 3000)
})
// 接收多个promise对象并返回一个promise对象
Promise.all([p1, p2, p3]).then((r) => {
    console.log(r);
}).catch((err) => {
    console.log(err.message);
})

输出结果：
[ 'p1', 'p2', 'p3' ]

总结： Promise.all( )实参是所有Promise实例的字面量组成的数组，执行完毕的结果是所有输出结果的所组成的数组。

4、拓展：async/await

4.1 async的使用

async函数使得异步操作变得更加方便

// async函数会返回一个Promise对象
async function hello() {
    return "helloworld"
}
console.log(hello());
hello().then((r)=>{
    console.log(r);
})

输出结果：
Promise { 'helloworld' }
helloworld

4.2 await的使用

await可以让代码暂停下来等待异步任务完成，await关键字只能放在async标识的异步函数里面才能够生效。
举个例子：

function getNumber() {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(12)
        }, 2000)
    })
}
async function test() {
    let r = await getNumber().then(v => v)
    r++
    return r
}
test().then(v => console.log(v))

输出结果：
13

function getNumber() {
    return new Promise((res, rej) => {
        setTimeout(() => {
            res(12)
        }, 2000)
    })
}
let r = await getNumber().then(v => v)
console.log(r);

输出结果：
SyntaxError: await is only valid in async function（语法错误）