浅析Promise的介绍及基本用法
Promise是ES6引入的异步编程的新解决方案。语法止Promise是-一个构造函数,
用来封装异步操作并可以获取其成功或失败的结果。
- Promise 构造函数: Promise (excutor) {}
- Promise.prototype.then 方法
- Promise.prototype.catch 方法
Promise的基本使用
实例化Promise
new Promise()
在实例化的时候接受一个参数, 这个参数是一个函数。
这个函数有两个形参,resolve 和 reject
var promise = new Promise((resolve,reject) => { // 里面用于处理异步操作 })
我们在这里使用定时器来模拟异步操作
promise有三种状态,分别是:进行中、成功、失败。
var promise = new Promise((resolve,reject) => { // 这是一个异步操作 setTimeout(() => { // 这里模拟获取数据 var data = '获取的数据' // 在得到数据之后我们可以调用resolve和reject方法来改变promise对象的状态 resolve(data) // resolve可以将promise对象的状态改为成功,reject()可以promise将对象状态改为失败 }, 1000); })
promise的then方法
当promise对象的状态为成功或者失败时可以调用then方法
then方法接受两个参数,而且两个参数都是函数类型的值
promise对象的状态为成功时,会调用then方法的第一个参数
也是就说promise对象的状态为失败时,会调用then方法的第二个参数
第二个参数时可选的,如果不需要捕获失败可以省略
参数分别有一个形参,成功的函数叫value, 失败的err
promise.then(value => { // 当异步函数里面调用了resolve(data),也是就说promise对象的状态为成功时,会调用then方法的第一个参数 console.log(value); // 'hello world' value就是resolve()方法传递过来的数据 }, err => { // 当异步函数里面调用了reject(data),也是就说promise对象的状态为失败时,会调用then方法的第二个参数 console.log(err); // err就是reject()方法传递过来的数据 })
调用then方法then方法的返回结果是Promise 对象,对象状态由回调函数的执行结果决定
如果回调函数中返回的结果是非promise类型的属性,状态为成功,返回值为对象的成功的值
let data = promise.then((val) => { // console.log(val.result); // 返回非Promise的情况 // return val.result // 返回Promise的情况 return new Promise( (resolve, reject) => { // resolve('ok') reject('err') }) }, err => { console.log(err); }) // 返回非Promise的情况 状态为成功,返回值为对象的成功的值 // 返回结果是Promise 对象,对象状态由回调函数的执行结果决定 // 抛出错误,状态为失败 console.log(data);
所以then可以链式调用使用方法可参见下面promise应用示例。
promise的catch方法
promise的catch方法是then(null, rejection)的别名,用于指定发生错误时的回调
Promise对象的状态为resolve,就会调用then方法的指定回调函数
const promise = new Promise((resolve, reject) => { resolve('ok') }) promise.then(val => { console.log(val); // ok }).catch(err => { console.log(err); })
如果promise的状态为rejected就会调用catch方法的回调函数来处理这个问题。
const promise = new Promise((resolve, reject) => { reject('err') }) promise.then(val => { console.log(val); }).catch(err => { console.log(err); // err })
如果then方法在运行中出现错误也会被catch方法捕获
const promise = new Promise((resolve, reject) => { resolve('err') }) promise.then(val => { console.log('ok'); // ok throw '出错了!!' // then里面抛出的错误会继续被catch捕获 }).catch(err => { console.log(err); // 出错了!! })
promise对象的错误具有冒泡的性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch捕获。
const promise = new Promise((resolve, reject) => { resolve('ok') }) promise.then(val => { return new Promise((resolve, reject) => { reject('err') }) }) .then(val => { return new Promise((resolve, reject) => { reject('err') }) }) .catch(err => { // 以上产生的错误都可以被catch捕获到 console.log(err); // err })
一般来说,不要在then方法中定义rejected状态回调函数(即then的第二个参数),而应总是使用catch方法。
promise应用
promise读取文件,多个文件连续调用
在这个例子中我们用到了Node.js的文件模块
// 读取文件信息 const fs = require('fs')
在下面代码中我们使用了promise包装了异步函数
我们先来看看正常的文件读取操作
// 读取文件信息 const fs = require('fs') // 如果读取失败err就是一个错误对象,读取成功data就是数据 fs.readFile('./01.txt', (err, data) => { // 判断是否出现错误,如果读取错误就打印错误对象。 if (err) { console.log(err); return } console.log(data.toString()); })
我们如果想在读取成功之后继续读取文件,就需要在回调函数中继续使用fs.readFile...去读取文件,嵌套层次一多,这样一来就会形成回调地狱。
接下来我们使用Promise的方式来读取文件
// 读取文件信息 const fs = require('fs') const promise = new Promise((resolve, reject) => { fs.readFile('./01.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) promise.then(val => { console.log(val.toString()); // 返回一个Promise对象 return new Promise((resolve, reject) => { fs.readFile('./02.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) }, err => { console.log(err); }) // 上一个then里面返回的是一个promise对象,我们可以继续.then .then(val => { console.log(val.toString()); return new Promise((resolve, reject) => { fs.readFile('./03.txt', (err, data) => { if (err) return reject(err) resolve(data) }) }) }, err => { console.log(err); }) .then(val => { console.log(val.toString()); }, err => { console.log(err); })
promise封装ajax请求
封装了ajax请求,使用then获取结果,让代码看起来更加简洁,解决了回调地狱的问题
const promise = new Promise((resolve, reject) => { // 创建对象 const xhr = new XMLHttpRequest() // 初始化 xhr.open("GET", 'https://api.apiopen.top/getSongPoetry?page=1&count=20') // 发送 xhr.send() // 绑定事件处理响应结果 xhr.onreadystatechange = function () { // 判断 // 进入最后一个阶段,所有的响应体都回来了 if (xhr.readyState === 4) { // 判断响应码 if (xhr.status >= 200 && xhr.status < 300) { // 表示成功 // console.log(JSON.parse(xhr.response)); resolve(JSON.parse(xhr.response)) } else { reject(xhr.status) } } } }) // 指定回调 promise.then((val) => { console.log(val); }, err => { console.log(err); })
到此这篇关于浅析Promise的介绍及基本用法的文章就介绍到这了,更多相关Promise使用内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/qq_54527592/article/details/120817037
相关文章
- 有时为了网站安全和版权问题,会对自己写的php源码进行加密,在php加密技术上最常用的是zend公司的zend guard 加密软件,现在我们来图文讲解一下。 下面就简单说说如何...2016-11-25
- ps软件是现在很多人都会使用到的,HSL面板在ps软件中又有着非常独特的作用。这次文章就给大家介绍下ps怎么使用HSL面板,还不知道使用方法的下面一起来看看。  ...2017-07-06
- 许多的朋友对于Plesk控制面板应用不是非常的了解特别是英文版的Plesk控制面板,在这里小编整理了一些关于Plesk控制面板常用的使用方案整理,具体如下。 本文基于Linu...2016-10-10
使用insertAfter()方法在现有元素后添加一个新元素
复制代码 代码如下: //在现有元素后添加一个新元素 function insertAfter(newElement, targetElement){ var parent = targetElement.parentNode; if (parent.lastChild == targetElement){ parent.appendChild(newEl...2014-05-31使用percona-toolkit操作MySQL的实用命令小结
1.pt-archiver 功能介绍: 将mysql数据库中表的记录归档到另外一个表或者文件 用法介绍: pt-archiver [OPTION...] --source DSN --where WHERE 这个工具只是归档旧的数据,不会对线上数据的OLTP查询造成太大影响,你可以将...2015-11-24- 大概有如下步骤 新建项目Bejs 新建文件package.json 新建文件Gruntfile.js 命令行执行grunt任务 一、新建项目Bejs源码放在src下,该目录有两个js文件,selector.js和ajax.js。编译后代码放在dest,这个grunt会...2014-06-07
如何使用php脚本给html中引用的js和css路径打上版本号
在搜索引擎中搜索关键字.htaccess 缓存,你可以搜索到很多关于设置网站文件缓存的教程,通过设置可以将css、js等不太经常更新的文件缓存在浏览器端,这样访客每次访问你的网站的时候,浏览器就可以从浏览器的缓存中获取css、...2015-11-24jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 如果要全面支持 IE,并混合...2014-05-31安装和使用percona-toolkit来辅助操作MySQL的基本教程
一、percona-toolkit简介 percona-toolkit是一组高级命令行工具的集合,用来执行各种通过手工执行非常复杂和麻烦的mysql和系统任务,这些任务包括: 检查master和slave数据的一致性 有效地对记录进行归档 查找重复的索...2015-11-24- C#注释的一些使用方法浅谈,需要的朋友可以参考一下...2020-06-25
- 一、下载 mysqlsla [root@localhost tmp]# wget http://hackmysql.com/scripts/mysqlsla-2.03.tar.gz--19:45:45-- http://hackmysql.com/scripts/mysqlsla-2.03.tar.gzResolving hackmysql.com... 64.13.232.157Conn...2015-11-24
- 目前,JSON已经成为最流行的数据交换格式之一,各大网站的API几乎都支持它。我写过一篇《数据类型和JSON格式》,探讨它的设计思想。今天,我想总结一下PHP语言对它的支持,这是开发互联网应用程序(特别是编写API)必须了解的知识...2015-10-30
- 无限级分类在开发中经常使用,例如:部门结构、文章分类。无限级分类的难点在于“输出”和“查询”,例如 将文章分类输出为<ul>列表形式; 查找分类A下面所有分类包含的文章。1.实现原理 几种常见的实现方法,各有利弊。其中...2015-10-23
- php类的使用实例教程 <?php /** * Class program for yinghua05-2 * designer :songsong */ class Template { var $tpl_vars; var $tpl_path; var $_deb...2016-11-25
- 前几天在百度知道里面看到有人问PHP中双冒号::的用法,当时给他的回答比较简洁因为手机打字不大方便!今天突然想起来,所以在这里总结一下我遇到的双冒号::在PHP中使用的情况!双冒号操作符即作用域限定操作符Scope Resoluti...2015-11-08
- mysqli封装了诸如事务等一些高级操作,同时封装了DB操作过程中的很多可用的方法。应用比较多的地方是 mysqli的事务。...2013-10-02
Postman安装与使用详细教程 附postman离线安装包
这篇文章主要介绍了Postman安装与使用详细教程 附postman离线安装包,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-03-05- Promise是异步编程的一种解决方案,在ES6中Promise被列为了正式规范,统一了用法,原生提供了Promise对象。接下来通过本文给大家介绍Promise的介绍及基本用法,感兴趣的朋友一起看看吧...2021-10-21
- 基本思路: 通过使用jquery选择器得到对应表单的jquery对象,然后使用attr方法修改对应的action 示例程序一: 默认情况下,该表单会提交到page_one.html 点击button之后,表单的提交地址就会修改为page_two.html 复制...2014-06-07
- 这篇文章主要介绍了vs2019安装和使用详细图文教程,本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-06-25