JS不使用async/await解决数据异步/同步问题

Posted 2023-02-17 ￡漫步 云端彡

axios解决同步问题的方式

至今我能想到的解决同步/异步问题的三种方式如下：

1. 通过函数回调解决同步异步。这种方式代码书写层层嵌套不直观。
2. async/await关键字，这两个关键字搭配使用完美解决同步/异步问题，但是这种方式并不能说是解决了同步问题，而是说将异步功能延续到了调用者，即父方法。当然这种方式在调用方本身就是异步函数的情况下有效。
3. 利用引用变量的方式解决同步异步问题。这种方式完美解决了第2种方式存在的问题，调用方可以是同步方法。但是该种方式不能解决基本类型，因为基本类型不是使用引用变量的。可通过将基本类型包装在对象中，解决这个问题。

以上三种方式各有利弊，具体情况使用具体方式。下面通过示例模拟一下上述三种方式。

1. 回调解决

   正常情况下：

   // 模拟异步发数据
   function req(str) 
   	return new Promise((resolve, reject) => 
   		resolve(str)
   	)
   
   // 请求方法
   function update(data) 
   	req(data).then(result => 
   		str = result;
   		// 代码更新后区域
   		console.log("结果3:" + str); // 代码1
   	);
   	console.log("结果1:" + str); // 代码2
   
   let str = "你好"; // 代码3
   update("hello"); // 代码4
   console.log("结果2:" + str); // 代码5
   

   结果：
   

   分析：代码3,之后，执行代码4，其中并不会立刻执行代码1，而是执行方法内部的代码2和之后跳出代码5。因为req(data).then()是异步的，等异步请求结束后之行代码1，因此写在代码1区域能够解决实际问题，少量回调，这个方式很方便，多次回调时，降低了代码的可读性。

2. async/await关键字

   // 模拟异步发数据
   function req(str) 
   	return new Promise((resolve, reject) => 
   		resolve(str)
   	)
   
   // 请求方法,通过声明async/await,可等待异步完成之后再执行
   async function update(data) 
   	await req(data).then(result => 
   		str = result;
   		console.log("结果2:" + str); // 代码1
   	);
   	// 代码更新后区域
   	console.log("结果3:" + str); // 代码2
   
   let str = "你好"; // 代码3
   update("hello"); // 代码4
   console.log("结果1:" + str); // 代码5
   

   结果：
   

   步骤：第一步将父级方法也就是update，声明为异步方法（async），然后再需要等待同步的地方标注为await，这样即可等待req(data).then()请求执行成功之后，再执行下面代码。注意：async必不可少，否则报错。
   分析：代码执行完3时，因为代码4声明为异步了，故先执行了代码5，执行请求时，发现请求为等待，故等then执行结束后，即执行了代码1，最后执行了代码2。所以代码2区域能够解决实际问题。虽然这样是解决了update方法内部的同步代码问题，但是变相的将异步问题向上拋了。update方法为异步了。

3. 利用引用变量的方式解决同步异步问题
   下面使用新的示例，因为字符串不是使用引用的方式，需要将字符串包裹在对象中才起作用。先看正常的示例：

   // 模拟异步发数据
   function req(obj) 
   	return new Promise((resolve, reject) => 
   		resolve(obj)
   	)
   
   // 请求方法,通过声明async/await,可等待异步完成之后再执行
   function update(data) 
   	req(data).then(result => 
   		obj = result;
   		console.log("结果3:",obj); // 代码1
   	);
   	console.log("结果1:",obj); // 代码2
   
   let obj = 
   	msg: "你好"
   ; // 代码3
   update(
   	msg: "hello"
   ); // 代码4
   console.log("结果2:",obj); // 代码5
   

   结果：
   
   分析：不用多说，代码执行顺序为：代码3、4、2、5、1。执行代码2和5时，obj其实是一个引用，因此这两个结果是一样的，但是，赋值使用obj = result，结果2之前将obj引用到了新的对象，因此执行结果2最后和之前不一样。
   问题：怎么样才能将结果1和结果2的值和结果3是一样的呢？
   方案：这是赋值的问题，因此obj = result的意思是将obj指向了新的引用对象，之前的丢弃。所以在赋值的时候，不要丢弃之前的对象，只是做修改对象内部属性的值，那么不管再哪里引用都是一样的值了。

   // 模拟异步发数据
   function req(obj) 
   	return new Promise((resolve, reject) => 
   		resolve(obj)
   	)
   
   // 请求方法,通过声明async/await,可等待异步完成之后再执行
   function update(data) 
   	req(data).then(result => 
   		// 只赋值属性的值，不改变引用地址
   		obj.msg = result.msg; 
   		console.log("结果3:",obj); // 代码1
   	);
   	console.log("结果1:",obj); // 代码2
   
   let obj = 
   	msg: "你好"
   ; // 代码3
   update(
   	msg: "hello"
   ); // 代码4
   console.log("结果2:",obj); // 代码5
   

   结果：
   
   分析：如结果所示，最后的数据为实时的数据，但是上面的打印数据是代码执行时的值，而我们平时调用获取值时，都是使用引用来获取变量的实时数据。这种方式没有改变代码执行的顺序，也没有改变异步和同步的方式，只是改变了赋值方式。这种方式在父方法不能为异步方法时，很有效。再次强调，如果为基本类型，包装在一个对象或数组的应用下才有效。