在做实作课作品时,出现过对象中变量访问不到的情况,查阅相关资料发现时同步异步的问题,这篇文章帮助我理清思路,希望也能帮助你们更好地理解同步异步。
异步操作会导致:如果下一个函数需要未执行完成的当前函数中的元素,由于当前函数未对该元素进行处理,而异步使得下一个函数先执行,自然导致下一个函数中获取的该元素为空。辅助代码如下:
代码执行结果为:
(1)Ajax请求
通过Ajax发送网络请求时由于网络延迟,会导致异步问题产生。解决方法如下:
$.ajax({
//获取用户收藏列表
url: xxxxx//请求的端口
dataType: "json",
async : false,//false代表同步执行,true代表异步执行
type: "POST",
success: function(result) {
if (result.status == 200) {
//请求成功的操作
} else {
//后端接口返回失败的操作
}
},
fail: function() {
//请求失败的操作
}
error: function() {
//请求发生错误的操作
}
});
$.ajax({
//获取用户收藏列表
url: xxxxx//请求的端口
dataType: "json",
type: "POST",
success: function(result) {
if (result.status == 200) {
//请求成功的操作
A();//请求成功后再执行操作
B();
} else {
//后端接口返回失败的操作
}
},
fail: function() {
//请求失败的操作
}
error: function() {
//请求发生错误的操作
}
});
(2)Axios
基于promise的HTTP轻量级库,可以不需要引入Jquery.js
async f() {
var result={};
var param = ####
var url = ####
await axios.post(url, param).then(function (res) {
if (res.status == 200) {
result=res.data.data;//根据接口返回的数据进行赋值
} else {
alert("获取失败!");
}
});
},
async、await:Promise的语法糖;此处使用async是为了令f()声明为异步函数,await用于等待异步结果。语法上规定await只能出现在async中。通过二者搭配,使得该函数运行完成后才可运行其它函数,即实现同步。
(3)Promise优化异步
补充知识:Promise对象用于表示一个异步操作的最终完成(或失败)及其结果的返回值
利用Promise可以避免层层嵌套的回调函数
function A(){
return "成功111";
}
var myFirstPromise = new Promise(function(resolve, reject){
//当异步代码执行成功时调用resolve(...), 当异步执行代码失败时调用reject(...)
//此处使用setTimeout(...)模拟异步代码,实际编码时可能是XHR请求或是HTML5的一些API方法.
setTimeout(function(){
resolve(A()); //代码成功执行
}, 250);
});
myFirstPromise.then(function(successMessage){
//successMessage的值是上面调用resolve(...)方法传入的值.
//successMessage参数不一定非要是字符串类型,这里只是举个例子
document.write(successMessage);
document.write("Yay! ");
});
由于Promise.prototype.then方法返回的是一个新的Promise对象,因此可采用链式写法,按顺序依次调用。
getJSON("/posts.json").then(function(json) {
return json.post;
}).then(function(post) {
// proceed
});
第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。
如果前一个回调函数返回的是Promise对象,这时后一个回调函数就会等待该Promise对象有了运行结果,才会进一步调用。(横向发展改为向下发展)
本篇文章是在多篇文章的理解下结合本人的理解完成的,如有不正确的地方欢迎指出~
[1] https://blog.csdn.net/jiaweiok123/article/details/87930753
[2] https://blog.csdn.net/weixin_41809916/article/details/79829897
[3] https://juejin.cn/post/6844903810263941134
[4]https://www.runoob.com/w3cnote/javascript-promise-object.html