同步与异步,async/await

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 会阻塞后面的代码,等主程序执行完,再回来执行
}
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值