[JavaScript知识库]同步与异步，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 会阻塞后面的代码，等主程序执行完，再回来执行
}