js注意事项4（同步异步）

Posted 2022-12-05 嘿起屁儿整

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js注意事项4（同步异步）相关的知识，希望对你有一定的参考价值。

同步、异步

为什么要有同步异步？

JS是单线程的。即一件事情完成后，才能做后续的事情。期间不能进行任何操作
同步：顺序执行。
异步：同步全部执行完了再执行。
异步又分为：宏任务，微任务
为什么要分同步异步？因为JS是单线程的，一个一个依次执行。举个例子：发请求，网速慢的情况，肯定半天都卡死在这，所以ajax发请求被归为异步。即等那些稳定的同步操作都快速执行完了，再来执行
async await 与 Promise 的作用？都是优化异步的，作用一样，写法不同。就是因为异步不稳定，怕异步卡住了，所以我们日常代码中发起异步请求都会用他们优化一下。也是避免异步嵌套

前端哪些是异步的？

定时器（setTimeout、setInterval） ----宏任务
事件
异步请求（ajax、axios）
回调函数

异步怎么执行？

等同步执行完毕，才执行异步。
异步有对应的队列，也要排队。
异步先执行微任务，再执行宏任务。

来点例子

首先：声明一下。定时器属于宏任务。

列子1：
    setTimeout(function () 
      console.log(0);
    , 10);
    setTimeout(function () 
      console.log(1);
    , 0);
    console.log(2);
    console.log(3);
    console.log(4);:
那么打印顺序？  2 3 4 1 0
显然同步全部执行完了才执行异步 

例子2：
new Promise((resolve) => 
    console.log('外层宏事件2');
    resolve()
).then(() => 
    console.log('微事件1');
).then(()=>
    console.log('微事件2')
)
console.log('外层宏事件1');
setTimeout(() => 
    //执行后 回调一个宏事件
    console.log('内层宏事件3')
, 0)
那么打印顺序？
	外层宏事件2
	外层宏事件1
	微事件1
	微事件2
	内层宏事件3

async await 单独使用，并不能让异步同步化执行（单独使用不能让await等待）

mounted()this.aaa()
methods:
	aaa()
		setTimeout(()=>
			console.log("发请求")
		)
		console.log(123)
	

//打印执行顺序（异步要时间 所以晚执行）
123
发请求

mounted()this.aaa()
methods:
	async aaa()
		let data =await this.getdata()
		console.log(123)
	,
	getdata()
		setTimeout(()=>
			console.log("发请求")
		)
	

//打印执行顺序（异步要时间 所以晚执行）
123
发请求

async await 配合promise使用，可以异步同步化执行（使同步await等待上一个异步执行完毕再执行）

mounted()this.aaa()
methods:
	async aaa()
		let data =await this.getdata()
		//console.log(data)
		console.log(123)
	,
	getdata()
 	   return new Promise((resolve, reject) => 
        setTimeout(() => 
          console.log("发请求");
          resolve("请求返回数据")
        );
      );
	

//打印执行顺序（异步要时间 所以晚执行）
发请求
123

mounted()this.aaa()
methods:
	async aaa()
		let data =await this.getdata()
		console.log(data)
		console.log(123)
	,
	getdata()
 	  return new Promise((resolve, reject) => 
        	setTimeout(() => 
          		console.log("发请求");
          		resolve("请求返回数据")
        	);
      );
	

//打印执行顺序（异步要时间 所以晚执行）
发请求
请求返回数据
123

接口封装异步

function get(url, params, config = )     
  return new Promise((resolve, reject) => 
    axios.get(url, 
      params,
      ...config,
    ).then(res => 
      resolve(res.data);
    ).catch(err => 
      reject(err.data);
    )    
  );