1、同步与异步概念
同步:就是后一个任务等待前一个任务执行完毕后,再执行,执行顺序和任务的排列顺序一致
异步:异步是非阻塞的,异步逻辑与主逻辑相互独立,主逻辑不需要等待异步逻辑完成,而是可以立刻继续下去
console.log('a')
console.log('a')
console.log('a')
setTimeOut(()=>{console.log('饭卡找到了')},2000)
console.log('a')
console.log('a')
2、ajax(jquery)
console.log(1)
$.ajax({
type:"get",
url:"https://mockapi.user/user",
success:function(response){
console.log(response)
}
})
console.log(2)
//执行结果1 2 response
3、promise
异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理且更强大
有三个状态:
①pending[待定] 初始状态
②fulfilled[实现] 操作成功
③rejected[拒绝] 操作失败
var promise=new Promise(传一个函数);
var promise=new Promise(function(resolve,reject){
if(异步操作成功){
resolve(value)
}else{reject(error)}
})
当promise状态发生改变,就会触发then()里的响应函数处理后续步骤
状态改变,只有两种可能
从pending变为fulfilled
冲pending变为rejected
var promise=new Promise(function(resolve,reject){
if(false){
resolve('success')
}else{reject('fail')}
})
promise.then(res=>{
console.log(res)//成功 resolve('success')
}).catch(err=>{
console.log(err)//失败reject('fail')
})
Promise.all
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值
let p1=new Promise((resolve,reject)=>{
resolve('成功了')
})
let p2=new Promise((resolve,reject)=>{
resolve('success')
})
let p3=Promise.reject('失败')
Promise.all([p1,p2]).then((result)=>{
console.log(result)//['成功了','success']
}).catch(error=>{
console.log(error))
})
Promise.all([p1,p3,p2]).then((result)=>{
console.log(result)
}).catch(error=>{
console.log(error))//失败了,'失败'
})
Promise.race
顾名思义,Promise.race就是赛跑的意思,意思就是说,Promise.race([p1,p2,p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态
let p1=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success’)
},1000)
})
let p2=new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve('success’)
},500)
})
Promise.race([p1,p2]).then((result)=>{
console.log(result)
}).catch(error=>{
console.log(error)//打开是failed
})
4、async/await
也是用来处理异步的,其实是Generator函数的改进,背后原理就是promise
情况1:
async function f1(){
return "abc"
//自动包装成promise对象
//与下面两种等价
//return Promise.resolve('abc')
//return new Promise((resolve)=>{resolve('abc')})
}
console.log(f1())
情况2:与await结合:
async function f3(){
return 'f3'
}
function f4(){
return 'f4'
}
async function f5(){
var x=await f3();//await是异步函数
var d=await f4();//await是正常函数
//看到await 会阻塞后面的代码,等主程序执行完,再回来执行
}