ES6学习笔记之Promise对象

Promise对象

1.异步回调语法不美观
我们遇见了回调黑洞问题（一层嵌套一层）
回调就是当有多个异步的事情，要排队进行的时候，此时必须回调嵌套回调。
ES6推出了Promise对象，就是优雅的解决回调函数的黑洞问题,Promise对象

2. ES6的Promise对象
ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。
下面代码创造了一个Promise实例。

const promise = new Promise(function(resolve, reject){
    if(/* 异步操作成功 */){
       resolve(value);
    }else{
       reject(error);
    }
});

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。
resolve 表示成功执行的回调函数
reject 表示失败执行的回调函数

封装一个函数，叫读文件duwenjian()，这个函数接收url作为路径参数：

var fs = require("fs");
function duwenjian(url){
    return new Promise(function(resolve,reject){
        fs.readFile(url, (err,data)=>{
            if(err){
                reject(); //失败执行
                return;
            }
            resolve(data.toString()); //成功执行
        })
    })
}
duwenjian("./data/1.txt").then((data)=>{
    console.log(data);
    return duwenjian("./data/2.txt");
}).then((data)=>{
    console.log(data);
    return duwenjian("./data/3.txt");
}).then((data)=>{
    console.log(data);
})

回调黑洞问题解决了，将原来的“嵌套模式”变为“队列模式”
可以认为这是一根语法糖，因为没有改变原理，只改变了写法。

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

duwenjian("./data/1.txt").then((data)=>{
    console.log(data);
},()=>{
    console.log("读取失败")
})

1. l这个函数返回一个Promise对象，这个对象是构造函数，ES6新增的。
2. Promise一定是某个函数的唯一返回值，Promise自己调用没有任何意义，必须当做一个函数的返回值才有意义！本例中，Promise就是duwenjian函数的返回值！！
3. 这个函数中，一定是一个异步语句，我们的案例是fs.readFile()
4. 异步语句的成功，要将数据通过resolve(数据)传出去，这个数据将成为then里面的data。
5. 异步语句的失败，要将错误信息通过reject(err)传出去，这个数据将成then里面的第二个data。
6. Promise的实例拥有then()方法，也就是说，then方法是定义在原型对象。

3.ES7的async和await
ES6中的Promise对象，解决了回调黑洞，但实际上又产生了火车黑洞，then()过多不好看。
所以ES7中提出了async/await可以让我们用同步的方式写异步，不写then了。
async表示异步，await表示异步等待。

注意：
1）必须写那个return Promise对象的函数；
2）await不能裸用，必须写在async字样的函数里；
3）所有异步语句前都要加await，但是后面的函数必须return Promise实例的函数。

Nodejs读文件：

var fs = require("fs");
function duwenjian(url){
    return new Promise(function(resolve,reject){
        fs.readFile(url, (err,data)=>{
            if(err){
                reject(); //失败执行
                return;
            }
            resolve(data.toString()); //成功执行
        })
    })
}
 
async function main(){
    var data1 = await duwenjian("data/1.txt").then(data=>data);
    var data2 = await duwenjian("data/2.txt").then(data=>data);
    var data3 = await duwenjian("data/3.txt").then(data=>data);
    console.log(data1)
    console.log(data2)
    console.log(data3)
};
 
main();

任何一个函数都可以在function之前加async这个关键字，表示这个函数中出现了await。
await后面只能跟着一个返回promise对象的实例的函数的调用，then里面的函数的返回值将自动被等号左边接收

使用async/await的哲学：用写同步语句的感觉，去写异步语句。
async写在function这个之前，await写在异步语句之前
await表示等待后面的操作执行完毕，再执行下一行代码。

4 ES8的fetch()
ES8中继续提出了fetch方法，这个方法发出ajax请求，返回Promise的实例

fetch()函数是ES8中提出的新的特性，它：
1）能够发出Ajax请求，并且请求机理不是xhr，而是新的机理；
2）天生可以跨域，但是需要设置头，服务器可以写脚本识别这个头部判断是否应该拒绝它；
3） fetch()返回Promise对象，所以可以用then来跟着，then里面的第一个函数就是resolve，这个resolve的返回值将自动被await等号左边的变量的接收。

async function main(){
    var data1 = await fetch("data/1.json").then(data=>data.json());
    var data2 = await fetch("data/2.json").then(data=>data.json());
    var data3 = await fetch("data/3.json").then(data=>data.json());
    console.log(data1)
    console.log(data2)
    console.log(data3)
};
main();

babel没有任何插件可以翻译fetch为传统ajax。
fetch只能用在浏览器环境，不能用在Nodejs环境。