深入理解ES6中的三种异步解决方式
- 发布时间：
- 作者：码农之家
- 点击：80
这篇文章主要知识点是关于ES6、异步、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
详解ES6中的三种异步解决方案
前置知识准备
- Generator 函数 执行会返回一个迭代器(Iterator), 在迭代器上可以调用 next() 方法, 执行下一个 yield 或 return
- 调用 next() 方法，会返回一个对象 {value: res, done: false} , value 的值 为 yield 之后表达式的值，done 的值 表示迭代器，是否已经执行完毕（最后一个yield 或 return ）
- next() 方法，可以传入一个值，做为前一个yield 表达式的返回值
有了这些知识，可以把Promise 对象 做一个的 yield 的值，配合一个执行器，来处理异步操作
方式一： Generator + Promise + 执行器
const fs = require('fs')
// Promise 版的readFile
const readFile = function (fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data){
if (err) return reject(error);
resolve(data);
})
})
}
const gen = function * () {
let f1 = yield readFile('a.txt');
let f2 = yield readFile('b.txt');
console.log('F1--->', f1.toString());
console.log('F2--->', f2.toString());
}
// 基于 Generator 和 Promise 的自动执行器
function run(gen) {
let g = gen();
function next(data) {
let result = g.next(data);
if (result.done) return result.value;
result.value.then(function(data) {
next(data);
});
}
next();
}
run(gen);
执行器 中的 result.value 现在是一个Promise, 通过 then 方法拿到需要的结果，传下一次 next 方法，这样 let f1 = yield readFile('a.txt'); 就可以拿到值！
方式二：Generator + Thunk函数 + 执行器
const fs = require('fs')
// 把一个单一执行的函数 ，变成需要再次调用的函数，固定一部分参数
function thunkify(fn, obj = {}) {
return function () {
let args = Array.from(arguments);
return function (m) {
args.push(m)
return fn.apply(obj, args)
}
}
}
const readFile = thunkify(fs.readFile, fs);
const gen = function* () {
let f1 = yield readFile('a.txt');
let f2 = yield readFile('b.txt');
console.log('F1-->', f1.toString());
console.log('F2-->', f2.toString());
}
// 基于 Generator 和 Thunk函数的自动执行器
function run(fn) {
let gen = fn();
function next(err, data) {
let result = gen.next(data);
if (result.done) return 1;
result.value(next);
}
next();
}
run(gen);
这里的 Thunk 转换器，把原来的 fs.readFile 函数 转换成需要两次调用的函数 ，readFile 的执行结果，可以通过回调函数能参数传递出来，再传给 next 方法
方式三：基于 async 函数 和 await 的异步处理方式
const fs = require('fs')
// Promise 版的readFile
const readFile = function (fileName) {
return new Promise(function(resolve, reject) {
fs.readFile(fileName, function(err, data){
if (err) return reject(err);
resolve(data);
})
})
}
const asyncReadFile = async function () {
const f1 = await readFile('a.txt');
const f2 = await readFile('b.txt');
console.log(f1.toString());
console.log(f2.toString());
};
asyncReadFile();
readFile 函数 对比方式一没有大的变化 ，Generator 函数变成 了 async 函数，可见 这处方式 只是 方式一的一个语法糖，async 函数自带了执行器！
这个话题，还可以衍生出 yield 的更多用法 ，下次再写，欢迎关注我！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
javascript 相关电子书
学习笔记
<
1
>
ES6 javascript的异步操作实例详解
本文实例讲述了ES6 javascript的异步操作。分享给大家供大家参考，具体如下： 异步编程对 JavaScript 语言太重要。 Javascript 语言的执行环境是“ 单线程” 的， 如果没有异步编程， 根本没法用， 非卡死不可。 ES6 诞生以前， 异步编程的方法， 大概有下面四种。 ① 回调函数 ② 事件监听 ③ 发布 / 订阅 ④ Promise 对象 ES6 将 JavaScript 异步编程带入了一个全新的阶段， ES7 的Async函数更是提出了异步编程的终极解决方案。 一、基本概念 1. 异步 所谓 " 异步 "，简单说就是一个任务分成两段， 先执行第一段， 然后转而执行其他任务， 等做好了准备， 再回过头执行第二段。 比如， 有一个任务是读取文件进行处理， 任务的第一段是向操作系统发出请求， 要求读取文件。 然后， 程序执行其他任务， 等到操作系统返回文件，再接着执行任务的第二段（ 处理文件……
详解ES6 系列之异步处理实战
前言 我们以查找指定目录下的最大文件为例，感受从 回调函数 - Promise - Generator - Async 异步处理方式的改变。 API 介绍 为了实现这个功能，我们需要用到几个 Nodejs 的 API，所以我们来简单介绍一下。 fs.readdir readdir 方法用于读取目录，返回一个包含文件和目录的数组。 fs.stat stat 方法的参数是一个文件或目录，它产生一个对象，该对象包含了该文件或目录的具体信息。此外，该对象还有一个 isFile() 方法可以判断正在处理的到底是一个文件，还是一个目录。 思路分析 我们基本的实现思路就是： 用 fs.readdir 获取指定目录的内容信息 循环遍历内容信息，使用 fs.stat 获取该文件或者目录的具体信息 将具体信息储存起来 当全部储存起来后，筛选其中的是文件的信息 遍历比较，找出最大文件 获取并返回最大文件 然后我们直接上代码吧。 回调函数 var fs = req……
ES6的Fetch异步请求的实现方法
在前端的快速发展中，为了契合更好的设计模式，产生了Fetch框架，Fetch返回的信息比XMLHttpRequest更丰富。但它目前还不是一个标准，它支持大部分常用的http 请求和响应的标准。 一. 一个完整的post请求和响应的过程 var url = "/fetch"; fetch(url,{ method:"post", headers:{ "Content-type":"application/x-www-form-urlencoded" }, body:"name=luwenjing } }) .then(function (data) { return data.text(); }) .then(function(text){ console.log("请求成功，响应数据为:",text); }) .catch(function(err){ console.log("Fetch错误:"+err); }); （1）fetch的参数有两个，第一个是url即请求的处理路径； 第二个是初始化信息，包括以下几种： method：请求方法，常用的有get和post； headers：请求头信息，最常用的就是表单格式的数据：”Content-type”:”application/x-www-form-urlencoded”； mode：控制是否允许跨域。same-origin（同源请求）、no-cors（默认）和……