我的网站开发技术经验总结 我的网站开发技术经验总结
首页

fangdown

我的网站开发技术经验总结
首页
  • 大前端

  • 基础

    • js

    • css

    • ES6

      • 说说对模块化的理解
      • 说说ES6中对象新增了哪些扩展
      • 说说ES6中函数新增了哪些扩展
      • ES6中数组的常用方法
      • 说说ES6中新增的Set、Map的区别
      • 说说ES6中Decorator的理解
      • 说说ES6中Generator的应用
        • 是什么
          • 特性
        • 怎么用
          • next运行逻辑
        • 异步解决方案比较
          • 回调函数
          • Promise
          • generator
          • async/await
          • 区别
        • FAQ
      • 说说ES6中Promise的常用方法及原理
      • 说说ES6中Proxy的理解
      • 说说var、let、const之间的区别
  • 框架

  • 情商

  • 算法

  • 网络

  • 千锤百炼
  • 基础
  • ES6
fangdown
2021-08-19
目录

说说ES6中Generator的应用

# 是什么

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

# 特性

  • funtion* name(){} 星号
  • 函数内部使用yield,定义不同的状态

# 怎么用

# next运行逻辑

  • 遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
  • 下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式
  • 如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
  • 如果该函数没有return语句,则返回的对象的value属性值为undefined
function* foo(x) {
  var y = 2 * (yield (x + 1));
  console.log('y',y)
  var z = yield (y / 3);
  console.log('z',z)
  return (x + y + z);
}
var res = foo(5)
b.next()  // 6
b.next(12) // 24
b.next(13) // 13
x // 5
y // 24
z // 13

# 异步解决方案比较

  • 回调函数
  • Promise
  • Generator
  • async/await

# 回调函数

fs.readFile('/etc/fstab', function (err, data) {
  if (err) throw err;
  console.log(data);
  fs.readFile('/etc/shells', function (err, data) {
    if (err) throw err;
    console.log(data);
  });
});

# Promise

const fs = require('fs');

const readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) return reject(error);
      resolve(data);
    });
  });
};

readFile('/etc/fstab').then(data =>{
    console.log(data)
    return readFile('/etc/shells')
}).then(data => {
    console.log(data)
})

# generator

const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

# async/await

const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

# 区别

  • 回调函数:嵌套较多
  • Promise:解决嵌套, 链式调用,代码冗长
  • generator: 编写非主流,需要next调用
  • async/await: generator的语法糖,终极解决

# FAQ

// redux-saga
import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;
#ES6
上次更新: 2021/12/19, 18:05:42
说说ES6中Decorator的理解
说说ES6中Promise的常用方法及原理

← 说说ES6中Decorator的理解 说说ES6中Promise的常用方法及原理→

最近更新
01
多分支修复撞车的问题
05-01
02
如何成为架构师
01-23
03
服务器部署全过程
11-23
更多文章>
Theme by Vdoing | Copyright © 2019-2026 fangdown | 粤ICP备19079809号
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式