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);

})

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

  1. ajax存到php变量,Ajax返回值作为PHP变量

    Ajax返回值作为PHP变量 内容精选 换一换 在TIK DSL中插入一个对表达式求值并打印结果的语句.调试器执行到这行代码时会对表达式求值并将结果打印在屏幕上.def debug_print(exp ...

  2. ajax从php里能输出俩值,Ajax返回值作为PHP变量

    Ajax返回值作为PHP变量 内容精选 换一换 Mock服务支持使用以下内置函数或变量引用生成动态响应.通过"{xxx}"设置引用变量,可以引用接口路径中的参数(路径变量),或是从 ...

  3. ajax返回值demo

    ajax返回值demo posted on 2016-01-29 15:22 Stanley_yu 阅读(...) 评论(...) 编辑 收藏 转载于:https://www.cnblogs.com/ ...

  4. sweetalert 2.0 ajax,处理SweetAlert2中的AJAX返回值

    我使用带有AJAX请求的SweetAlert2 Popup.一旦用户点击提交,我执行请求. 在PHP文件中,我对提交的数据进行了一些验证,根据结果,我想在SweetAlert2中为用户提供反馈作为信息 ...

  5. 易语言取linux命令返回值,易语言取程序返回值写法

    公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:易语言取程序返回值写法回答:在易语言中,程序包括"处理程序"都有六部分组成.一.程序名,就是程序的名称,程序名不 ...

  6. 【面试Vue全家桶】vue前端交互模式-es7的​语法结构?async/await​

    作者 |  Jeskson 掘金 |  https://juejin.im/user/5a16e1f3f265da43128096cb 2020.1.12 前端发请求,调用后端接口,来获取特定格式的数 ...

  7. 二、Vue(发送AJAX请求、Vue生命周期、计算属性、属性和方法、自定义指令、过渡(动画))

    一. 发送AJAX请求 1. 简介     vue本身不支持发送AJAX请求,需要使用vue-resource.axios等插件实现     axios是一个基于Promise的HTTP请求客户端,用 ...

  8. vue中封装ajax请求方法,Vue如何封装ajax

    Vue如何封装ajax 发布时间:2020-12-07 11:09:07 来源:亿速云 阅读:123 作者:小新 这篇文章主要介绍Vue如何封装ajax,文中介绍的非常详细,具有一定的参考价值,感兴趣 ...

  9. 回车ajax显示,ajax返回值中有回车换行、空格的解决方法分享

    最近在写一个页面,用jquery ajax来实现判断,刚写好测试完全没有问题,过了两天发现出现问题,判断不成了.后来发现所有alert出来的返回值前面都会加若干换行和空格.(至今不明白,同一台电脑,同 ...

最新文章

  1. 06.SQLServer性能优化之---数据库级日记监控
  2. ACMNO.48 01字串
  3. jQuery-层次选择器的学习
  4. split函数python 未定义_Python字符串方法split()中的一道坑
  5. 分布式监控系统Zabbix3.2添加自动发现磁盘IO并注册监控
  6. 剑指offer试题(PHP篇一)
  7. 个推微服务网关架构实践
  8. 单模光电转换器怎么接_以太网光纤收发器怎么用?
  9. js关闭iframe窗口_[Selenium]24.处理弹窗新式的模态窗口
  10. js横向滚动_seleniumJS处理滚动条
  11. 创建loop15设备挂载镜像文件(.img)
  12. Scheme学习系列O:启动篇
  13. 【优化预测】基于matlab粒子群算法优化SVM预测【含Matlab源码 1424期】
  14. 21世纪十大营销法则
  15. 孔子称他为贤,孟子尊他为圣,柳下惠何德何能?2700年家谱揭露真相
  16. python selenium 验证码识别_Python+Selenium+PIL+Tesseract真正自动识别验证码进行一键登录...
  17. 一衣带水 守望相助:中日夫妻七七再行慈善之旅
  18. msxml3.dll 错误 '800c0008'
  19. vue移动端h5中a标签下载/预览文件
  20. O2OA:移动办公市场中的另一股清流

热门文章

  1. java file 堵塞_单元测试最终在Java 6中阻塞
  2. android点击灰色背景图片,android button按键失去焦点和点击后改变背景图片
  3. 画王八java代码参数_java画乌龟源代码-郭遥航.doc
  4. html留言回复评论页面模板,HTML5实现留言和回复的页面样式
  5. java sleep方法_一文搞懂 Java 线程中断!
  6. 顺丰快递单号的规律_顺丰速运顺丰快递单号查询大全
  7. npm环境安装linux,Node.js环境在linux上的部署教程
  8. node python复用代码_python-代码复用(函数、lambda、递归、PyInstaller库)
  9. 使用Preference保存设置
  10. platform Builder导出SDK