ES6新语法中的Promise

Promise

1 Promise 的定义和使用

Promise 是 ES6 引入的异步编程的新解决方案，语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果

一个 Promise 必然处于以下几种状态之一

• 待定 pending：初始状态，既没有被兑现，也没有被拒绝
• 已兑现 fulfilled：意味着操作成功完成
• 已拒绝 rejected：意味着操作失败

Promise 的使用

• Promise 构造函数new Promise((resolve, reject) => {})
• Promise.prototype.then()方法
• Promise.prototype.catch()方法

let p = new Promise(function (resolve, reject) {
    // 使用 setTimeout 模拟请求数据库数据操作
    setTimeout(function () {
        let isRight = true; // 这个异步请求数据库数据操作是否正确返回数据
        if (isRight) {
            let data = '数据库中的数据';
            resolve(data); // 设置 Promise 对象的状态为操作成功
        } else {
            let err = '数据读取失败！'
            reject(err); // 设置 Promise 对象的状态为操作失败
        }
    }, 1000);
});
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})

2 Promise 封装读取文件

// 使用 nodejs 的 fs 读取文件模块
const fs = require('fs');

const p = new Promise(function (resolve, reject) {
    fs.readFile('./resources/为学.txt', (err, data) => {
        if (err) reject(err); // err 是一个异常对象
        resolve(data);
    })
})

p.then(function (value) {
    console.log(value.toString()); // 转为字符串输出
}, function (reason) {
    console.log('读取失败!!');
})

3 Promise 封装 Ajax 请求

const p = new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('get', 'https://api.apiopen.top/getJoke');
    xhr.send();
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response); // 成功
            } else {
                reject(xhr.status); // 失败
            }
        }
    }
});

// 指定回调
p.then(function (value) {
    console.log(value);
}, function (reason) {
    console.error(reason);
})

4 Promise.prototype.then 方法

Promise.prototype.then 方法返回的结果依然是 Promise 对象，对象状态由回调函数的执行结果决定

具体情况如下

• 若 then 方法写返回值，则 then 方法返回的对象的状态值为成功 fulfilled，返回结果值为 undefined

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('用户数据')
        reject('出错了');
    }, 1000);
})
// 未设定返回值
const res = p.then((value) => {
    console.log(value);
}, (reason) => {
    console.warn(reason);
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是非 Promise 类型的属性，则 then 方法返回的对象，其状态为成功 fulfilled，返回结果值取决于 then 方法所执行的是哪个函数（resolve 或 reject）

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // resolve('用户数据')
        reject('出错了');
    }, 1000);
})
 // 返回的非 Promise 对象
const res = p.then((value) => {
    console.log(value);
    return '成功了！！';
}, (reason) => {
    console.warn(reason);
    return '出错啦！！'
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是 Promise 类型 return new Promise()，则 then 方法返回的 Promise 对象状态与该返回结果的状态相同，返回值也相同

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据')
        // reject('出错了');
    }, 1000);
})
const res = p.then((value) => {
    console.log(value);
    // 返回 Promise 对象
    return new Promise((resolve, reject) => {
        resolve('（1）成功了！！！');
        // reject('（1）出错了！！！')
    })
}, (reason) => {
    console.warn(reason);
    return new Promise((resolve, reject) => {
        // resolve('（2）成功了！！！');
        reject('（2）出错了！！！')
    })
})
// 打印 then 方法的返回值
console.log(res);

• 如果回调函数中返回的结果是 throw 语句抛出异常，则 then 方法的对象的状态值为 rejected，返回结果值为 throw 抛出的字面量或者 Error 对象

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据');
    }, 1000);
});
const res = p.then((value) => {
    console.log(value);
    return new Promise((resolve, reject) => {
        throw new Error('错误了！！');
    })
});
// 打印结果
console.log(res);

4 链式调用

Promise.prototype.then 方法返回的结果还是 Promise 对象，这意味着我们可以继续在该结果上使用 then 方法，也就是链式调用，杜绝回调地狱

const p = new Promise(resolve=>{}, reject=>{});
p.then(value=>{}, reason=>{})
.then(value=>{}, reason=>{})
.then(value=>{}, reason=>{})
...

5 Promise.prototype.catch

catch() 方法返回一个 Promise，并且处理拒绝的情况
它的行为与调用 Promise.prototype.then(undefined, onRejected) 相同

obj.catch(onRejected);
等同于
obj.then(undefined, onRejected);

语法

p.catch(onRejected);

p.catch(function(reason) {
   // 拒绝
});

举例

var p1 = new Promise(function (resolve, reject) {
    resolve('Success');
});

p1.then(function (value) {
    console.log(value); // "Success!"
    throw 'oh, no!';
}).catch(function (e) {
    console.log(e); // "oh, no!"
}).then(function () {
    console.log('有 catch 捕获异常，所以这句输出');
}, function () {
    console.log('没有 catch 捕获异常，这句将不会输出');
});

// 结果
Success
oh, no!
有 catch 捕获异常，所以这句输出

6 链式调用练习-多个文件读取

const fs = require('fs');

// 回调方式
fs.readFile('./resources/为学.md', (err, data1)=>{
    fs.readFile('./resources/插秧诗.md', (err, data2)=>{
        fs.readFile('./resources/观书有感.md', (err, data3)=>{
            let result = data1 + '\r\n' +data2  +'\r\n'+ data3;
            console.log(result);
        });
    });
});

// promise 方式
new Promise((resolve, reject) => {
    fs.readFile('./resources/users.md', (err, data) => {
        resolve(data); // 设置状态
    })
}).then(value => {
    return new Promise((resolve, reject) => {
        // value 为第一次读取的文件数据，data 为第二次（当前）读取的数据
        fs.readFile('./resources/orders.md', (err, data) => {
            resolve([value, data]); // 将上轮读取结果和本轮合并传到下一轮轮读取操作
        });
    });
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/goods.md', (err, data) => {
            // value 为上一轮传递过来的文件数据数组
            value.push(data);
            // 传给下一轮操作
            resolve(value);
        });
    });
}).then(value => {
    // 合并数组元素，输出
    console.log(value.join('\r\n'));
});

以上只是 Promise 的入门，更多还要进一步深入学习