设为首页 加入收藏

TOP

JS异步解决方案(一)
2019-09-17 19:09:40 】 浏览:52
Tags:异步 解决方案

  前言

    异步最早的解决方案是回调函数,如ajax,事件的回调,setInterval/setTimeout中的回调。但是回调函数有回调地狱的问题;

    为了解决回调地狱的问题,社区提出了Promise解决方案,ES6将其写进了语言标准。Promise一定程度上解决了回调地狱的问题,但是Promise也存在一些问题,如错误不能被try catch,而且使用Promise的链式调用,其实并没有从根本上解决回调地狱的问题,只是换了一种写法。

    ES6中引入 Generator 函数,Generator是一种异步编程解决方案,Generator 函数是协程在 ES6 的实现,最大特点就是可以交出函数的执行权,Generator 函数可以看出是异步任务的容器,需要暂停的地方,都用yield语句注明。但是 Generator 使用起来较为复杂。

    ES7又提出了新的异步解决方案:async/await,async是 Generator 函数的语法糖,async/await 使得异步代码看起来像同步代码,异步编程发展的目标就是让异步逻辑的代码看起来像同步一样。

  同步和异步

  关于同步和异步的概念,这里给出阮一峰老师的文章参考。其中也不乏一些异步的解决办法例子,如《js异步编程的4种方法》《异步操作概述》

   异步解决方案

  回调函数

1 // node读取文件
2 fs.readFile('url', 'utf-8', function(err, data) {
3   // code
4 });

   使用的场景有:ajax请求,事件回调函数,Node API,定时器等。

   优点: 简单。 缺点: 异步回调嵌套会导致代码难以维护,并且不方便统一处理错误,不能 try,catch 和存在回调地狱问题。

// 回调地狱问题,以读取A文本内容,再根据A文本内容读取B再根据B的内容读取C..为例
fs.readFile('A', 'utf-8', function(err, data) {
    fs.readFile('B', 'utf-8', function(err, data) {
        fs.readFile('C', 'utf-8', function(err, data) {
            fs.readFile('D', 'utf-8', function(err, data) {
                // code
            });
        });
    });
});

    Promise

  Promise 一定程度上解决了回调地狱的问题,Promise 最早由社区提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。《ECMAScript 6 入门》

  我们来观察一下Promise是如何解决回调地狱问题的。

function read(url) {
  return new Promise((resolve, reject) => {
       fs.readFile(url, 'utf-8', function(err, data) {
           if (err)  reject(err);
           resolve(data);
       });
  });
}
read('A').then(data => {
    return read('B');
}).then(data => {
    return read('C');
}).then(data => {
    return read('D');
}).catch(err => {
console.log(err);
});

    promise的优点: 1.一旦状态改变,就不会再变,任何时候都可以得到这个结果。2.可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数

         promise的缺点:1.无法取消 Promise。 2.当处于pending状态时,无法得知目前进展到哪一个阶段。 3.错误不能被 trycatch

         这里举一个在promise之前,读取A,B,C三个文件内容,都读取成功后,再输出最终的结果例子。依赖于发布订阅模式

let pubsup = {
  arry: [],
  emit: function() {
    this.arry.forEach(fn => fn());
  },
  on: function(fn) {
     this.arry.push(fn);
  }
};
let data = [];
pubsub.on(() => {
  if (data.length == 3) {
    console.log(data);
  }
});
fs.readFile('A', 'utf-8', function(err, data) {
  data.push(data);
  pubsup.emit();
});
fs.readFile('B', 'utf-8', function(err, data) {
  data.push(data);
  pubsup.emit();
});
fs.readFile('C', 'utf-8', function(err, data) {
  data.push(data);
  pubsup.emit();
});

顺便提一下朴灵的深入浅出nodejs里面介绍不同场景下异步获取数据进行操作的实践,非常值得看。

Promise给我们提供了 Promise.all 的方法,对于这个需求,我们可以使用 Promise.all 来实现。

/**
 * 将 fs.readFile 包装成promise接口
 */
function read(url) {
  return new Promise((resolve, reject) => {
    fs.readFile(url, 'utf-8', function(err, data) {
       if (err) reject(err);
       resolve(data);
    });
  });
}
/** 
 *  Promise.all 可以实现多个异步并行执行,同一时刻获取最终结果的问题
 */
Promise.all([
  read(A),
  read(B),
  read(C)
]).then(data => {
  console.log(data);
}).catch(err => console.log(err));

    Generator

        Generator 函数是 ES6 提供的一种异步编程解决方案,整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。

        Generator 函数一般配合 yield 或 Promise 使用。Generator函数返回的是迭代器。对生成器和迭代器不了解的同学参考下阮一峰的ES6入门

首页 上一页 1 2 下一页 尾页 1/2/2
】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
上一篇Command failed: git -c core.lon.. 下一篇全面分析前端的网络请求方式

最新文章

热门文章

Hot 文章

Python

C 语言

C++基础

大数据基础

linux编程基础

C/C++面试题目