这是我的第一篇学习笔记,写的不好,请大家多多包涵。
在我工作写代码的过程中,经常会用到异步操作,那时的我,只用到过ajax的异步,年轻的我也没怎么深究。就这样傻傻地用了好几个月。
某天突然出现一个契机,遇到一个不是AJAX请求,但是要做异步处理的情况。这时,作为一个正常人,度娘已经打开了。promise,async await几乎成了所有文章的关键字,我就好好了解了一下。
1. Promise
Promise是一种异步解决方案,有三种状态分别为pending-进行中、resolved-已完成、rejected-已失败
现在先来说说它的基本用法:
// 方法1
let promise = new Promise ( (resolve, reject) => {
if ( success ) {
resolve(a) // pending ——> resolved 参数将传递给对应的回调方法
} else {
reject(err) // pending ——> rejectd
}
} )
// 方法2
function promise () {
return new Promise ( function (resolve, reject) {
if ( success ) {
resolve(a)
} else {
reject(err)
}
} )
}
PS:参数中的方法会在声明此对象的时候立即执行
then() VS catch()
promise.then(
() => { console.log('this is success callback') }, // resolve的回调
() => { console.log('this is fail callback') } // rejected的回调
)
promise.then(
() => { console.log('this is success callback') }
).catch(
(err) => { console.log(err) }
)
对于then(),catch()都会返回一个新的Promise对象,之前我一直有个疑问,如果有多个相同状态的回调,是连续触发呢,还是只触发一个。实验证明,确实只能触发一个回调。
Promise其他API
resolve() reject()
参数是Promise:原样返回
参数带有then方法:转换为Promise后立即执行then方法
参数不带then方法、不是对象或没有参数:返回resolved状态的Promise
all
var promise = Promise.all( [p1, p2, p3] )
promise.then(
...
).catch(
...
)
只有当状态一起变为resolved,状态才会变成resolved,只要有一个变成rejected,则状态立刻变为rejected
race
var promise = Promise.race( [p1, p2, p3] )
promise.then(
...
).catch(
...
)
与all有一点不用,只要有一个状态改变,整体状态就执行相应的回调函数
finally
不管最终状态是什么,一定被执行(状态改变时执行)
2. async await
说到async await,我之前是很少接触的。可以说是完全不用,因为我都用Promise来代替所有的异步操作,我相信大多数人和我一样。
Promise是回调函数的升级,因为他通过.then链路,避免了回调地狱。
而async await 可以Promise的升级,就让我们来好好了解下吧。
async await用来来干什么
既然说是Promise的升级,那么它肯定也是异步编程的解决方案
async是用来声明一个function是异步的,await则是等待这个异步function完成的
async function testAsync() {
return "hello async";
}
const result = testAsync();
console.log(result);
这里打印出来的result竟然是一个Promise对象,所以说它是Promise升级,它的本质其实还是Promise
要说一句,await必须在async声明的异步函数里才能使用
await等的是什么
这样看来await等的是一个Promise对象,其实不然,await等的其实就是任意表达式的结果,其实等Promise也是在等他返回的值。
async await 有什么好处
Promise当执行链路多而复杂时,函数的各种参数可以让你欲仙欲死,然而async await代码清晰,逻辑简单,看上去像是同步方法一样。
3. AJAX
当然在了解这些新特性的同时,我也不会喜新厌旧,ajax的原理也是需要了解一下的。
AJAX的原理创建异步对象XMLHttpRequest
,创建方法:new XMLHttpRequest()
,当然也有特例,IE6以上的IE创建方法则是new ActiveObject("Msxml2.XMLHTTP")
。而异步的原理就是设置回调函数onreadystatechange
,每当异步对象readyState
状态改变则会进入此回调函数。异步操作就此完成。