Java教程

学了那么久JavaScript还不知道异步怎么实现?

本文主要是介绍学了那么久JavaScript还不知道异步怎么实现?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

JavaScript中的异步编程

ES6 诞生以前,异步编程的方法,大概有下面四种。

回调函数、事件监听、发布/订阅、Promise 对象。

注意这里的Promise对象和ES6里的Promise其实不太一样,因为之前的Promise是由commonJS社区提出的Promise规范,用于统一处理异步回调,之后ECMAscript 6 才原生提供了 Promise 对象。

在ES6中,主要涉及到的异步有Promise对象,Generator函数和async函数。

所以本文就介绍这六种异步实现方法。

  • 回调函数
  • 事件监听
  • 发布/订阅
  • Promise 对象
  • Generator函数
  • async函数

1.回调函数

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

回调是作为参数传递给另一个函数并在其父函数完成后执行的函数。

回调函数是异步操作最基本的方法。以下代码就是一个回调函数的例子:

ajax(url, () => {
    // 处理逻辑
})

但是回调函数有一个致命的弱点,就是容易写出回调地狱(Callback hell)。假设多个请求存在依赖性,你可能就会写出如下代码:

ajax('xxxxxxx.json', function() {
  // doing something 1
  ajax('xxxxxxx.json', function() {
    // doing something 2
    ajax('xxxxxxx.json', function() {
      // doing something 3
      ajax('xxxxxxx.json', function() {
        // doing something 4
      });
    });
  });
});

这是是单纯的嵌套代码,如若再加上业务代码,代码可读性可想而知,如果是开发起来还好,但是后期的维护和修改的难度足以让人疯掉。这就是那个**JQuery时代的“回调地狱”**问题。

回调函数的优点是简单、容易理解和实现,缺点是不利于代码的阅读和维护,各个部分之间高度耦合,使得程序结构混乱、流程难以追踪(尤其是多个回调函数嵌套的情况),而且每个任务只能指定一个回调函数。

2.事件监听

另一种思路是采用事件驱动模式。

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

f1f2为例。首先,为f1绑定一个事件(这里采用的 jQuery 的写法)。

f1.on('done', f2);

上面这行代码给f1注册了done事件,当f1发生done事件,就执行f2。然后,对f1进行改写:

function f1() {
  setTimeout(function () {
    // ...
    f1.trigger('done');
  }, 1000);
}

上面代码中,f1.trigger('done')表示,执行完成后,立即触发done事件,从而开始执行f2

这种方法的优点是比较容易理解,可以绑定多个事件,每个事件可以指定多个回调函数,而且可以**“去耦合”(decoupling)**,有利于实现模块化。缺点是整个程序都要变成事件驱动型,运行流程会变得很不清晰。阅读代码的时候,很难看出主流程。

3.发布/订阅

