ES 6 系列 - Promise
一、含义
是异步编程的一种解决方案,es 6 将其变成了标准。
简单的说是一个容器,里面保存了某个未来才会结束的事件(通常是一个异步操作)的结果。语法上, Promise 是一个对象,从它可以获取异步操作的消息。
Promise 对象有两个特点:
1.状态,Promise 对象的状态不受外界影响。一个 Promise 对象代表一个异步操作,只会有三种状态:pending(进行中)、fulfilled(已成功)、rejected(已失败)。这三种状态只会受到异步操作的结果影响,其他都不能影响状态。
2.一旦状态改变,则就无法再变,任何时候都可以得到这个结果。状态改变后,会一直保持这个结果,称之为 resolved(已定型)。且在改变发生之后,再对 Promise 对象添加回调函数,也会立即得到这个结果(然而这句没理解)。
二、基本用法
const promise = new Promise((resolve, reject) => {
// ... some code if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
目前项目中常用的写法:
new Promise((resolve, reject) => {
login(username, userInfo.password).then(response => {
const data = response.data
setToken(data.token)
commit('SET_TOKEN', data.token)
resolve()
}).catch(error => {
reject(error)
})
resolve 和 reject 函数由 js 引擎提供,不用自己部署;
resolve 的作用是,将 Promise 对象的状态从 pending 变成 fulfilled ,在异步操作成功时候调用,并将操作的结果,作为参数传递出去;
reject 的作用是,将 Promise 对象的状态从 pending 变成 rejected,在异步操作失败时候调用,并将操作报出的错误,作为参数传递出去;
Promise 实例生成后,可以用 then 分别指定 fulfilled 状态和 rejected 状态的回调函数:
promise.then(function(value) {
// success
}, function(error) {
// failure
});
一般而言,Promise 在新建后就会立即执行,然后执行脚本中接下来的同步任务,所有的同步任务执行完成后,才会执行 then 方法指定的回调函数。
三、用途
1.加载图片
const preloadImage = function (path) {
return new Promise(function (resolve, reject) {
const image = new Image();
image.onload = resolve;
image.onerror = reject;
image.src = path;
});
};
2.ajax请求
ES 6 系列 - Promise的更多相关文章
- OpenGL ES教程系列(经典合集)
为了搞透播放器的开发,花了些时间收集这些资料,虽然我已经搞定opengles渲染视频的内容,但是想玩玩opengles,往深里玩,图像处理这块是个好的方向,所以opengles是值得好好学的. O ...
- js 深入原理讲解系列-Promise
js 深入原理讲解系列-Promise 能看懂这一题你就掌握了 js Promise 的核心原理 不要专业的术语,说人话,讲明白! Q: 输出下面 console.log 的正确的顺序? const ...
- es6 快速入门 系列 —— promise
其他章节请看: es6 快速入门 系列 Promise Promise 是一种异步编程的选择 初步认识Promise 用 Promise 来实现这样一个功能:发送一个 ajax,返回后输出 json ...
- JS 异步系列 —— Promise 札记
Promise 研究 Promise 的动机大体有以下几点: 对其 api 的不熟悉以及对实现机制的好奇; 很多库(比如 fetch)是基于 Promise 封装的,那么要了解这些库的前置条件得先熟悉 ...
- Android OpenGL ES 入门系列(二) --- 环境搭建
转载请注明出处 本文出自Hansion的博客 本章介绍如何使用GLSurfaceView和GLSurfaceView.Renderer完成在Activity中的最简单实现. 1.在AndroidMan ...
- Android OpenGL ES 入门系列(一) --- 了解OpenGL ES的前世今生
转载请注明出处 本文出自Hansion的博客 OpenGL ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API 的子集,针对手机.PDA和游戏主机等嵌 ...
- ES 6 系列 - Module 的语法
es 6 大幅度优化了模块化编程的规范. 写在前面:在 es6 之前,说起 js 的模块化,一般都避不开 CommonJs 和 AMD 两种方案.这两种方案,前者应用于服务器,后者应用于浏览器.而 e ...
- ES 6 系列 - Proxy
Proxy 用于修改某些操作的默认行为,等同于在语言层面做出修改,所以是一种“元编程”,即对编程语言进行编程. 简单地理解,就是在目标对象之前假设一层“拦截”,外界对改对象的访问,都必须先通过这层拦截 ...
- ES 6 系列 - 对于常用对象的拓展 api
本篇中学习并记录可能会比较常用的 api ,详细请自行查找相关资料. 一.字符串的拓展 es 6 加强了对于 Unicode 的支持.javascript 允许采用 \uxxxxx 的方式表示一个字符 ...
随机推荐
- 微信小程序项目实战 - 菜谱大全
1. 项目简介 最近研究小程序云开发,上线了一个有关菜品查询的小程序.包括搜索.分享转发.收藏.查看历史记录等功能.菜谱 API 来自聚合数据.云开发为开发者提供完整的云端支持,弱化后端和运维概念,无 ...
- ASP.NET Core 判断请求是否为Ajax请求
我们可以通过HTTP请求头来判断是否为Ajax请求,Ajax请求的request headers里都会有一个key为x-requested-with,值为XMLHttpRequest的header 所 ...
- 在Winform开发中使用FastReport创建报表
FastReport.Net是一款适用于Windows Forms, ASP.NET和MVC框架的功能齐全的报表分析解决方案.可用在Microsoft Visual Studio 2005到2015, ...
- Hibernate各种基本注解及一对一(多)关系映射采坑笔记
hibernate提供两种方式配置关系映射,一种XMl配置,一种注解.SpringBoot已经自带了hibernate注解方式,我也是特别喜欢使用注解,特此记下常用的知识点. 1.基本注解 @Tabl ...
- SpringBoot整合定时任务异步任务
1.定时任务 1.开启定时任务 @SpringBootApplication //开启定时任务 @EnableScheduling public class SpringBootDemoApplica ...
- 比官方文档更易懂的Vue.js教程!包你学会!
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由蔡述雄发表于云+社区专栏 蔡述雄,现腾讯用户体验设计部QQ空间高级UI工程师.智图图片优化系统首席工程师,曾参与<众妙之门> ...
- JS 执行上下文
先看个小例子 function fn(){ console.log(a);//undefined; var a = 1; } fn(); 为什么打印出来的是 undefined 呢? 执行上下文概念 ...
- 结对项目:ATM
一:结对项目名称:ATM 二:源代码及单元测试代码网址链接:https://github.com/tpp531853660 三:结对人的博客链接:http://www.cnblogs.com/Joan ...
- 将iso镜像转换为docker镜像
为什么不用官方的镜像? 不是不想使用,而是官方镜像提供的功能实在是太少了,不信的话,你pull一个ubuntu:latest的进行,你看有没有wget.curl.ssh这些功能,就连最简单的ifcon ...
- 【问题解决方案】editplus中批量将ANSI转换为utf-8
来自一个用editplus写java程序但是上传到GitHub里中文乱码的故事 大致步骤: editplus全部打开之后(打开为何种编码不重要): (全部打开是指在左下方的文件列表选中-->右击 ...