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

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
    

    结果:
    JS不使用async/await解决数据异步/同步问题_第1张图片

    步骤:第一步将父级方法也就是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
    

    结果:
    JS不使用async/await解决数据异步/同步问题_第2张图片
    分析:不用多说,代码执行顺序为:代码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
    

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

你可能感兴趣的