Javascript异步执行结果获取的三种解决方案

栏目: JavaScript · 发布时间: 5年前

内容简介:js里的异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法这是最传统的方法了,也是最简单的,如下代码Promise是ES6里加入的新对象,它可以把一个异步执行的方法封装成支持同步操作的方法,结合 async/await 完美,下面说一下它是怎么封装一个方法的

js里的异步有时候很方便,有时候却很让人恼火,下面来总结一下异步执行结果获取的方法

回调

这是最传统的方法了,也是最简单的,如下代码

function foo(cb) {
  setTimeout(function() {
    cb(1); // 通过参数把结果返回
  }, 2000);
}

foo(function(result) { // 调用foo方法的时候,通过回调把方法返回的数据取出来
  console.log(result);
})

Promise

Promise是ES6里加入的新对象,它可以把一个异步执行的方法封装成支持同步操作的方法,结合 async/await 完美,下面说一下它是怎么封装一个方法的

function foo() {
  return new Promise((resolve, reject) => {
    setTimeout(function() {
      resolve(1); // 通过 resolve 参数把成功的结果返回
      // reject('error');  // 通过 reject 参数把错误信息返回
    }, 2000);
  })
}

// 调用
foo()
  .then(result => console.log(result))
  .catch(error => console.log(error));

从上面例子可以看出,Promise取值使用的是 .then() 函数,异常处理用的是 .catch() 函数

rxjs

rxjs 是一种设计思想的javascript语言的实现框架,rx原名是:ReactiveX

rx口号是万物皆是流,跟 java 里万物皆对象挺像的,它的api也全都是对流进行操作,写起来还是很爽的,下面看一下rxjs怎么封装一个异步执行操作

注意,用这货首先要安装它在自己的项目里,然后再引入依赖,如果是浏览器环境可以引入js

import { Observable } from 'rxjs';

function foo() {
  return new Observable((observe) => {
    setTimeout(function() {
      observe.next(1); // 通过 observe.next() 方法把成功的结果返回
      // observe.error('error');  // 通过 observe.error 方法把错误信息返回
    }, 2000);
  })
}

// 调用
foo()
  .subscribe(
    result => console.log(result),
    error => console.log(error)
  );

可以看到它跟Promise很像,就是变了几个参数名,不过它可比Promise强大多了

下面来说一下rxjs里的取消操作,没错请求还能取消,这骚操作也只有rxjs能实现了

import { Observable } from 'rxjs';

function foo() {
  return new Observable((observe) => {
    setTimeout(function() {
      observe.next(1); // 通过 observe.next() 方法把成功的结果返回
      // observe.error('error');  // 通过 observe.error 方法把错误信息返回
    }, 2000);
  })
}

// 调用,方法里2s后返回数据
const o = foo().subscribe(
  result => console.log(result),
  error => console.log(error)
);

// 设置一个定时器1s后取消订阅,这样console里就不会打印出结果了,这个请求也就被取消了
setTimeout(function() {
  o.unsubscribe(); // 取消订阅
}, 1000);

rxjs除了取消执行外,还有一个牛逼的功能,循环执行,对一个请求可以一直接收它返回的结果,看下下面的例子就明白了

import { Observable } from 'rxjs';

function foo() {
  return new Observable((observe) => {
    let count = 0;
    setInterval(function() {
      observe.next(count++); // 通过 observe.next() 方法把成功的结果返回
      // observe.error('error');  // 通过 observe.error 方法把错误信息返回
    }, 1000);
  })
}

// 调用
foo().subscribe(
  result => console.log(result),   // 这行会每隔1s打印一条数据
  error => console.log(error)
);

因为在 ReactiveX 里一切皆是流,所以也就有很多对流操作的api,比如 fliter , map 等,类似于java8里的 stream 的操作,下面看一下例子说明白了

import { Observable } from 'rxjs';
// 对流操作要引入操作类
import { map, filter } from 'rxjs/operators';

function foo() {
  return new Observable((observe) => {
    let count = 0;
    setInterval(function() {
      observe.next(count++); // 通过 observe.next() 方法把成功的结果返回
      // observe.error('error');  // 通过 observe.error 方法把错误信息返回
    }, 1000);
  })
}

// 调用
const o = foo();
o.pipe(
  filter((value: number) => value % 2 === 0),
  map((value: number) => value *= 2)
).subscribe(data => console.log(data));

原文链接:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Persuasive Technology

Persuasive Technology

B.J. Fogg / Morgan Kaufmann / 2002-12 / USD 39.95

Can computers change what you think and do? Can they motivate you to stop smoking, persuade you to buy insurance, or convince you to join the Army? "Yes, they can," says Dr. B.J. Fogg, directo......一起来看看 《Persuasive Technology》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

html转js在线工具
html转js在线工具

html转js在线工具