callback&promise

同步和异步

JavaScript语言是一门“单线程”的语言，javascript就像一条流水线，仅仅是一条流水线而已，要么加工，要么包装，不能同时进行多个任务和流程，无论如何，js做事情的时候都是只有一条流水线（单线程），同步和异步的差别就在于这条流水线上各个流程的执行顺序不同。
同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；
异步任务指的是，不进入主线程、而进入“任务队列”的任务，只有等主线程任务执行完毕，“任务队列”开始通知主线程，请求执行任务，该任务才会进入主线程执行。
异步运行机制如下：
1.所有同步任务都在主线程上执行，形成一个执行栈。
2.主线程之外，还存在一个“任务队列”。只要异步任务有了运行结果，就在“任务队列之中放置一个事件。
3.一旦“执行栈”中的所有同步任务执行完毕，系统就会读取”任务队列“，看看里面都有哪些事件。哪些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
4.主线程不断重复上面的第三步。

回调函数：函数当参数，传递另外一个函数

在javascript中，回调函数具体的定义为：函数A作为参数（函数引用）传递到另外一个函数B中，并且这个函数B执行A。我们就说函数A叫做回调函数> 如果没有名称(函数表达式)，就叫做匿名回调函数。

回调函数的嵌套：可读性很差。(回调地狱：回调函数嵌套可读性很差)

ajax的依赖调用–callback–封装ajax函数

回调函数的概念
函数属于对象，同时函数也是对象的构造器。
函数A当做参数，传递给另外一个函数B，函数A就是回调函数。
回调函数和同步异步并没有直接的关系，同步回调，异步回调，事件处理回调，延迟回调…

顺序

function a(){
        setTimeout(() => {
            console.log(1);
        }, 1000);
    }

    function b(){
        console.log(2);
    }
    a();
    b(); 
    //2,1

回调函数（不严谨）

function a(b){
        setTimeout(() => {
            console.log(1);
            b(); //回调函数，不严谨
        }, 1000);
    }
    a(function (){
        console.log(2);
    });

    //1,2

回调函数（严谨）

function a(b){
        setTimeout(() => {
            console.log(1);
            b&& typeof b === 'function' && b(); //判断,严谨的写法
        }, 1000);
    }
    a(function (){
        console.log(2);
    });

    //1,2

数组api：数组的新增方法：every/some/filter/map/forEach
目的：回调函数经常使用，但是回调函数有一个弊端，多层嵌套可读性很差，这个称之为 “回调地狱”

ES6—promise(承诺)

Promise 异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。

Promise对象有以下两个特点。

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（resolve已成功）和rejected（已失败）。

（2）一旦状态设定，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了

promise状态：pending(进行中) resolve(成功，已解决) reject(失败，未解决)

pending–>resolve 进行中–>成功

pending–>reject 进行中–>失败

let promise = new Promise((resolve,reject)=>{//创建一个promise对象。
同步的
resolve,reject这里两个形参是两个函数，用来设定状态。
resolve(‘设置状态里面的参数’);//成功–>找实例对象下面的then方法 括号里面的参数传给then里面函数。
reject();//失败–>找实例对象下面的catch方法,括号里面的参数传给catch里面函数。
});

 写法1
        promise.then((info)=>{
            console.log('成功的回调');
            console.log(info);
        }).catch(()=>{
            console.log('失败的回调');
        });

        写法2
        promise.then(()=>{//成功的回调
            console.log('成功的回调');
        },()=>{//失败的回调
            console.log('失败的回调');
        })

        写法3
        promise
        .then(()=>{
            console.log('成功的回调1');
        })
        .then(()=>{
            console.log('成功的回调2');
        })
        .then(()=>{
            console.log('成功的回调3');
        })
        .then(()=>{
            console.log('成功的回调4');
        })
        .catch(()=>{
            console.log('失败的回调');
        });
 		console.log(1);
        let promise = new Promise((resolve,reject)=>{
            console.log(2);
            resolve();
            console.log(3);
        });

        promise.then(()=>{
            console.log(4);
        });

        console.log(5);

promise原型下面两个常用的方法：Promise.prototype.then Promise.prototype.catch

function a(){
            let promise = new Promise((resolve,reject)=>{
                setTimeout(() => {
                    console.log(1);
                    resolve();
                }, 1000);
            });
            return promise;
        }
        a()
        .then(function (){
            console.log(2);
        })
        .then(function (){
            console.log(3);
        });

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

Promise.prototype.finally

finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。

Promise.all()：用于将多个 Promise 实例，包装成一个新的 Promise 实例，接受一个数组作为参数，只有数组里面的每个状态都变成resolve，则新的 Promise 实例状态才会变成resolve.

let p1 = new Promise((resolve,reject)=>{
        setTimeout(() => {
            reject('任务1');
        }, 3000);
    });

    let p2 = new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('任务2');
        }, 1000);
    });

    let p3 = new Promise((resolve,reject)=>{
        setTimeout(() => {
            resolve('任务3');
        }, 5000);
    });

    let newpromise = Promise.all([p1,p2,p3]);
    newpromise.then(function(data){
        console.log(data);//数组  ["任务1", "任务2", "任务3"]
    }).catch(function(){
        console.log('失败的状态');
    })

Promise.race():赛跑的意思。那个状态改变最快，跟着状态。

let newpromise = Promise.race([p1,p2,p3]);
    newpromise.then(function(data){
        console.log(data);//数组  ["任务1", "任务2", "任务3"]
    }).catch(function(){
        console.log('失败的状态');
    });

promise改造ajax依赖调用