目 录CONTENT

文章目录

JS中异步处理方案

俊阳IT知识库
2023-01-05 / 0 评论 / 0 点赞 / 351 阅读 / 2,710 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2023-01-05,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。
广告

文章已同步至掘金:https://juejin.cn/post/6844903896486264845
欢迎访问😃,有任何问题都可留言评论哦~

本章介绍三种异步处理方案:

  • 回调函数(callback)
  • promise
  • async/await

如果想要深入了解 promisegenerator+coasync/await 的话,建议参考我的这篇文章《深入理解 promise、generator+co、async/await 用法》

回调函数(callback)

回调函数应该属于最简单粗暴的一种方式,主要表现为在异步函数中将一个函数进行参数传入,当异步执行完成之后执行该函数

话不多说,上代码:

// 有三个任务console.log(1)console.log(2)console.log(3)
// 过5s执行任务1,任务1执行完后,再过5s执行任务2.....
window.setTimeout(function(){
	console.log(1)
	window.setTimeout(function(){
		console.log(2)
		window.setTimeout(function(){
			console.log(3)
		},5000)
	},5000)
},5000)

看出这种方式的缺点了吗?没错,试想,如果再多几个异步函数,代码整体的维护性,可读性都变的极差,如果出了bug,修复的排查过程也变的极为困难,这个便是所谓的 回调函数地狱

promise

promise简单的说就是一个容器,里面保存着某个未来才会结束的时间(通常是一个异步操作)的结果。从语法上说,promise就是一个对象,从它可以获取异步操作的消息。promise提供统一的API,各种异步操作都可以用同样的方法处理。

如何理解:

  • 没有异步就不需要promise
  • promise本身不是异步,只是我们去编写异步代码的一种方式

promise有所谓的 4 3 2 1

4大术语
一定要结合异步操作来理解
既然是异步,这个操作需要有个等待的过程,从操作开始,到获取结果,有一个过程的

  • 解决(fulfill)指一个 promise 成功时进行的一系列操作,如状态的改变、回调的执行。虽然规范中用 fulfill 来表示解决,但在后世的 promise 实现多以 resolve 来指代之
  • 拒绝(reject)指一个 promise 失败时进行的一系列操作
  • 终值(eventual value)所谓终值,指的是 promise 被解决时传递给解决回调的值,由于 promise 有一次性的特征,因此当这个值被传递时,标志着 promise 等待态的结束,故称之终值,有时也直接简称为值(value)
  • 据因(reason)也就是拒绝原因,指在 promise 被拒绝时传递给拒绝回调的值

3种状态
在异步操作中,当操作发出时,需要处于等待状态
当操作完成时,就有相应的结果,结果有两种:

  • 成功了
  • 失败了

一共是3种状态,如下:

  • 等待态(Pending (也叫进行态)
  • 执行态(Fulfilled)(也叫成功态)
  • 拒绝态(Rejected) (也叫失败态)

js-async-solution-1

针对每一种状态,有一些规范:

等待态(Pending)
处于等待态时,promise 需满足以下条件:

  • 可以迁移至执行态或拒绝态

执行态(Fulfilled)
处于执行态时,promise 需满足以下条件:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的终值

拒绝态(Rejected)
处于拒绝态时,promise 需满足以下条件:

  • 不能迁移至其他任何状态
  • 必须拥有一个不可变的据因

2种事件
针对3种状态,只有如下两种转换方向:

  • pending –> fulfilled
  • pendeing –> rejected

在状态转换的时候,就会触发事件:

  • 如果是pending –> fulfiied,就会触发onFulFilled事件
  • 如果是pendeing –> rejected,就会触发onRejected事件

在调用resolve方法或者reject方法的时候,就一定会触发事件

需要注册onFulFilled事件 和 onRejected事件
针对事件的注册,Promise对象提供了then方法,如下:
promise.then(onFulFilled,onRejected)

针对 onFulFilled,会自动提供一个参数,作为终值(value)
针对 onRejected,会自动提供一个参数,作为据因(reason)

1个对象
promise

注:只有异步操作的结果,可以决定当前是哪一种状态,任何其他的操作都无法改变这个状态

简单来讲,就还是promise中有着三种状态pending,fulfilled,rejected。在代码中我们可以控制状态的变更

new Promise(function(resolve,reject){
	console.log("pending");
	console.log("pending");
	resolve();
	reject();
})

创建一个Promise对象需要传入一个函数,函数的参数是resolve和reject,在函数内部调用时,就分别代表状态由pending=>fulfilled(成功),pending=>rejected(失败)

一旦promise状态发生变化之后,之后状态就不会再变了。比如:调用resolve之后,状态就变为fulfilled,之后再调用reject,状态也不会变化

在创建promise对象,只需要根据需求,转换状态即可。无非就是调用两个函数:

  • resolve,传递value
  • reject,传递reason

Promise对象在创建之后会立刻执行,因此一般的做法是使用一个函数进行包装,然后return一个promise对象

function betray(){
	return new Promise(function(resolve,reject){
		...//异步操作
	})
}

在使用时可以通过promise对象的内置方法then进行调用,then有两个函数参数,分别表示promise对象中调用resolve和reject时执行的函数

function betray(){
	return new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve();
		},1000)
	})
}


