Promise与asyncawait⾯试知识点
Promise的正常⽤法
function xx(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resovle('成功的输出')
reject('失败输出')
},3000)
})
}
xx().then(fn1,s1).then(fn2,s2)//fn表⽰成功调⽤，s表⽰失败调⽤
Promise的API
Promise.all(数组) 等待全部成功，或者有⼀个失败
Promise.race(数组) 等待第⼀个状态改变
Promise.allSettled(数组) 等待全部状态改变，API较新，浏览器⽀持的少
Promise的语法糖
Promise.then(fn1).catch(s1) 等于 Promise.then(fn1,s1)
Promise的⾯试题
页⾯有两个按钮 Ａ和Ｂ，以及⼀个输⼊框，Ａ按钮点击后发送⼀个请求，返回⼀个字符串Ａ，Ｂ也发请求，但返回字符串Ｂ，返回后会把字符串赋值给输⼊框，但是Ａ，Ｂ发送的两个请求返回的时间不同，点击两个按钮的顺序也不⼀定，Ｂ要⽐Ａ先返回，⽽最终效果要求是输⼊框字符的顺序是ＡＢ。
primise.all()不好满⾜这个需求。这需要⽤⼀个数组来记录他们，当B请求回来时去数组中对⽐，顺序不为1，然后再等待，等到A请求回来后，输出A然后再输出B即可。
直接看实现的代码吧：
<body>
<button id="b1">A</button>
<button id="b2">B</button>
<input id="input1" type="text">
</body>
let ajax1 = ()=>{
return new Promise((resolve, reject)=>{    setTimeout(()=>{
resolve(1111)
await和async使用方法
},5000)
})
}
let ajax2 = ()=>{
return new Promise((resolve, reject)=>{    setTimeout(()=>{
resolve(2222)
},3000)
})
}
let batai = []
let duiwu = []
let hi = () =>{
let lastN = batai[batai.length - 1][0]
let lastS = batai[batai.length - 1][1]
console.log(duiwu,'队伍')
console.log(batai,'吧台')
if(duiwu[0][0] === lastN) {
duiwu[0][1](lastS)
duiwu.shift()
batai.pop()
hi()
}
}
const n = 1
ajax1().then(res=>{
batai.push([n, res])
hi()
})
duiwu.push([n, s=>{
input1.value = s
}])
}
const n = 2
ajax2().then(res=>{
batai.push([n, res])
hi()
})
duiwu.push([n, s=>{
input1.value = s
}])
}
async await的基本⽤法
const fn = async ()=>{
const fn1 = await newPromise()
return fn1 + 1
}
相⽐较Promise，完全没有锁进，就像在写同步代码。
为什么async await函数前⾯要有⼀个async？
为了兼容旧代码，以前有⼈实现了与async/await功能相同的await函数，例如这样：
await(newPromise())
所以为了做区分，在函数前⾯增加async以⽰不同，没有别的特殊含义。
优化async await错误处理
常见的错误处理⽅法 try/catch
let response
try{
response = ('/xx')
} catch(err){
sponse){
console.sponse.states)
}
throw err
}
console.log(response)
这样处理感觉不太好看，我们可以优化⼀下，结合Promise写出如下代码：
const response = ('/xx').then(null, err)
console.log(response)
response处理成功结果，then(null, err) 的err处理失败结果。
async/await实际上就是Promise的语法糖。
async await⾯试题
let a = 0;
let test = async () => {
a = a + await 10;
console.log(a)
}
test()
console.log(++a)
请问log分别会输出什么？
答案：1，10
这⾥考察的知识点：a + await 10 前⾯的a  是跟随await⼀起异步确定的，还是a先确定值。
事实上在await前⾯的值都会同步执⾏，await后⾯的才会异步执⾏，记住这点就很好理解了。
题⽬中虽然先log了++a，a值应该为1。但是在test()函数中a + await 10  中的a在test()运⾏时就已经将值确定了，值为0。
0 + 异步的await 10 等于10。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。