ES6 -异步编程

javascript 是基于单线程的，如果想实现多个任务，需要任务队列来实现。

事件模型：点击按钮触发事件队列，异步代码会在未来的某个时间点执行

回调模式：被调用的函数是作为参数传入的。弊端：嵌套回调

promise: 相当于异步操作结果的占位符，不会触发一个事件，也不会传入回调函数给目标函数，而是返回一个Promise。

回调函数

事件处理 callback ，回调函数作为参数传递。

Promise

promise 是 用来解决异步回调嵌套地狱问题。

promise 三种状态 先是处于进行中pending状态，此时操作尚未完成，所以它是为处理的；一旦异步操作执行结束，它变成已处理settled状态。

3种状态 pending fulfilled(异步操作成功完成) rejected(出现错误未能成功完成)

所有的promise 都有 then(fulfilled,rejected) 方法,fulfilled 函数 成功都执行它，rejected 函数 失败都执行它。

如果实现了then() 方法的对象，这个对象可以称为thenable对象。所有的promise都是thenable对象，但是并非所有thenable对象都是promise.

setTimeout 模拟调试

// promise解决了异步回调嵌套的问题.异步不仅是ajax
// 执行一个异步操作,正在执行，成功，失败.
// 回调中有两个参数,第一个表示成功，第二个表示失败
let promise = new Promise(function(resolve,reject){
    setTimeout(function(){
        // 执行了一些异步操作
        // if()
        console.log('我是在进行一些异步操作');
        if(false){
            resolve(); //执行成功的话就调用该方法;
        }else{
            reject();  // 执行的异步代码失败后执行;
        }
    },2000);
});

// 这个then方法里的参数是异步结果出来后的回调。
promise.then(function(){
    console.log('我知道了，你执行成功了！！！');
},function(){
    console.error('我知道你代码执行失败了！');
});
console.log(promise);

js脚本文件

function loadScript(url){
    return new Promise(function(resolve,reject){
        var ele = document.createElement('script');
        // 加载成功
        ele.onload = function(){
            resolve('成功请求数据');//成功则调用该方法
        };
        ele.onerror = function(){
            reject('请求数据错误');//失败则调用该方法
        };
        ele.src = url;
        document.body.appendChild(ele);
    });
}

var promise = loadScript('../js/common.js');

promise.then(function(data){
    console.log('好开心，加载成功了呢！');
    console.log(data);
},function(data){
    console.error('呜呜~~~，失败了好伤心。。。。');
    console.log(data);
});

promise.then(function(data){
    console.log('/////////');
    console.log(data);
    console.log('//////////');
})

读取文件

let fs = require("fs");
function readFile(filename) {
  return new Promise(function(resolve,reject){
     fs.readFile(filename,function(err,data){
       if(err){
         reject(err); // 失败
         return;
       }
       
       resolve(data); // 成功
     });
  });
}
let promise = readFile(".txt");
promise.then(function(contents){
  // 完成
  console.log(contents);
},function(err){
  // 拒绝
  console.error(err.message);
});

// 异常处理
promise.catch(function(err){
  console.log(err.message);
});

Fetch

Fetch API 已被 Firefox 39（Nightly）以及 Chrome 42（dev）已经内置支持。垫片技术 polyfill

Fetch API 中最常用的是 fetch() 方法，该方法最简单的形式是，接受一个 URL 参数并返回以一个 promise 对象：

fetch('data.json').then(function(res){
    console.log(res); //Response
    if(res.ok){
        //console.log(res.json()); //Promise
        return res.json();
    }else{
        console.log("貌似反应是不完美的,status：", res.status);
    }
},function(error){
    console.log("Fetch failed!", error);
}).then(function(json){
    console.log(json);  //JSON对象
});