当前位置:首页 > 编程教程 > javascript技术文章 > 详解ES6中的三种异步解决方案

深入理解ES6中的三种异步解决方式

  • 发布时间:
  • 作者:码农之家
  • 点击:80

这篇文章主要知识点是关于ES6、异步、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript从入门到精通
  • 类型:JavaScript大小:92.2 MB格式:PDF作者:明日科技
立即下载

详解ES6中的三种异步解决方案

前置知识准备

  1. Generator 函数 执行会返回一个迭代器(Iterator), 在迭代器上可以调用  next() 方法, 执行下一个 yield  或 return
  2. 调用  next() 方法,会返回一个对象 {value: res, done: false} , value 的值 为 yield 之后表达式的值,done 的值 表示迭代器,是否已经执行完毕(最后一个yield  或 return )
  3. 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 相关电子书
学习笔记
网友NO.525130

ES6 javascript的异步操作实例详解

本文实例讲述了ES6 javascript的异步操作。分享给大家供大家参考,具体如下: 异步编程对 JavaScript 语言太重要。 Javascript 语言的执行环境是“ 单线程” 的, 如果没有异步编程, 根本没法用, 非卡死不可。 ES6 诞生以前, 异步编程的方法, 大概有下面四种。 ① 回调函数 ② 事件监听 ③ 发布 / 订阅 ④ Promise 对象 ES6 将 JavaScript 异步编程带入了一个全新的阶段, ES7 的Async函数更是提出了异步编程的终极解决方案。 一、基本概念 1. 异步 所谓 " 异步 ",简单说就是一个任务分成两段, 先执行第一段, 然后转而执行其他任务, 等做好了准备, 再回过头执行第二段。 比如, 有一个任务是读取文件进行处理, 任务的第一段是向操作系统发出请求, 要求读取文件。 然后, 程序执行其他任务, 等到操作系统返回文件,再接着执行任务的第二段( 处理文件……

网友NO.221274

详解ES6 系列之异步处理实战

前言 我们以查找指定目录下的最大文件为例,感受从 回调函数 - Promise - Generator - Async 异步处理方式的改变。 API 介绍 为了实现这个功能,我们需要用到几个 Nodejs 的 API,所以我们来简单介绍一下。 fs.readdir readdir 方法用于读取目录,返回一个包含文件和目录的数组。 fs.stat stat 方法的参数是一个文件或目录,它产生一个对象,该对象包含了该文件或目录的具体信息。此外,该对象还有一个 isFile() 方法可以判断正在处理的到底是一个文件,还是一个目录。 思路分析 我们基本的实现思路就是: 用 fs.readdir 获取指定目录的内容信息 循环遍历内容信息,使用 fs.stat 获取该文件或者目录的具体信息 将具体信息储存起来 当全部储存起来后,筛选其中的是文件的信息 遍历比较,找出最大文件 获取并返回最大文件 然后我们直接上代码吧。 回调函数 var fs = req……

网友NO.397210

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(默认)和……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com