脚本宝典收集整理的这篇文章主要介绍了分分钟让你解决,异步加载导致的异常数据,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
async-demo
关于一些处理异步请求的方法
1、常见的JavaScript场景
1.setInterval
setTimeout
这种计时器函数。
2.http请求例如vue-resource
、fetch
、axios
。等请求方式。
2、常见的现象
1、不能按照要求得到结果
2、想要得到结果,需要运用传统的回调函数,表示非常的繁琐。
function A(){
setTimeout(B(),@H_360_53@200);
C();
}
A()
执行顺序A->B->C
var c="";
Vue.http.jsonp('http://ipinfo.io/json').then(function(data) {
self.weatherData.city = data.data.city;
self.weatherData.country = data.data.country;
c= data.data.city;
});
c=?
3、主要的方法
1、回调函数
F1();
f2();
function f1(callback){
setTimeout(function () {
// f1的任务代码
callback();
}, 1000);
}
f1(f2);
2、事件监听
f1.on('done', f2);
function f1(){
setTimeout(function () {
// f1的任务代码
f1.trigger('done');
}, 1000);
}
f1();
3、发布/订阅
jquery.subscribe("done", f2);
function f1(){
setTimeout(function () {
// f1的任务代码
jQuery.publish("done");
}, 1000);
}
f1();
jQuery.unsubscribe("done", f2);
4、Promises
对象
f1().then(f2);
function f1(){
var DFd = $.Deferred();
setTimeout(function () {
// f1的任务代码
dfd.resolve();
}, 500);
return dfd.promise;
}
f1();
4、实战项目
1、Promise
var promise = null;//定义全局变量
//new 一个Promise对象
promise = new Promise(function(resolve, reject) {
Vue.http.jsonp('http://ipinfo.io/json').then(function(data)
{
if (data != null) {
resolve(data);
} else {
reject("fail");
}
self.weatherData.city = data.data.city;
self.weatherData.country = data.data.country;
});
})
//利用promise进行链式传递
promise.then(function(data) {
var city = data.data.city+data.data.country;
Vue.http.jsonp(api + city + units + appid).then(function(data) {
that.weatherShow(data);
});
})
总结
1、promise
主要解决回调地狱问题
2、使得原本的多层级的嵌套代码,变成了链式调用
3、让代码更清晰,减少嵌套数
缺点:Promise
的最大问题是代码冗余,原来的任务被Promise 包装了一下,不管什么操作,一眼看去都是一堆 then,原来的语义变得很不清楚。
demo
2、generator
和yield
getLoc: function() {
var that = this;
Vue.http.jsonp('http://ipinfo.io/json').then(function(data) {
self.weatherData.city = data.data.city;
self.weatherData.country = data.data.country;
it.next(data.data);
//重点4
});
},
getcurrent: function(data) {
var that = this;
var api = "http://api.oPEnweathermap.org/data/2.5/weather?q=";
var units = "&units=metric";
var appid = "&APPID=061f24CF3cde2f60644a8240302983f2"
var cb = "&callback=JSON_CALLBACK";
var city = data.city + ',' + data.country;
Vue.http.jsonp(api + city + units + appid).then(function(data) {
it.next(data);//重点4
});
//重点1
function* generator() {
var data = yield object.getLoc();
data = yield object.getCurrent(data);
yield object.weatherShow(data);
}
var it = generator();//重点2
it.next();//重点3
总结
getLoc: function() {
var that = this;
return new Promise(function(resolve, reject) {
Vue.http.jsonp('http://ipinfo.io/json').then(function(data) {
self.weatherData.city = data.data.city;
self.weatherData.country = data.data.country;
resolve(data.data);
});
})
},
getCurrent: function(data) {
var that = this;
var api = "http://api.openweathermap.org/data/2.5/weather?q=";
var units = "&units=metric";
var appid = "&APPID=061f24cf3cde2f60644a8240302983f2"
var cb = "&callback=JSON_CALLBACK";
var city = data.city + ',' + data.country;
return new Promise(function(resolve, reject) {
Vue.http.jsonp(api + city + units + appid).then(function(data) {
resolve(data);
// that.weatherShow(data);
});
});
},
//重点1
async function test() {
const v1 = await object.getLoc();
const v2 = await object.getCurrent(v1);
const v3 = await object.weatherShow(v2);
}
test();
总结
以上是脚本宝典为你收集整理的分分钟让你解决,异步加载导致的异常数据全部内容,希望文章能够帮你解决分分钟让你解决,异步加载导致的异常数据所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。