betray().then(function(){
	...//对应resolve时执行的逻辑
},function(){
	...//对应reject时执行的逻辑
})

也可以用 catch 来执行失败态

catch方法,用于注册 onRejected 回调

在这里要明白两件事情:

  • catch其实是then的简写,then(null,callback)
  • then方法调用之后,仍然返回的是promise对象,所以可以链式调用

使用如下:

betary().then(res=>...//对应resolve时执行的逻辑).catch(err=>...//对应reject时执行的逻辑)

可以使用多个then来实现链式调用,then的函数参数中会默认返回promise对象

betray().then(function(){
	...//对应resolve时执行的逻辑
},function(){
	...//对应reject时执行的逻辑
})
.then(function(){
	...//上一个then返回的promise对象对应resolve状态时执行的逻辑
},function(){
	...//上一个then返回的promise对象对应reject状态时执行的逻辑
})

使用promise来解决回调地狱的做法就是使用then的链式调用

function fnA(){
	return new Promise(resolve=>{
		...//异步操作中resolve
	})
}
function fnB(){
	return new Promise(resolve=>{
		...//异步操作中resolve
	})
}
function fnC(){
	return new Promise(resolve=>{
		...//异步操作中resolve
	})
}

fnA()
.then(()=>{
	return fnB()
})
.then(()=>{
	return fnC()
})

特点是:

  • then方法通常是表示异步操作成功时的回调,也可以用catch方法表示异步操作失败时的回调
  • 在调用的时候then在前后,catch在后
  • then方法可以调用多次,前一个then的返回值,会作为后一个then的参数
  • 支持链式调用

async/await

async、await是什么?

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么);

await得到Promise对象之后就等待Promise接下来的resolve或者reject。

async、await解决了什么?

传统的回调地狱式写法:

getData(a=>{
	getMoreData(a,b=>{
		getMoreData(b,c=>{
			console.log(c)
		});
	});
});
//不行了,再多写要迷了

Promise改进后的写法:

getData()
.then(a=>getMoreData(a))
.then(b=>getMoreData(b))
.then(c=>getMoreData(c))

async/await改进后:

(async()=>{
	const a = await getData;
	const b = await.getMoreData(a);
	const c = await.getMoreData(b);
	const d = await.getMoreData(c);
})();

async、await写法

先来看看同步写法:

console.log(1);

setTimeout(function () {
  console.log(2);
}, 1000);

console.log(3);

输出结果:

1
3
2

可以看到输出的顺序并不是我们代码中所写的那样,下面来看下async、await是如何解决这个问题的

(async function () {

  console.log(1);

  await new Promise(function (resolve, reject) { 
    setTimeout(function () {
      console.log(2);
      resolve();
    }, 1000);
  });

  console.log(3);

}())

输出结果:

1
2
3

可以看到这种写法的输出已经符合了我们的预期

async 的定义:

  • async函数会返回一个Promise对象
  • 如果async函数中是return一个值,这个值就是Promise对象中resolve的值
  • 如果async函数中是throw一个值,这个值就是Promise对象中reject的值

await 的定义:

  • await只能在async里面
  • await后面要跟一个promise对象

常规的promise对象会被js先暂存到eventloop(事件队列)中,因为js是单线程执行的,等执行栈空了之后,才会将事件队列中的事件取出放入执行栈中执行

上述代码中先是将整段代码改造成了一个async(async可以用于任何函数)函数,然后又将setTimeOut改造成了一个Promise对象


使用第三方Promise库

下面简单介绍一下第三方的Promise库

对开发中使用promise进行小结:

  • 没有异步,就不需要promise
  • 不使用promise,其实也是可以解决异步编程的问题。使用promise,会使异步的编码变得更加优雅,功能会更强
  • 在进行promise编程的使用,有如下两个场景:
    • 直接使用别人封装好的promise对象,比如fetch、axios
    • 需要自己封装promise对象

注意:axios和fetch必须使用promise方式,如:

js-async-solution-2

针对自己封装promise对象,又可以有如下两种方式:

  • 自己封装
  • 可以使用第三方的promise库

比如,针对第三方的promise库,有两个知名的库:

  • bluebird
  • q.js

可以利用bluebird 和 q.js 快速的生成promise对象。

以bluebird为例,在服务端演示其用法。

第一步:安装
js-async-solution-3

第二步:使用

js-async-solution-4

^_<

0

评论区