JavaScript

JS 异步编程

异步的概念

• 异步（Asynchronous,async）是与同步（Synchronous,sync）相对概念
• 同步按代码顺序执行，异步不按照代码顺序执行，异步的效率更高

什么时候用异步编程

在前端编程中（甚至后端有时也是这样），我们在处理一些简短、快速的操作时，例如计算 1 + 1 的结果，往往在主线程中就可以完成。主线程作为一个线程，不能够同时接受多方面的请求。所以，当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

• 回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么
• 这样一来，主线程几乎不用关心异步任务的状态了，它自己会善始善终

function print() {
    document.getElementById("demo").innerHTML = "baidu";
}
setTimeout(print,3000);

• 这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print" ，在命令行输出 "Time out"
• 当然，JS 语法十分友好，我们不必单独定义一个函数 print，我们常常将上面的程序写成：

setTimeout(function(){
    document.getElementById("demo").innerHTML = "Baidu";
},3000);

• 注意：setTimeout 会在子线程中等待 3 秒，在 setTimeout 函数执行之后主线程并没有停止，所以：

setTimeout(function() {
    console.log("1");
},3000);
console.log("2");

• 这段程序输出的结果是

2
1

异步 AJAX

• 除了 setTimeout 函数之外，异步回调广泛应用于 AJAX 编程
• XMLHttpRequest 常常用于请求来自远程服务器上的XML 或 JSON 数据
• 一个标准的 XMLHttpRequest 对象往往包含多个回调

var xhr = new XMLHttpRequest();
xhr.onload = function() {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML = xhr.responseText;
}
xhr.onerror = function() {
    document.getElementById("demo").innerHTML = "请求出错";
}
// 发送异步 GET 请求
xhr.open("GET","http://www.baidu.com",true);
xhr.send();

• XMLHttpRequest 的 onload 和onerror 属性都是函数，分别在它请求成功和请求失败时被调用
• 通过jQuery，更优雅地使用异步 AJAX

$.get("http://www.baidu.com",function(data,status) {
    alert("数据：" + data + "
状态：" + status);
});

JS Promise

Promise 简介

• Promise 是 ES6 提供的类，目的是更加优雅地书写复杂的异步任务

构造 Promise

• 现在我们先构造一个 Promise 对象

new Promise(function(resolve,reject) {
    // 要做的事...
});

• 通过新建一个 Promise 对象好像并没有看出它怎样 "更加优雅地书写复杂的异步任务"。我们之前遇到的异步任务都是一次异步，如果需要多次调用异步函数呢？例如，如果我想分三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒：

setTimeout(function() {
    console.log("First");
    setTimeout(function() {
        console.log("Second");
        setTimeout(function() {
            console.log("Third");
        },3000);
    },4000);
},1000);

• 这段程序实现了这个功能，但是它是用 "函数瀑布" 来实现的。可想而知，在一个复杂的程序当中，用 "函数瀑布" 实现的程序无论是维护还是异常处理都是一件特别繁琐的事情，而且会让缩进格式变得非常冗赘。

  现在我们用 Promise 来实现同样的功能：

new Promise(function (resolve,reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    },1000);
}).then(function () {
    return new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        },4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    },3000)
});

• 这段代码较长，所以还不需要完全理解它，我想引起注意的是 Promise 将嵌套格式的代码变成了顺序格式的代码

Promise 使用

• Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行，所以我们称之为起始函数。起始函数包含两个参数 resolve 和 reject
• 当 Promise 被构造时，起始函数会被异步执行：

new Promise(function (resolve,reject) {
    console.log("Run");
});

• 这段程序会直接输出 Run
• resolve 和 reject 都是函数，其中 resolve 代表一切正常，reject 是出现异常时所调用的

new Promise(function (resolve,reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Diveide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

• 这段程序执行的结果是：

a / b = 0
End

• Promise 类有 .then() .catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数
• .then() 可以将参数中的函数添加到当前 Promise 的正常执行序列
• .catch() 则是设定 Promise 的异常处理序列
• .finally() 是在 Promise 执行的最后一定会执行的序列
• .then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列

new Promise(function (resolve,reject) {
    console.log(111);
    resolve(222);
}).then(function (value) {
    console.log(value);
    return 333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

• 执行结果

111
222
333
An error

• resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then
• 但是，如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作
• reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常
• 但是请注意以下两点：
  • resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列
  • resolve 和 reject 并不能够使起始函数停止运行，别忘了 return

Promise 函数

• 上述的 "计时器" 程序看上去比函数瀑布还要长，所以我们可以将它的核心部分写成一个 Promise 函数：

function print(delay,message) {
    return new Promise(function (resolve,reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        },delay);
    });
}

• 然后我们就可以放心大胆的实现程序功能了：

print(1000,"First").then(function () {
    return print(4000,"Second");
}).then(function () {
    print(3000,"Third");
});

• 这种返回值为一个 Promise 对象的函数称作 Promise 函数，它常常用于开发基于异步操作的库

回答常见问题

Q: then、catch 和 finally 序列能否顺序颠倒？

• A: 可以，效果完全一样。但不建议这样做，最好按 then-catch-finally 的顺序编写程序

Q: 除了 then 块以外，其它两种块能否多次使用？

• A: 可以，finally 与 then 一样会按顺序执行，但是 catch 块只会执行第一个，除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块

Q: then 块如何中断？

• A: then 块默认会向下顺序执行，return 是不能中断的，可以通过 throw 来跳转至 catch 实现中断

Q: 什么时候适合用 Promise 而不是传统回调函数？

• A: 当需要多次顺序执行异步操作的时候，例如，如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise

Q: Promise 是一种将异步转换为同步的方法吗？

• A: 完全不是。Promise 只不过是一种更良好的编程风格

Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程？

• A: 当你又需要调用一个异步任务的时候

异步函数

• 异步函数（async function）是ECMAScript 2017（ECMA-262）标准的规范
• 在 Promise 中我们编写过一个 Promise 函数：

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

• 然后用不同的时间间隔输出了三行文本：

print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

• 我们可以将这段代码变得更好看：

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

• 哈！这岂不是将异步操作变得像同步操作一样容易了吗！
• 这次的回答是肯定的，异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。
• 异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，只不过更便于程序员阅读。
• 处理异常的机制将用 try-catch 块实现：

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

• 如果 Promise 有一个正常的返回值，await 语句也会返回它：

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

• 程序会输出:

Return value