vue页面取ajax返回值,Vue前端交互模式、Promise用法(回调地狱)

Promise 概述Promise 是异步编程的一种解决方案,从语法上讲,Promise 是一个对象,从它可以获取异步操作的消息。

优点:可以避免多层异步调用嵌套问题(回调地狱)

Promise 对象提供了简洁的 API,使得控制异步操作更加容易

Promise基本用法实例化 Promise 对象,构造函数中传递函数,该函数中用于处理异步任务

resolve 和 reject 两个参数用于处理成功和失败两种情况,并通过 p.then 获取处理结果var p = new Promise(function(resolve,reject){

//实现异步任务...

//成功时调用

resolve();

//失败时调用

reject();

});

p.then(function(ret){

//从resolve得到正常结果

},function(ret){

//从reject得到错误信息

});

基于 Promise 处理 Ajax 请求处理原生 Ajaxfunction queryData(url){

return new Promise(function(resolve,reject){

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function(){

if(xhr.readyState!=4) return;

if(xhr.status == 200){

resolve(xhr.responseText);

}else{

reject('出错了');

}

}

xhr.open('get',url);

xhr.send(null);

});

}

//调用

queryData('http://localhost:3000/data').then(

function (data) {

console.log(data);

},

function (data) {

console.log(data);

}

)发送多次 ajax 请求(解决回调地狱)queryData('http://localhost:3000/data')

.then(function (data) {

console.log(data);

//异常情况可以不处理

return queryData('http://localhost:3000/data1');

})

.then(function (data1) {

console.log(data1);

return queryData('http://localhost:3000/data2');

})

.then(function (data2) {

console.log(data2);

});

then参数中的函数返回值返回 Promise 实例对象返回的该实例对象会调用下一个 then

返回普通值返回的普通值会直接传递给下一个 then,通过 then 参数中函数的参数接收该值

Promise常用的API

1.实例方法* p.then()得到异步任务的正确结果

* p.catch()获取异常信息

* p.finally()成功与否都会执行(暂时还不是正式标准)foo()

.then(function (data) {

console.log(data);

})

.catch(function (data) {

console.log(data);

})

.finally(function () {

console.log('finish');

})

也可以写为:foo()

.then(function (data) {

console.log(data);

},

function (data) {

console.log(data);

})

.finally(function () {

console.log('finish');

})

2.对象方法Promise.all() 并发处理多个异步任务,所有任务都执行完成才能得到结果//p1,p2,p3为Promise实例对象任务

Promise.all([p1,p2,p3]).then((result)=>{

console.log(result);

})Promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果Promise.race([p1,p2,p3]).then((result)=>{

console.log(result);

})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/442321.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为手机获取状态栏高度是错误的_你的华为手机状态栏有HD图标吗?这又代表着什么?看完你就懂了...

平时比较细心的朋友应该都发现了,华为手机的状态栏(信号栏)有个"HD"图标。有些朋友看到这个图标,可能会担心自己手机是不是出问题了?会不会对手机有什么影响?能不能把它关闭?下面就给大家解惑。1. "HD&…

ext.ajax.request跨域,跨域Ajax访问header中 x-requested-with丢失

前端调用后端接口,本域情况下,ajax方式调用,request header中包含x-requested-with信息。跨域情况下,request header中不再包含x-requested-with。说明:1.前端ajax封装的jquery的$.ajax方法。2.后端header相关设置已允…

bread是可数还是不可数_可数名词不可数名词分不清?出题老师告诉你方法

我是瓶子老师。我有10多年初中英语教学经验,参与过中考一模、二模命题,同时我也是《学生双语报》的撰稿人,为本市超过5万名中考生出过中考模拟试题。在初中英语的学习过程中,我们会讲到可数名词和不可数名词。很多同学总是记不住哪…

nginx指定配置文件启动_【第1717期】Nginx入门指南

前言Nginx有在部署早读课网站的时候用到,平时用的不多,又是一个可以顺便了解的知识点。那个李晓云,这篇是你想了解的吗?今日早读文章由慕小白翻译分享。正文从这开始~~这份指南是对nginx的基本介绍&#xf…

bash: pcre-config: 未找到命令..._Docker 常用操作命令

文章首发于微信公众号《程序员果果》 地址:https://mp.weixin.qq.com/s/S9VkzSJx_JOY8zDiC_nuEg1. 启动容器docker run IMAGE [COMMAND] [ARG...]IMAGE 是指启动容器所使用的操作系统镜像[COMMAND] [ARG...] 指的是容器启动后运行的命令及其参数2. 启动交互式容器#…

es 全量同步mysql_使用canal将mysql同步到es中

因为自己项目中需要用到mysql数据同步到es中,查找了相关资料最后决定用canal来做,所以便有了本文,下面一起来看如何使用canal吧canal教程根据 https://github.com/alibaba/canal 上的原理解释,我们知道 canal 会模拟 mysql slave …

一个列中多行求和_excel表格制作,Excel表格的基本操作,包含制作一个表格10方面的知识(1)...