事件完全可以理解成“信号”,如果存在一个“信号中心”,某个任务执行完成,就向信号中心“发布”(publish)一个信号,其他任务可以向信号中心“订阅”(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做”发布/订阅模式”(publish-subscribe pattern),又称“观察者模式”(observer pattern)。

发布订阅其实和事件监听非常相似,事件监听的on相当于就是订阅,事件的发生就是发布。

如果不太了解的可以看我的另一篇博客,观察者模式

但是观察者模式一般是用在同步任务中的,发布订阅模式则是异步。

// 主体
let subject = new Subjet();
// 像向体订阅getData通知
subject.subscribe('getData', function(data) {
  // do something...
});

// 获取数据方法
function getDate(params) {
  // do something...
  //   获取数据后主题发布getData通知
  subject.publish('getData');
}

4.Promise对象和then

Promise详细文档请阅读:阮一峰老师的ES6入门:Promise

为了解决“回调地狱”问题,提出了Promise对象,并且后来加入了ES6标准,Promise对象简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。

Promise的状态

Promise 异步操作有三种状态:pending(进行中)、fulfilled(已成功)和 rejected(已失败)。除了异步操作的结果,任何其他操作都无法改变这个状态。

Promise 对象只有:从 pending 变为 fulfilled 和从 pending 变为 rejected 的状态改变。只要处于 fulfilled 和 rejected ,状态就不会再变了即 resolved(已定型)。

因此,Promise 的最终结果只有两种。

  • 异步操作成功,Promise 实例传回一个值(value),状态变为fulfilled
  • 异步操作失败,Promise 实例抛出一个错误(error),状态变为rejected

Promise

首先,Promise 是一个对象,也是一个构造函数。

var f1 = function(resolve, reject) {
  // ... some code
 
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
}
const promise1 = new Promise(f1);

Promise构造函数接受一个回调函数f1作为参数,f1里面是异步操作的代码。然后,返回的promise1就是一个 Promise 实例。

Promise 新建后就会立即执行。

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

上面代码中,Promise 新建后立即执行,所以首先输出的是Promise。然后,then方法指定的回调函数,将在当前脚本所有同步任务执行完才会执行,所以resolved最后输出。

注意,调用resolvereject并不会终结 Promise 的参数函数的执行。

then

Promise 的设计思想是,所有异步任务都返回一个 Promise 实例。Promise 实例有一个then方法,用来指定下一步的回调函数。它的作用是为 Promise 实例添加状态改变时的回调函数。

then 方法接收两个函数作为参数,第一个参数是 Promise 执行成功时的回调,第二个参数是 Promise 执行失败时的回调,两个函数只会有一个被调用。

getJSON("/posts.json").then(function(json) {
  return json.post;
}).then(function(post) {
  // proceed
});

上面代码中,getJSON的异步操作执行完成,就会执行then的回调函数。

通过 .then 形式添加的回调函数,不论什么时候,都会被调用。

then方法会返回一个新的Promise实例(注意,不是原来那个Promise实例)。

当然也可以自己返回一个Promise对象,达到异步操作的逐步执行的效果。

getJSON("/post/1.json").then(function(post) {
  return getJSON(post.commentURL);
}).then(function(comments) {
  // 对comments进行处理
});

如果前一个回调函数返回的是Promise对象,这时后一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。因此可以采用链式写法,即then方法后面再调用另一个then方法。

catch

catch()方法是.then(null, rejection).then(undefined, rejection)`的别名,用于指定发生错误时的回调函数。

// 写法一
const promise = new Promise(function(resolve, reject) {
  try {
    throw new Error('test');
  } catch(e) {
    reject(e);
  }
});
promise.catch(function(error) {
  console.log(error);
});

// 写法二
const promise = new Promise(function(resolve, reject) {
  reject(new Error('test'));
});
promise.catch(function(error) {
  console.log(error);
});

上面代码中,promise抛出一个错误,就被catch()方法指定的回调函数捕获。注意,上面的两种写法是等价的。reject()方法的作用,等同于抛出错误。

一般来说,不要在then()方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise.then(function(data) { //cb
	// success
}).catch(function(err) {
	// error
});

上面代码中,第二种写法要好于第一种写法,理由是第二种写法可以捕获前面then方法执行中的错误,也更接近同步的写法(try/catch)。因此,建议总是使用catch()方法,而不使用then()方法的第二个参数。

跟传统的try/catch代码块不同的是,如果没有使用catch()方法指定错误处理的回调函数,Promise 对象抛出的错误不会传递到外层代码,即不会有任何反应。

5.Generator和yield

ES6 新引入了 Generator 函数,可以通过 yield 关键字,把函数的执行流挂起,为改变执行流程提供了可能,从而为异步编程提供解决方案。 基本用法

Generator 、yield

Generator 有两个区分于普通函数的部分:

  • 一是在 function 后面,函数名之前有个 * ;
  • 函数内部有 yield 表达式。

其中 * 用来表示函数为 Generator 函数,yield 用来定义函数内部的状态。

function* func(){
 console.log("one");
 yield '1';
 console.log("two");
 yield '2'; 
 console.log("three");
 return '3';
}

调用 Generator 函数和调用普通函数一样,在函数名后面加上()即可,但是 Generator 函数不会像普通函数一样立即执行,而是返回一个指向内部状态对象的指针,所以要调用遍历器对象Iterator 的 next 方法,指针就会从函数头部或者上一次停下来的地方开始执行。

next和return

next方法的作用就是,使当前的Generator 函数返回的Iterator对象从当前指向的状态继续执行,遇到yield或者return就会停止。

next ()函数也可以传入参数,next 传入参数的时候,该参数会作为上一步yield的返回值;如果不提供参数,那么上一步yield的返回值为undefined。

yield的返回值的定义就是x = yield '1';这段代码中x的值。但是它是作为上一步的yield的返回值,你需要尝试去理解。调用next函数 遇到yield会挂起,但是不是这个yield,而是上一个yield。

第一个yield没有上一个,所以第一个next的赋值其实是没有意义的。

return 方法提供参数时,返回该参数;不提供参数时,返回 undefined 。

function* func(){
    console.log("one");
    yield '1';
    console.log("two");
    yield '2'; 
    console.log("three");
    return '3';
   }
f=func();
console.log(f.next());
// one
// {value: "1", done: false}
 
console.log(f.next());
// two
// {value: "2", done: false}

console.log(f.next());
// three
// {value: "3", done: true}

console.log(f.next());
// {value: undefined, done: true}

console.log(f.return(1000));
// { value: 1000, done: true }

//完整运行结果
// one
// { value: '1', done: false }
// two
// { value: '2', done: false }
// three
// { value: '3', done: true }
// { value: undefined, done: true }
// { value: 1000, done: true }

第一次调用 next 方法时,从 Generator 函数的头部开始执行,先是打印了 one ,执行到 yield 就停下来,并将yield 后边表达式的值 ‘1’,作为返回对象的 value 属性值,此时函数还没有执行完, 返回对象的 done 属性值是 false。

第二次调用 next 方法时,同上步 。

第三次调用 next 方法时,先是打印了 three ,然后执行了函数的返回操作,并将 return 后面的表达式的值,作为返回对象的 value 属性值,此时函数已经结束,多以 done 属性值为true 。

第四次调用 next 方法时, 此时函数已经执行完了,所以返回 value 属性值是 undefined ,done 属性值是 true 。如果执行第三步时,没有 return 语句的话,就直接返回{value: undefined, done: true}

第五步调用return方法时,此时函数已经执行完了,本来返回 value 属性值是 undefined,但是return方法提供一个参数之后,就会返回这个参数,所以最后输出的value就是传入的1000

除了使用 next ,还可以使用 for… of 循环遍历 Generator 函数生产的 Iterator 对象

yield* 表达式

yield* 表达式表示 yield 返回一个遍历器对象,用于在 Generator 函数内部,调用另一个 Generator 函数。

这里就不过多描述了。

6.async和await

async

ES2017 标准引入了 async 函数,使得异步操作变得更加方便。和 Promise , Generator 有很大关联的。

async 函数是什么?一句话,它就是 Generator 函数的语法糖。

async function name([param[, param[, ... param]]]) { statements }
  • name: 函数名称。
  • param: 要传递给函数的参数的名称。
  • statements: 函数体语句。

async 返回值

async 函数返回一个 Promise 对象,可以使用 then 方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

await

await 操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。

[return_value] = await expression;

async 函数中可能会有 await 表达式,async 函数执行时,如果遇到 await 就会先暂停执行 ,等到触发的异步操作完成后,恢复 async 函数的执行并返回解析值。

await 关键字仅在 async function 中有效。如果在 async function 函数体外使用 await ,你只会得到一个语法错误

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

await 返回值

await根据后面不同表达式有不同的处理方式:

  • Promise 对象:await 会暂停执行,等待 Promise 对象 resolve,然后恢复 async 函数的执行并返回解析值。

  • 非 Promise 对象:直接返回对应的值。

正常情况下,await 命令后面是一个 Promise 对象,它也可以跟其他值,如字符串,布尔值,数值以及普通函数

function testAwait(){
    console.log("testAwait");
 }
 async function helloAsync(){
    await testAwait();
    console.log("helloAsync");
 }
 helloAsync();
 // testAwait
 // helloAsync

Promise,Generator函数,async函数理解

关于JavaScript的简单异步编程价绍就这些,说实话我自己看了很久,感觉Promise,Generator函数,async函数是层层递进的。

Promise比较简单,也是最常用的,主要就是将原来的用回调函数的异步编程方法转成用relsove和reject触发事件, 用then和catch捕获成功或者失败的状态执行相应代码的异步编程的方法。

Generator函数可以看成是一个分步函数,只有主动调用next() 才能进行下一步。

async函数相当于自执行的Generator函数,会自己不断的执行,遇到await等待返回结果,然后继续,和普通的同步写法相同,提供效率。

关于三者区别我也专门整理了一下,想了解的可以看阅读。

不能区分Promise,Generator函数,async函数可以进来看看

参考

https://www.ruanyifeng.com/blog/2015/04/generator.html

http://es6.ruanyifeng.com/#docs/promise

https://blog.csdn.net/aaaaaaliang/article/details/89555422

这篇关于学了那么久JavaScript还不知道异步怎么实现?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!