javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > JavaScript异步编程

一文带你掌握JavaScript异步编程的五种方式

作者：程序员小寒

异步可以理解为把一个任务分成了两段,先执行第一段,转而去执行其它任务,等准备完毕后,再回过头来执行第二段, 本文主要来和大家聊聊JavaScript异步编程的五种方式,感兴趣的可以了解下

1、什么是异步？

异步可以理解为把一个任务分成了两段，先执行第一段，转而去执行其它任务，等准备完毕后，再回过头来执行第二段。

比如发一个 http 请求，第一段就是创建 XMLHttpRequest 对象，做好请求配置后向后端发送请求，然后就去执行其他任务(其它 js 代码)了，第二段就是拿到后端响应后，执行对应的回调函数。

这种不连续的执行，叫做异步，反之，连续的执行，叫做同步。

2、高阶函数

在 js 中，函数是一等公民。所谓一等公民，就是指函数能和数据类型一样，可以赋值给变量，也可以作为函数的参数和返回值。而传入的参数中或者返回值中带有函数的，就被称为高阶函数。

3、高阶函数的作用

3.1 可以批量生成函数

function isType(type) {
  return (obj) => {
    return Object.prototype.toString.call(obj) === `[object ${type}]`;
  };
}

const isFunc = isType("Function");
const isBoo = isType("Boolean");

通过高阶函数isType，可以生成不同类型的判断函数，判断各种对象类型。

3.2 可以用于多次调用才执行的函数

function after(time, callback) {
  let count = 0;
  return function() {
    if (++count === time) {
      callback.apply(this, arguments);
    }
  };
}
const f = after(3, function() {
  console.log("callback");
});
f();

after函数的作用是，在调用f函数三次之后，才会执行回调函数callback。

4、异步编程的五种实现方式

4.1 回调函数

回调函数是指将异步的第二段放在回调函数里面，等准备完毕后，执行回调。

const fs = require("fs");
fs.readFile("./1.txt", "utf8", function(err, data) {
  console.log(err, data);
});

回调函数的问题：

1.异常处理麻烦

异步代码不能用 try catch 捕获异常，所以如果出错了要向回调函数传入异常供调用者判断。比如在 nodejs 中，对异常处理有一个约定，会将异常作为回调的第一个参数返回，如果为 null 则表示没有出错。

2.容易形成回调地狱

异步多级依赖的情况下代码会嵌套的很深，不利于阅读和维护。

const fs = require("fs");
fs.readFile("./1.txt", "utf8", function(err1, result1) {
  fs.readFile(result1, "utf8", function(err2, result2) {
    fs.readFile(result2, "utf8", function(err3, result3) {
      console.log(result3);
    });
  });
});

4.2 事件发布/订阅模型

发布/订阅是一种设计模式，它依赖于一个事件调度中心，先注册事件名和回调(on)，然后可以主动触发(emit)。

const EventEmitter = require("events");
// eve为事件调度中心
const eve = new EventEmitter();
eve.on("first", function() {
  console.log("first");
});
eve.emit("first");

4.3 Promise

Promise 本意是承诺，在程序中的意思就是承诺我过一段时间后给你一个结果，而过一段时间指的就是异步操作，比如网络请求、定时器，读取文件等。

const p = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("success");
  }, 1000);
});
p.then((result) => {
  // 1秒后打印success
  console.log(result);
});

4.4 Generator/yield

Generator函数是ES6提供的一种异步编程解决方案。

语法上：可以将它理解为一个状态机，其内部封装了多种状态。执行Generator函数会返回一个遍历器对象，可以依次迭代Generator函数内部的每一个状态，也被称为迭代器。

1.Generator的使用

function *test() {
    const first = yield 1
    console.log(first)
    const second = yield 2
    console.log(second)
}
const it = test()
console.log(it.next())
console.log(it.next('first'))
console.log(it.next('second'))
// { value: 1, done: false }
// first
// { value: 2, done: false }
// second
// { value: undefined, done: true }

注意：第一次调用next传递参数没有意义，done的值为false表示函数调用结束了

形式上，Generator函数相对于普通函数而言，多了两个特性。一是function 关键字和函数名之间有一个星号，函数内部使用yield表达式，定义不同的内部状态。yield的意思是产出，可以将状态传递出去。

2.CO

co 是一个为nodejs和浏览器打造的基于生成器的流程控制工具，借助Promise，可以使用更加优雅的方式编写非阻塞代码。

const fs = require('fs')
function readFile(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, 'utf8', (err, data) => {
            err ? reject(err) : resolve(data)
        })
    })
}
/** 文件1.txt里面的内容是2.txt 
 *  文件2.txt里面的内容是222
*/
function *read() {
    const filename = yield readFile('1.txt')
    const result = yield readFile(filename)
    return result
}
co(read).then(result => {
    console.log(result)
}).catch(err => {
    console.log(err)
})
// 最终打印222

co 实现原理如下：

// co实现原理
function co(gen) {
    const it = gen()
    return new Promise((resolve, reject) => {
        !(function next(nextValue) {
            const { value, done } = it.next(nextValue)
            if (!done) {
                value.then(next, reject)
                
            } else {
                resolve(value)
            }
        })()
    })
}

4.5 async/await

async/await 是 ES7 的语法，是js异步编程的终极解决方案。可以理解为是Promise+Generator的语法糖，可以轻松做到Generator和co所做到的工作。

const fs = require('fs')
function readFile(filename) {
    return new Promise((resolve, reject) => {
        fs.readFile(filename, 'utf8', (err, data) => {
            err ? reject(err) : resolve(data)
        })
    })
}
async function read() {
    const filename = await readFile('1.txt')
    const result = await readFile(filename)
    return result
}
read().then(result => {
    console.log(result)
})

优点：

缺点：

到此这篇关于一文带你掌握JavaScript异步编程的五种方式的文章就介绍到这了,更多相关JavaScript异步编程内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文