什么是异步?
我们知道JavaScript是单线程的,不像java等语言是多线程的,所以一般情况下,js代码是一行一行的执行的。但是某些时候需要用异步来提升性能,比如说一个网络请求需要服务端返回数据30s,js不可能一直等待服务器返回再执行其他代码,这时候js就会跳过这个过程,继续往下执行,直到没有代码要执行了,这时候后端返回数据了,js再接着执行返回数据之后的代码。这个过程就是一个异步
常见的异步函数有:
1、定时器(setTimeout setInterval setImedate setImmediate);
2、ajax(AJAX异步方式请求比同步方式请求HTTP头部多一个 X-Requested-With为XMLHttpRequest);
3、两个并列执行的函数;
代码举例:
function f1(callback){
setTimeout(function () {
// f1的任务代码
callback();
console.log('222')
}, 1000);
console.log('111')
}
f1(function(){console.log('333')})
>111
>333
>222
处理异步函数的方法:
1、回调函数(这个很常见,很多内置函数都支持接收回调函数来异步代码)
2、事件监听(很多dom操作,click事件等都是异步的)
3、订阅与发布(这个常见是在angular和vue中,用on来监听事件,on来监听事件,emit来发布事件,经常用于父子组件交互)
4、Promise(是es6新增的特性,能通过resolve和reject来执行异步操作,常与async await配合使用)
promise用法及知识点整理
1、介绍:Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,可以获取异步操作的消息
2、目的:1⃣️避免回调地狱的问题。2⃣️Promise对象提供了简洁的API,使得控制异步操作更加容易。
3、Promise有三种状态:1⃣️pendding //正在请求,2⃣️rejected //失败,3⃣️resolved //成功
4、基础用法:let p = new Promise(function(resolve,reject){ })
5、resolved,rejected函数:在异步事件状态pendding->resolved回调成功时,通过调用resolved函数返回结果;当异步操作失败时,回调用rejected函数显示错误信息。
6、then的用法:then中传了两个参数,第一个对应resolve的回调,第二个对应reject的回调(不常用)
p.then((data) => {
console.log('resolved',data);
},(err) => {
console.log('rejected',err);
}
);
7、catch方法:捕捉promise错误函数,和then函数参数中rejected作用一样,处理错误,由于Promise抛出错误具有冒泡性质,能够不断传递,会传到catch中,所以一般来说所有错误处理放在catch中,then中只处理成功的,同时catch还会捕捉resolved中抛出的异常(常用)
p.then((data) => {
console.log('resolved',data);
})
.catch((err) => {
console.log('rejected',err);
});
8、all方法:Promise.all([promise1,promise2])——参数是对象数组。以慢为准,等数组中所有的promise对象状态为resolved时,该对象就为resolved;只要数组中有任意一个promise对象状态为rejected,该对象就为rejected
let p = Promise.all([Promise1, Promise2])
p.then((data) => {
//都成功才表示成功
})
.catch((err) => {
//有一个失败,则都失败
});
9、race方法:Promise.race([promise1,promise2])——参数是对象数组。以快为准,数组中所有的promise对象,有一个先执行了何种状态,该对象就为何种状态,并执行相应函数
参考来源:https://blog.csdn.net/weixin_44887137/article/details/106444153