js异步问题 --- 前端

在JavaScript中，所有代码都是单线程执行的。 // 浏览器需要操作dom,如果是多线程并发会导致浏览器不知道该执行哪条指令

由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。异步执行可以用回调函数实现：

ajax是一个典型的异步函数;

request.onreadystatechange = function () {
    if (request.readyState === 4) {
        if (request.status === 200) {
            return success(request.responseText);
        } else {
            return fail(request.status);
        }
    }
}

实际使用中,由于会有多个回调层层嵌套,导致代码的可读性,维护行,美观性不高,因此ES6规范promis (js进行异步编程的新的解决方案)，解决了以上痛点。

promise

从语法上来说：promise是一个构造函数

从功能上说：promise对象用来封装一个异步操作并可以获取其结果

Promise是一个构造函数，构造函数的参数是一个函数即excutor（同步函数），该函数用来修改promise的状态可以是pedding->resolve成功，pedding->reject失败

// promise 初始状态为 pedding , 能且只能转换为 resolve:成功状态和 reject：失败状态一个promise对象只能改变一次

然后可以执行.then()函数用来处理成功或者失败的回调

// ajax函数将返回Promise对象:
function ajax(method, url, data) {
    var request = new XMLHttpRequest();
    return new Promise(function (resolve, reject) {
        request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    resolve(request.responseText);
                } else {
                    reject(request.status);
                }
            }
        };
        request.open(method, url);
        request.send(data);
    });
}

var p = ajax('GET', '/api/categories');
p.then(function (text) { // 如果AJAX成功，获得响应内容
　　consolo.log(text)
}).catch(function (status) { // 如果AJAX失败，获得响应代码
consolo.log( 'ERROR: ' + status )
});

promise如何进行串联的多个任务操作

（1）promise的then()返回一个新的promise，可以实现then的链式调用

（2）通过then的链式调用串联多个同步/异步任务

除了串行执行若干异步任务外，Promise还可以并行执行异步任务。

promise.all

promise可以将多个promise实例包裹成一个新的promise实例.同时,成功和失败的返回值是不同的:

成功时,返回一个结果数组,失败时,返回最先失败的reject失败状态的值.

promise.resolve(x) 可以视为 new promise(resolve => resolve(x) )

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

async

字面意思来理解。async 是“异步”的简写，而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
await 只能出现在 async 函数中。
async 函数返回的是一个 Promise 对象。如果在函数中return 一个值，async 会把这个值通过 Promise.resolve() 封装成 Promise 对象。

输出 :