ES6——Promise

一、ES6——Promise

1.1 Promise介绍与基本使用

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

1.1.1实例化Promise对象

• 实例化的promise对象的参数会接收一个函数类型的值

• Promise对象的三个状态：初始化、成功、失败

//函数有两个形参resolve和reject
const p = new Promise(function(resolve,reject){
    //函数内部封装一个异步操作
    setTimeout(function(){
        //获取数据
        let data = '数据库中的用户数据';
        //得到数据后，可以调用 resolve 和 reject 函数来改变promise对象的状态
        //resolve
        resolve(data);//Promise对象状态改变：成功
        
        let err = '数据读取失败';
        reject(err);//Promise对象状态改变：失败
    },1000)
});

//调用promise对象的then方法
//then接收两个参数，俩参数都是函数类型的值
p.then(function(value){
    //成功
    console.log(value);
},function(reason){
    //失败
    console.log(reason);
})

二、Promise封装读取文件

//引入fs模块，这里需要先安装node才能引入fs模块
const fs = require("fs");
//Promise封装
const p = new Promise(function(resolve,reject){
    fs.readFile("./待读取文件1.md",(err,data)=>{
        //判断如果失败
        if(err) reject(err);
        //如果成功
        resolve(data);
    });
});

p.then(function(value){
    console.log(value.toString());//结果是buffer类型，使用toStringjin'xing
},function(reason){
    console.log("读取失败");
})

三、 Promise封装AJAX请求

//使用原生Ajax向一个url发送请求
//接口地址：http://api.apiopen.top/getJoke

const p = new Promise((resolve,reject)=>{
    //1.创建对象
    const xhr = new XMLHttpRequest();
    //2.初始化
    xhr.open("GET","http://api.apiopen.top/getJoke");
    //3.发送
    xhr.send();
    //4.绑定事件，处理响应结果
    xhr.onreadystatechange = function(){
        //判断
        if(xhr.readyState === 4){
            //判断响应状态码 200-299 成功
            if(xhr.status >= 200 && xhr.state < 300){
                //表示成功
                resolve(xhr.response);
            } else{
                //失败
                reject(xhr.status);
            }
        }
    }
})
//指定回调，将回调单拎出来
p.then(function(value){
    console.log(value);
},function(reason){
    console.error(reason);
})

四、Promise.prototype.then方法

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

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

2. 是 promise 对象，返回的这个 promise 对象决定了最外层 promise 的状态和结果；

3. 抛出错误，最外层 Promise 对象状态为失败，并且返回抛出的值。

//创建Promise对象
const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('用户数据');
    },1000)
});

//调用then方法
const result = p.then(value=>{
    consolve.log(value);
    //1.非 promise 类型的属性
    return '成功';
    //2.是 promise 对象，返回的这个 promise 对象决定了最外层 promise 的状态和结果
    return new Promise((resolve,reject)=>{
        resolve('ok');
    });
    //3.抛出错误
    throw new Error('出错啦');
},reason=>{
    consolve.warn(reason);
});
console.log(result);

　　链式调用，then方法可以进行链式调用。

p.then(value=>{
    
}).then(value=>{
    
},reason=>{
    
});

五、Promise练习

5.1 读取多个文件

//引入fs模块
const fs = require("fs");
使用 Promsie 实现
const p  = new Promise((resolve,reject)=>{
    fs.readFile("./res/待读取文件1.md",(err,data)=>{
        resolve(data);
    });
});


//value是第一个文件的值
p.then((value)=>{
    console.log(value.toString());//将结果字符串转换
    //为了防止产生回调地狱，可以返回一个Promise对象
    return new Promise((resolve,resolve)={
        fs.readFile("./res/待读取文件2.md",(err,data)=>{
            //这里data是第二个文件的值
            resolve([value,data]);
        });
    })
}).then(value =>{
    //此时的value为第一个文件结果和第二个文件结果的集合(数组)
    return new Promise((resolve,resolve)={
        fs.readFile("./res/待读取文件3.md",(err,data)=>{
            //这里data是第三个文件的值
            //压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value =>{
    //此时的value为取出来的三个文件的值
    console.log(value.join('\r\n'));//结果为数组，所以用换行进行拼接
});

六、Promise 对象catch方法

　　用来指定Promise失败的回调。

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

//方法一
//p.then(function(reason){
    //console.error(reason);
//})

//方法二(算是then的一个语法糖)
p.catch(function(reason){
    console.warn(reason);
})