蒹葭苍苍,白露为霜。所谓伊人,在水一方。溯洄从之,道阻且长。溯游从之,宛在水中央。蒹葭萋萋,白露未晞。所谓伊人,在水之湄。溯洄从之,道阻且跻。溯游从之,宛在水中坻。蒹葭采采&…

集成spark_全面对比,深度解析 Ignite 与 Spark

经常有人拿 Ignite 和 Spark 进行比较,然后搞不清两者的区别和联系。Ignite 和 Spark,如果笼统归类,都可以归于内存计算平台,然而两者功能上虽然有交集,并且 Ignite 也会对 Spark 进行支持,但是不管是从定位…

python编写自制编译器_编译器构造-编译Python

Python是一种解释型语言,因此您无需对其进行编译。 只是为了运行它。 碰巧的是,标准版本的python会像Java等一样将其编译为“字节码”,并将其保存(保存在.pyc文件中)并在下次运行,以节省时间(如果尚未更新)。 该文件自。 如果您更…

false shell 判断_六、Shell流程控制-if判断语句

1. shell中的运算1.1 数学比较运算-eq 等于-ne 不等于-lt 小于-gt 大于-le 小于等于-ge 大于等于浮点数的比较建议将数字等比放大至整数进行比较,例如#比较1.5和2的大小test echo 1.5*10|bc|awk -F "." {print $1} -lt $((2*10))1.2 文件比较运算-d 检查目…

hdfs如何查找指定目录是否文件_hadoop实战教程-HDFS文件系统如何查看文件对应的block...

问题导读:1.文件与block的信息被保存在什么文件中?2.如何查看整个目录树?3.可以通过什么方式查看文件与block的对应关系?(1)文件分割后,会有一个 文件 --> block的映射,这个映射是持久化到硬盘中的&…

实时监控后台数据 vue_实时数据监控,快速掌握B站爆款视频热度走向

飞瓜数据B站版的数据监控功能提供对B站UP主监控功能,实时掌握UP主视频热度走向和投放效果。通过监控输入B站视频链接,设定24/48时长开始对其监控。监控开始后在监控报告中查看对应视频的数据曲线变化或者等待监控结束直接观察整个的曲线走势。实现分钟打…

帧同步_帧同步和状态同步该怎么选(上)

这是一篇拖延了2年多的文章…2017年10月份开始写的,直到这次过年才写完。。。前言随着王者荣耀的崛起,使用帧同步(Lockstep)的游戏也越来越多,关于帧同步和状态同步的讨论争论也有不少,那么到底该选哪种同步…

实现连麦_直播课程系统如何实现互动连麦效果?

比起录播课,直播课师生能够更好地互动,因此很多老师利用直播课程系统进行直播教学。直播课程系统的连麦互动往往能让直播课充满生机。在直播教学中使用连麦互动功能,老师可以随时提问学生,学生也可以就不懂的问题询问老师&#xf…

json 潜逃 结构体_JSON还原为结构体 - osc_t5zhwnvx的个人空间 - OSCHINA - 中文开源技术交流社区...

JSON还原为结构体1)JSON字符串还原为结构体;2)访问结构体的字段值;本例运行效果图:usesSynCommons;const // JSON字符串JSON1 { #13#10 "glossary": { #13#10 "title": "中国", #13#10 "GlossDiv&q…

c++ 二次开发 良田高拍仪_在网页中调用摄像头实现拍照上传 - 高拍仪二次开发...

来源于 https://blog.csdn.net/weixin_40659738/article/details/78252562在网页中调用摄像头实现拍照上传高拍仪二次开发在一些公共部门的办事处,比如银行、护照办理中心、税务等,我们可能会注意到办公桌上摆着这样一台机器。办公人员用它拍摄各种证件…

rust睡觉按键没反应_Rust 有问有答之 use 关键字

use 是什么use 是 Rust 编程语言的关键字。using 是 编程语言 C# 的关键字。关键字是预定义的保留标识符,对编译器有特殊意义。using 关键字有三个主要用途:using 语句定义一个范围,在此范围的末尾将释放对象。using 指令为命名空间创建别名&…

复频域求零输入响应_第十四章 动态电路的复频域分析 习题答案

第十四章 动态电路的复频域分析一、选择题1. 图13—1所示电感元件的电压、电流关系的运算形式是 B 。A .)0()()(-L L L Li s sLI s U ;B .)0()()(--L L L Li s sLI s U ;C .si s sLI s U L L L )0()()(- 2&…

cancase vector_基于Vector总线设备的CAN总线测试方法概述

3.3采样点位置测试测试设备:CANoe、CANStressDR。测试系统架构中需将CANScope旁路处理。测试设备正确接线后(CANStressDR串接在回路中),CANoe发送报文,CANStressDR采用位干扰的方式进行干扰,具体是采用CANStressDR从后往前逐位干扰…

mysql实现分页_MySql实现分页查询的SQL,mysql实现分页查询的sql语句 (转)

http://blog.csdn.net/sxdtzhaoxinguo/article/details/51481430摘要:MySQL数据库实现分页查询的SQL语句写法!一:分页需求:客户端通过传递start(页码),limit(每页显示的条数)两个参数去分页查询数据库表中的数据&#…