JavaScript的异步处理

Posted 2021-01-22 Heson

javascript语言的执行环境是"单线程"（single thread，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推）。

为了解决这个问题，Javascript语言将任务的执行模式分成两种：同步（Synchronous）和异步（Asynchronous）。

“同步模式" 就是上一段的模式，后一个任务等待前一个任务结束，然后再执行，程序的执行顺序与任务的排列顺序是一致的、同步的；"异步模式"则完全不同，每一个任务有一个或多个回调函数（callback），前一个任务结束后，不是执行后一个任务，而是执行回调函数，后一个任务则是不等前一个任务结束就执行，所以程序的执行顺序与任务的排列顺序是不一致的、异步的。

“异步模式" 非常重要。在浏览器端，耗时很长的操作都应该异步执行，避免浏览器失去响应，最好的例子就是Ajax操作。在服务器端，"异步模式"甚至是唯一的模式，因为执行环境是单线程的，如果允许同步执行所有http请求，服务器性能会急剧下降，很快就会失去响应。

回调

回调是 JS 中最原始，也是最古老的异步通知机制。

function asyncFn(callback) {
  // 利用setTimeout模拟异步
  setTimeout(function () {
    console.log('执行完毕');
    callback(); // 发通知
  }, 2000);
}

asyncFn(function () {
  console.log('我会在2s后输出');
});

事件监听

任务的执行不取决代码的顺序，而取决于某一个事件是否发生。

监听函数有：on，bind，listen，addEventListener，observe

还是以f1和f2为例。首先，为f1绑定一个事件（采用jquery写法）。
f1.on(‘done‘,f2);
上面代码意思是，当f1发生done事件，就执行f2。

发布订阅

promise

（1）promise对象是commonJS工作组提出的一种规范，一种模式，目的是为了异步编程提供统一接口。

（2）promise是一种模式，promise可以帮忙管理异步方式返回的代码。他讲代码进行封装并添加一个类似于事件处理的管理层。我们可以使用promise来注册代码，这些代码会在在promise成功或者失败后运行。

（3）promise完成之后，对应的代码也会执行。我们可以注册任意数量的函数再成功或者失败后运行，也可以在任何时候注册事件处理程序。

（4）promise有两种状态：1、等待（pending）；2、完成（settled）。

promise会一直处于等待状态，直到它所包装的异步调用返回/超时/结束。

（5）这时候promise状态变成完成。完成状态分成两类：1、解决（resolved）；2、拒绝（rejected）。

（6）promise解决（resolved）：意味着顺利结束。promise拒绝（rejected）意味着没有顺利结束。

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

（1）代码的 关键在于setTimeout()的调用。

（2）重要的是，他调用了函数resolve()和reject()。resolve()函数告诉promise用户promise已解决；reject()函数告诉promise用户promise未能顺利完成。

（3）另外还有一些使用了promise代码。注意then和catch用法，可以将他们想象成onsucess和onfailure事件的处理程序。

（4）巧妙地方是，我们将promise处理与状态分离。也就是说，我们可以调用p.then（或者p.catch）多少次都可以，不管promise是什么状态。

（5）promise是ECMAscript 6管理异步代码的标准方式，javascript库使用promise管理ajax，动画，和其他典型的异步交互。

简单的说，它的思想是：每一个异步任务返回一个promise对象，该对象有一个then方法，允许指定回调函数。

f1.then(f2);

Promise.all

 //使用场景，同时从不同地方请求多条数据时
    Promise.all([
        $.ajax({
            url:"1.txt"
        }),
        $.ajax({
            url:"2.txt"
        })
    ]).then(
        (data)=>{
            console.log(data)
        }
    )

generator

生成器函数 可以暂停

 //1.生成器函数  优点 先等待异步完成 再执行下面的代码
        //yield 后面的值给了下一个next() 
    function *show(){
        alert(1);
       let data= yield new Promise((resolve,reject)=>{
            setTimeout(() => {
                resolve(100);
            }, 5000);
        })
        console.log(data);
        alert(2);
    }
        //2.调用next() 完整
        //3.变量去接 生成器函数
    //生成器函数调用必须配合 .next
    let s=show();
    let p=s.next();
    console.log(p);
    console.log(p.value);
    let m= p.value.then((data)=>{
        s.next(data)
        console.log(data);
    })
    
   
    // p.value.then((data)=>{
    //     s.next(data);
    // })

    //参数  变量.next(参数) =>let 变量 =>yield
    //返回 yield()===> 变量.next() 

async/await

当前 JavaScript 中，处理异步的最佳方案。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。
async函数内部return语句返回的值，会成为then方法回调函数的参数。

 async function show() {
        alert(1);
        let data = await new Promise((resolve,reject)=>{
            //网络请求时间来决定的
            setTimeout(() => {
                resolve(100)
            }, 3000);
        })
        console.log(data)
        let Data = await new Promise((resolve,reject)=>{
            //网络请求时间来决定的
            setTimeout(() => {
                resolve({
                    name:"heson",
                    age:12
                })
            }, 3000);
        })
        console.log(Data)
        alert(2);
    }
    show();