javascript异步编程，promise概念

javascript 异步编程

概述

• 采用单线程模式工作的原因： 避免多线dom操作同步问题，javascript的执行环境中负责执行代码的线程只有一个

内容概要

• 同步模式和异步模式
• 事件循环和消息队列
• 异步编程的几种方式
• Promise 异步方案、宏任务/微任务队列
• Generator异步方案、async/await语法糖

同步模式（synchronous）

• 复杂运算耗时较多时阻塞后面代码执行

异步模式（）

• 耗时任务用异步模式去处理 用回调函数
• 代码执行顺序混乱
• 异步同步说的是执行代码的线程是单线程

console.log('global begin')
setTimeout(function timer1 () {
    console.log('timer1 invoke')
}, 1800)
setTimeout(function timer2 () {
    console.log('timer2 invoke')
    setTimeout(function inner () {
        console.log('inner invoke')
    }, 1000)
}, 1000)
console.log('global end')

回调函数

• 所有异步编程方案的根基

promise概述

• promise 是 es6 提出的一个异步解决方案,比传统回调事件的写法更加合理更加强大,主要还是优雅
• promise 有 pending(等待中),fulfilled(已成功),rejected(已失败),只有异步操作的结果才能够将状态改变,且只会有 pending->fulfilled 或者 pending->rejected,只要状态改变,会一直保持这个结果
• promise的回调函数都会被挂入到回调队列中
• then方法会返回一个全新的promise对象
• 每一个then方法都是在为上一个then返回的promise添加状态
• 前面then方法中的回调函数的返回值都会作为后面then方法的参数
• 如果回调函数返回的是promise，那么后面then方法的回调会等待她的结束

const p = new Promise((resolve, reject) => {
    if (true) {
        resolve("成功"); //将状态由pending->fulfilled
    } else {
        reject("失败"); //将状态由pending->rejected
    }
});
console.log(p);

promise 基本方法

// promise 方式 ajax

function ajax(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url);
        xhr.responseType = 'json';
        xhr.onload = function(){
            if(this.status  === 200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        }
        xhr.send();
    })
}

ajax("./package.json").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})
ajax("./1.json").then(res=>{
    console.log(res);
}).catch(err=>{
    console.log(err);
})

promise 静态方法

• resolve 返回一个成功的promise对象
• reject 快速创建一个一定是失败的promise对象

function ajax(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url);
        xhr.responseType = 'json';
        xhr.onload = function(){
            if(this.status  === 200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        }
        xhr.send();
    })
}
// Promise.resolve("成功").then(res=>{
    console.log(res);
});//等价于 new Promise



var promise = ajax("/aa");
var promise2 =  Promise.resolve(promise)
// promise === promise2

并行执行

• all
• race

// promise 并行执行
function ajax(url){
    return new Promise(function(resolve,reject){
        var xhr = new XMLHttpRequest();
        xhr.open('GET',url);
        xhr.responseType = 'json';
        xhr.onload = function(){
            if(this.status  === 200){
                resolve(this.response);
            }else{
                reject(new Error(this.statusText));
            }
        }
        xhr.send();
    })
}
//all  等待所有

var promiseAll = Promise.all([
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package.json"),
    ajax("./package1.json")
]).then(res=>{
    console.log(res)// 所有成功才会执行
}).catch(err=>{
    console.log(err);//任何一个失败都会执行
});


//race 只等待第一个结束的任务
Promise.race([
    ajax("./package.json?a=1"),
    ajax("./package.json?a=2"),
    ajax("./package.json?a=3"),
    ajax("./package.json?a=4"),
    ajax("./package.json?a=5"),
    ajax("./package.json?a=6"),
    ajax("./package.json?a=7"),
    ajax("./package.json?a=8"),
    ajax("./package.json?a=9")
]).then(res=>{
    console.log(res);//返回第一个成功的
}).catch(err=>{
    console.log(err);//返回第一个失败的
})

执行时序

• promise 没有任何异步操作任然会执行异步回调
• promise 是微任务不会重新排队本轮调用结束的末尾去执行
• setTimeout等大多数api都是宏任务都需要重新排队

console.log("A");

setTimeout(function(){
    console.log("B")
},0)

Promise.resolve().then(res=>{
    console.log("C");

    setTimeout(function(){
       console.log("D")
    },0)
})

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

    resolve("ok");
}).then(res=>{
    console.log("F");
});

console.log("G")
// A E G C F B D