Promise 学习心得
当了这么久码农到今天没事才开始去深究 Promise 这个对象
- 什么是 Promise, Promise 有什么用?
在写代码的时候多多少少都有遇见过地狱式的回调 代码看起来没问题就是有点乱,Promise 这个东西就是为了解决回调嵌套而生的 Promise 是异步编程的一种解决方案:从语法上讲,promise是一个对象,从它可以获取异步操作的消息;从本意上讲,它是承诺,承诺它过一段时间会给你一个结果。promise有三种状态:pending(等待态),fulfiled(成功态),rejected(失败态);状态一旦改变,就不会再变。创造promise实例后,它会立即执行。
- 知道 promise ,那应该怎样用呢?
举个最简单的例子利用 JQuery 返回一个 Promise 对象,实现 .then 对 ajax 进行调用
function getData(path,type='get',dataType='json'){
return $.ajax({
url:path,
type:type,
dataType:dataType
})
}
那如果我用不了 JQuery 怎么办, 我们可以直接用原生 Promise 来实现
function getData(url) {
return new Promise(function (resolve, reject) {
var XHR =new XMLHttpRequest() ;
XHR.onreadystatechange = function () {
if (XHR.readyState == 4) {
if ((XHR.status >= 200 && XHR.status < 300) || XHR.status == 304) {
try {
var response = JSON.parse(XHR.responseText);
resolve(response);
} catch (e) {
reject(e);
}
} else {
reject(new Error("Request was unsuccessful: " + XHR.statusText));
}
}
}
XHR.open('GET', url , true);
XHR.send(null);
})
}
- 最后我们来说一下 Promise 正常场景的两种使用方法
1. 回调后调用函数,第一个函数报错后面的函数就可以不用执行。
getData('./data.json',).then((data)=>{
console.log(data)
getData('./data1.json',)
}).then(data=>{
console.log(data)
getData('./data2.json',)
}).then(data=>{
console.log(data)
}).catch(err=>{
console.log(err)
})
2. 回调后调用函数,第一个函数错误后后面的函数还要继续执行。
getData('./data.json',).then((data)=>{
console.log(data)
getData('./data1.json',)
}).catch(err=>{
console.log(err)
getData('./data1.json',)
}).then(data=>{
console.log(data)
getData('./data2.json',)
}).then(data=>{
console.log(data)
})
总的来说 Promise 有什么用呢?代码量没减少,写起来还复杂。 你可以这样认为 Promise 没啥用就是让你的代码看起来不那么别扭,没有了回调地狱让你的代码可读写更强,看起来心情更好,心情好代码就打的快,代码打的快就有时间去学习,有时间学习就可以跳槽,就加工资。简单说 Promise 就是一个花瓶。中看!!
Promise 学习心得的更多相关文章
- PWA学习心得
PWA学习心得 一.什么是PWA Progressive Web App , (渐进式增强 WEB 应用) 简称 PWA ,是提升WebApp的体验的一种新方法,能给用户原生应用的体验. PWA ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(八) 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
随机推荐
- js常用设计模式实现(一)单例模式
前言 什么是设计模式 设计模式是一种能够被反复使用,符合面向对象特性的代码设计经验的总结,合理的使用设计模式能够让你得代码更容易维护和可靠 设计模式的类型共分为创建型模式,结构型模式,行为型模式三种 ...
- easyui combobox name选择器
HTML: <input name="myinputdom" id="myinputdom" class="easyui-combobox my ...
- SQL Server 函数的定义及使用
一.定义函数 1. 标量值函数: 返回一个确定类型的标量值,例如:int,char,bit等 --创建标量值函数 create function func_1(@func_parameter_1 in ...
- Ui自动化测试上传文件方法都在这里了
前言 实施UI自动化测试的时候,经常会遇见上传文件的操作,那么对于上传文件你知道几种方法呢?今天我们就总结一下几种常用的上传文件的方法,并分析一下每个方法的优点和缺点以及哪种方法效率,稳定性更高 被测 ...
- The Summer Training Summary-- the first
The Summer Training Summary-- the first A - vector的使用 UVa 101 关于vector 的几个注意点 vector p p.push_back() ...
- OWASP 关于会话管理 - 译文 [原创]
英文原文:https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/Session_Management_Cheat_Shee ...
- python -服务器与客户端断电续传程序详细介绍
6.28自我总结 客户端与服务器之间文件传输断电续传 `通过判断文件大小,以及文件在读取中的指针位置的调整来解决断电续传问题' 1.程序目录 E:/断电续传 |___bil | |___common. ...
- 前端响应式痛点解决之box-sizing
前置 在 CSS 盒子模型的默认定义里,你对一个元素所设置的 width 与 height 只会应用到这个元素的内容区.如果这个元素有任何的 border 或 padding ,绘制到屏幕上时的盒子宽 ...
- 「Sqlserver」数据分析师有理由爱Sqlserver之九-无利益关系推荐Sqlserver书单
在前面系列文章的讲述下,部分读者有兴趣进入Sqlserver的世界的话,笔者不太可能在自媒体的载体上给予全方位的带领,最合适的方式是通过系统的书籍来学习,此篇给大家梳理下笔者曾经看过的自觉不错值得推荐 ...
- 如何挑选node docker镜像
如何挑选node docker镜像 在使用Jenkins构建前端项目的时候遇到一点问题: node的版本问题. 由于可能编译的项目历史不同,所依赖的node版本也各有千秋,直接把所有项目都升级到最新的 ...