JQuery Deferred对象使用小结

场景描述

如下,打开页面时,获取默认选中的项目,同时也会初始化Combobox下拉框下拉列表数据

问题描述

获取默认选中项目及下拉列表的js函数位于common.js文件,类似如下:

// 根据项目类型,获取对应的项目

function getProjects(projectType) {

// 请求已有已启用项目

$.get('/action/getProjects?projectType=' + projectType, function(data,status) {

var jsonData = JSON.parse(data);

return jsonData;

});

}

js函数调用代码位于另一个html文件--testTaskManager.html,<script></script>元素标签内。

如下

// 初始化项目combobox下拉列表

var jsonData = getProjects('TestProject');

console.log(jsonData);

if (jsonData['result'] == 'success') {

$('#projects').combobox('loadData', jsonData['data']);

} else {

$.messager.alert('错误信息', '获取项目失败:' + jsonData['data'], 'error');

}

结果打开页面时,控制台提示如下:

原因很简单,

var jsonData = getProjects('TestProject');

以上代码getProjects函数调用,会引发get请求。

紧接着,开始执行后续的代码,涉及到jsonData的引用,但是此时,请求可能还没返回结果,也就是说getProjects 还没返回数据给jsonData,jsonData未定义。

解决方案

让这两个文件中的代码“同步”运行。

function getProjects(projectType) {

var defer = $.Deferred(); //返回Deferred对象;

// 请求已有已启用项目

$.get('/action/getProjects?projectType=' + projectType, function(data,status) {

var jsonData = JSON.parse(data);

defer.resolve(jsonData);

});

return defer;

}

// 初始化项目combobox下拉列表

getProjects('TestProject').then(function(jsonData) {

if (jsonData['result'] == 'success') {

$('#projects').combobox('loadData', jsonData['data']);

} else {

$.messager.alert('错误信息', '获取项目失败:' + jsonData['data'], 'error');

}

});

说明

以上代码,大致意思就是先指定getProjects函数的的异步操作,执行完成后才执行then函数中指定的回调函数。

done(fn)

fail(fn)

then(done, fail)

done, fail这两个方法都用来绑定回调函数fn,fn可能是一个function,也有可能是多个以逗号分隔的function函数。

resolve(arg)

这个方法用来改变deferred对象的状态为resolved, 并告诉deferred对象执行done回调,arg是传递给回调函数的参数。

reject(arg)

这个方法用来改变deferred对象的状态为rejected,并告诉deferred对象执行done回调,arg是传递给回调函数的参数。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏flutter开发者

Flutter 网络操作

在前面的文章中我们在Flutter中的本地存储,我们可以将用户的数据存储在移动设备上,但是当用户清空设备或者更换设置这些用户存储的信息就会面临丢失的问题。那么,...

57640
来自专栏SmartSi

Python 文件处理

记录中的字段通常由逗号分隔,但其他分隔符也是比较常见的,例如制表符(制表符分隔值,TSV)、冒号、分号和竖直条等。建议在自己创建的文件中坚持使用逗号作为分隔符,...

15730
来自专栏SmartSi

Flink1.4 执行计划

根据各种参数(如数据大小或集群中的机器数量),Flink的优化器自动会为你的程序选择一个执行策略。很多情况下,准确的知道Flink如何执行你的程序是很有帮助的。

11130
来自专栏nodejs全栈开发

跨域jsonp的原理

因为浏览器的同源策略,那什么是同源策略呢浏览器从A网站向B网站请求资源,必须同时满足三点才可以,协议相同,域名相同,端口相同,任何一点不同都会产生跨域,产生跨域...

31730
来自专栏技术从心

你真的理解了POST/GET请求吗?

① form-data、x-www-form-urlencoded:不可以用@RequestBody;可以用@RequestParam。见postman的格局,...

5910
来自专栏信安之路

通过挖掘某某 src 来学习 json csrf

在某某 src 进行渗透测试的过程中,发现一个评论的地方并没有对次数进行限制且在数据区域也没有 token 的字眼,因此猜测此处存在 csrf 漏洞,于是就开始...

10020
来自专栏python学习教程

python爬虫教程:批量抓取 QQ 群信息

本文讲解Python批量抓取 QQ 群信息,包括群名称、群号、群人数、群主、地域、分类、标签、群简介等内容,返回 XLS / CSV / JSON 结果文件。

59510
来自专栏SmartSi

ElasticSearch Java API之索引文档

Index API 允许我们存储一个JSON格式的文档,使数据可以被搜索。文档通过index、type、id唯一确定。我们可以自己提供一个id,或者也使用Ind...

22520
来自专栏nodejs全栈开发

vue-resource emulateJSON的作用

今天有个同事问我vue-resource emulateJSON的作用,这要从vue-resource这个库说起了,这个库发送post请求会默认的把请求参数转换...

16020
来自专栏编程珠玑

一个超轻量级的JSON解析器

众所周知,JSON是一种轻量级的数据格式,应用广泛。在C/C++应用中也常常作为配置文件或者数据的存储,因此JSON文件的生成和解析是必备知识。

19520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励