什么是 Promise

Promise 是异步编程的一种解决方案：从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。

Promise 的三种状态

• pending：在过程中，还没有结果
• resolved：成功了
• rejected：失败了

变化

pending -> resolved 或 pending -> rejected

变化是不可逆的

// 刚定义时，状态默认为 pending
const p1 = new Promise((resolve, reject) => {

})
console.log('p1',p1); // pending

// 执行 resolve() 后，状态变成 resolved
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    })
})

console.log('p2',p2); // resolve

// 执行 reject() 后，状态变成 rejected
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject()
    })
})

console.log('p2',p2); // reject

// 直接返回一个 resolved 状态
Promise.resolve(100)
// 直接返回一个 rejected 状态
Promise.reject('some error')

状态和 then catch

• pending 不会触发任何 then catch 回调
• 状态变为 resolved 会触发后续的 then 回调
• 状态变为 rejected 会触发后续的 catch 回调

then catch 会继续返回 Promise ，此时可能会发生状态变化！！！

then 方法

const p = new Promise((resolve,reject)=> {
   setTimeout(()=> {
    resolve('用户数据')

    // reject('出错啦!');
   },1000) 
});


// 调用 then 方法 返回结果是 Promise 对象，对象状态有回调函数的执行结果决定
// 1. 如果回调函数中返回的结果是 非 Promise 类型的属性
const result = p.then(value => {
    // console.log(value);

    // 1. 非 Promise 类型的属性
    // return 'xuwei'

    // 2. 是 promises 对象
    // return new Promise((resolve,reject) => {
    //     reject('error')
    // })

    // 3. 抛出错误
    // throw new Error('错误啦');
    // throw '出错啦'
}, reason=> {
    console.log(reason);
})

// console.log(result);



// 链式调用
p.then(value=>{

}).then(value=>{

})

catch 方法

const p = new Promise((resolve,reject)=> {
    setTimeout(()=>{
        // 设置 p 对象的状态为失败，并设置失败的值
        reject('出错啦！');
    },1000);
});

// p.then(value=>{ 

// },reason=> {
//     console.error(reason);
// })

p.catch(reason=>{
    console.warn(reason);
})

Promise 基本语法

// 实例化 promise 对象
const p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        // let data = '数据库中的用户数据'
        // resolve(data);
        let err = '数据读取失败';
        reject(err);
    }, 1000);
});

// 调用 promise 对象中的 then 方法

p.then(function (value) {
    console.log(value);
},function(reason) {
    console.log(reason);
})

Promise 读取文件

const p = new Promise(function(resolve,reject) {
    fs.readFile('./resources/123.txt','utf8',(err,data)=> {
        // 如果失败 改变 p 的状态
        if(err) reject(err);
        // 如果成功
        resolve(data);
    });
});
p.then(function(value){
    console.log(value);
},function(reason){
    console.log("读取失败!!");
})

Promise 读取多个文件

const fs = require('fs');

// 回调地狱读写文件
fs.readFile('./resources/许伟.txt','utf8',(err,data1)=> {
    fs.readFile('./resources/陈健.txt','utf8',(err,data2)=> {
        fs.readFile('./resources/胡大.txt','utf8',(err,data3)=> {
            let result = data1+'\r\n'+data2+'\r\n'+data3;
            console.log(result);
        })
    })
})

// Promise 实现
const p = new Promise((resolve, reject) => {
    fs.readFile('./resources/1.txt', 'utf8', (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/2.txt', 'utf8', (err, data) => {
            resolve([value,data]);
        });
    })
}).then(value=>{
    return new Promise((resolve, reject) => {
        fs.readFile('./resources/3.txt', 'utf8', (err, data) => {
            value.push(data)
            resolve(value)
        });
    })
}).then(value=>{
    console.log(value.join('\r\n'));
})

Promise 封装AJAX

const p = new Promise((resolve, rejext) => {
    // 创建对象
    const xhr = new XMLHttpRequest();
    xhr.open('GET', "http://127.0.0.1:8000/server")

    xhr.send();

    xhr.onreadystatechange = function () {

        if (xhr.readyState == 4) {
            if (xhr.status >= 200 && xhr.status < 300) {

                resolve(xhr.response);
            } else {
                // 如果失败
                console.error(xhr.status);
            }
        }
    }
})
// 指定回调
p.then(function(value){
    console.log(value);
},function(reason){
    console.log(reason);
})