JavaScript异步编程

回调函数

把函数 A 传给另一个函数 B 调用，那么函数 A 就是回调函数。

function greeting(name) {
  alert('Hello ' + name);
}

function processUserInput(callback) {
  var name = prompt('Please enter your name.');
  callback(name);
}

processUserInput(greeting);

回调函数的缺点

回调地狱

// 伪代码
ajax('a.json', (res1) => {
    console.log(res1);
    ajax('b.json', (res2) => {
        console.log(res2);
        ajax('c.json', (res3) => {
            console.log(res3);
        });
    });
});

单线程:JavaScript这语言被设计的时候本来就是单线程的

异步:程序执行后,不会马上开始生效,而是过一会儿才开始行动

为什么要用promise(承诺)?

为了能使回调函数以更优雅的⽅式进⾏调⽤，在 ES6 语法中，新增了⼀个名为 Promise 的新规范。

promise有承诺的意思,表示未来的某一时刻,会返回一些东西,可以这样理解

Promise

定义

Promise是一个对象,可以用同步的表现形式来书写异步代码

好处

• 1、可以很好地解决回调地狱的问题（避免了层层嵌套的回调函数）。
• 2、语法简洁、可读性强，便于后期维护。
• 3、Promise 对象提供了简洁的 API，使得管理异步操作更加容易。比如多任务等待合并。

伪代码

// 伪代码1
myPromise()
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    )
    .then(
        function () {},
        function () {}
    );

// 伪代码2
是时候展现真正的厨艺了()
  .然后(买菜)
  .然后(做饭)
  .然后(洗碗);

使用步骤

1. new Promise()构造一个实例
2. 传入参数resolve和reject
3. 用promise.then()和promise.catch()返回处理结果

例子

isPregnant是true所有走了resolve这里

const isPregnant=true;

const promise =new Promise((resolve,reject)=>{
    if(isPregnant){
        resolve('孩子他爹');
    }else{
        reject("老公")
    }
});

promise
    .then(name=>{
        console.log("男人是:"+name);
    })
    .catch(name=>{
        console.log("男人是:"+name);
    })
    .finally(()=>{
        console.log('男人和女人最终结婚了');
    });

promise 对象的 3 个状态

1. 初始化
2. 成功
3. 失败

当 new Promise()执行之后，promise 对象的状态会被初始化为pending，这个状态是初始化状态。new Promise()这行代码，括号里的内容是同步执行的。括号里可以再定义一个 异步任务的 function，function 有两个参数：resolve 和 reject。如下：

• 如果请求成功了，则执行 resolve()，此时，promise 的状态会被自动修改为 fulfilled。
• 如果请求失败了，则执行 reject()，此时，promise 的状态会被自动修改为 rejected

（2）promise.then()方法：只有 promise 的状态被改变之后，才会走到 then 或者 catch。也就是说，在 new Promise()的时候，如果没有写 resolve()，则 promise.then() 不执行；如果没有写 reject()，则 promise.catch() 不执行。

then()括号里面有两个参数，分别代表两个函数 function1 和 function2：

• 如果 promise 的状态为 fulfilled（意思是：如果请求成功），则执行 function1 里的内容
• 如果 promise 的状态为 rejected（意思是，如果请求失败），则执行 function2 里的内容

形象表示

失败:reject,用catch返回

成功:resolve,用then返回