ES6 ------ 基础（三）——Promise 基本使用

Promise 基本使用

Promise 是 ES6 引入的解决异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数：Promise(excutor){}
Promise.prototype.then 方法
Promise.prototype.catch 方法

     // 实例化 Promise 对象const p = new Promise(function(resolve,reject){setTimeout(function(){// 成功let data = '数据库中的用户数据'resolve(data) // 失败let err = '数据读取失败'reject(err)},1000)})// 调用 promise 对象的 then 方法// 两个函数, 成功的形参叫value,失败的形参叫reasonp.then(function(value){  //成功console.log(value); },function(reason){     //失败console.log(reason); })

Promise 读取文件

读取方法一：调用方法读取文件

创建 为学.md 文件

 为之，则难者易易也不为，则易者亦难矣

创建 Promise读取文件.js 文件

 // 1.引入 fs 模块const fs = require('fs')// 2.调用方法读取文件fs.readFile('为学.md',(err, data)=>{// 如果失败,则抛出错误if(err) throw err// 如果没有,则输出内容console.log(data.toString());})

终端输入命令 node Promise读取文件.js 回车。

读取方法二：使用 Promise 封装

创建 为学.md 文件

 为之，则难者易易也不为，则易者亦难矣

创建 Promise读取文件.js 文件

 const p = new Promise(function(resolve,reject){fs.readFile('为学.md',(err, data)=>{// 判断如果失败if(err) reject(err)// 如果成功resolve(data)})})p.then(function(value){console.log(value.toString())},function(reason){console.log("读取失败!!");})

终端输入命令 node Promise读取文件.js 回车。
读取成功

读取失败(如 '为学.md' 的路径错误)

Promise 封装 AJAX

接口地址：https://api.apiopen.top/getJoke

 const p = new Promise((resolve, reject)=>{// 1.创建对象const xhr = new XMLHttpRequest()// 2.初始化xhr.open("GET","https://api.apiopen.top/getJoke")// 3.发送xhr.send()// 4.绑定事件, 处理响应结果xhr.onreadystatechange = function(){// 判断if(xhr.readyState === 4){// 判断响应状态码 200-299if(xhr.status >= 200 && xhr.status < 300){// 表示成功resolve(xhr.response)}else{reject(xhr.status);}}}})// 指定回调p.then(function(value){console.log(value);},function(reason){console.log(reason);})

成功输出

输出失败：404

Promise.prototype.then 方法

调用 then 方法 ，then 方法 的返回结果是 Promise 对象，对象的状态由回调函数的结果决定。
如果回调函数中返回的结果是 非 Promise 类型 的属性，状态为成功返回值为对象的成功值

非 promise 类型的属性

 // 创建 promise 对象const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据')// reject('出错啦')},1000)})const result = p.then(value => {console.log(value)// 1.非 promise 类型的属性return 123}, reason => {console.warn(reason) //console.warn() 在控制台上输出警告信息})console.log(result);

是 promise 对象

 // 创建 promise 对象const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据')// reject('出错啦')},1000)})const result = p.then(value => {console.log(value)// 2.是 promise 对象return new Promise((resolve, reject)=>{// resolve('ok')reject('error')})}, reason => {console.warn(reason) //console.warn() 在控制台上输出警告信息})console.log(result);

resolve('ok')的情况下：

reject('error')的情况下：

抛出错误

 // 创建 promise 对象const p = new Promise((resolve, reject) => {setTimeout(() => {resolve('用户数据')// reject('出错啦')},1000)})const result = p.then(value => {console.log(value)// 3.抛出错误throw '出错啦'}, reason => {console.warn(reason) //console.warn() 在控制台上输出警告信息})console.log(result);

Promise 实践

读取三个 .md 文件，三个文件合在一起输出

回调的方式（回调地狱）

 // 引入 fs 模块const fs = require("fs")const { resolve } = require("path/posix")//1.回调的方式fs.readFile('为学.md',(err, data1)=>{fs.readFile('插秧诗.md',(err,data2)=>{fs.readFile('观书有感.md',(err,data3)=>{let result = data1 + '\r\n' + data2 + '\r\n' + data3console.log(result);})})})

2. 通过 promise 实现

const fs = require("fs")const { resolve } = require("path/posix")// 2.使用 promise 实现const p = new Promise((resolve, reject)=>{fs.readFile('为学.md',(err,data)=>{resolve(data)})})p.then(value=>{return new Promise((resolve, reject)=>{fs.readFile('插秧诗.md',(err,data)=>{resolve([value, data])})})}).then(value => {return new Promise((resolve, reject)=>{fs.readFile('观书有感.md',(err,data)=>{//压入value.push(data)resolve(value)})})}).then(value=>{console.log(value.join('\r\n')); // \r\n 表示换行})

Promise-catch 方法

用来指定 promise 对象失败的回调。

使用 then 方法

 const p = new Promise((resolve, reject)=>{setTimeout(()=>{// 设置 p 对象的状态为失败, 并设置失败的值reject("出错啦")},1000)})p.then(function(value){},function(reason){console.error(reason);})

2. 使用 catch

 const p = new Promise((resolve, reject)=>{setTimeout(()=>{// 设置 p 对象的状态为失败, 并设置失败的值reject("出错啦")},1000)})p.catch(function(reason){console.warn(reason);})

阮一峰 ES6-Promise：https://es6.ruanyifeng.com/#docs/promise

不积跬步无以至千里不积小流无以成江海

ES6 ------ 基础（三）——Promise 基本使用相关推荐

ES6基础5（Promise）-学习笔记
文章目录 ES6基础5(Promise)-学习笔记 Promise 三个状态状态转换手写Promise源码同步异步概念 jquery中串行并行 async-await 微任务宏任务 ES6基 ...
【ES6基础】Map与WeakMap
开篇 ES6里除了增加了Set(集合)类型外(笔者在这篇文章<Set与WeakSet>有过介绍),今天的这篇文章笔者将继续介绍ES6引入的新类型--Map(映射类型)和其对应的弱类型Wea ...
ES6基础2（块级作用域、数组对象解构）-学习笔记
文章目录 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域数组解构对象解构字符串解构函数的参数解构 ES6基础2(块级作用域.数组对象解构)-学习笔记块级作用域 //let c ...
android log 如何获取double类型后小数点的值_【ES6基础】Symbol介绍：独一无二的值...
开篇 ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是 ...
【ES6】阮一峰ES6学习之Promise(一)
Promise 一.含义 1. 概念 2. 特点 3. 基本用法 4. 为什么要用 Promise 1. 指定回调函数的方式更加灵活 2. 支持链式调用,可以解决回调地狱的问题用Promise实现A ...
Part2：面向对象、原型链、函数、ES6基础语法
一.面向对象标记语言:HTML5/CSS3 编程语言:编程思想面向过程 C 面向对象 JAVA.PHP.C#(ASP.NET).JavaScript- 1.单例设计模式 let name='和冉' ...
【ES6基础】Symbol介绍：独一无二的值
开篇 ES6之前我们都清楚JS有六种数据类型:Undefined.Null.布尔值(Boolean).字符串(String).数值(Number).对象(Object),今天笔者讲的Symbol类型是 ...
【JavaScript 教程】ES6 中的 Promise对象详解
[JavaScript 教程]ES6 中的 Promise对象详解 1.Promise对象含义 promise是异步编程的一种解决方法. 所谓promise,简单说是一个容器,里面保存着某个未来才会 ...
ES6基础：变量的解构赋值
ES6基础系列之变量的解构赋值 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构.这种方式的出现大大提高了代码的扩展性前言一.数组的解构赋值二.对象的解构赋值三.函 ...
ES6基础：let和const
ES6基础之let和const 变量声明是我们在学习一门语言时,最先了解的部分之一.不要忽略它,我们一起来看看ES6中新增的两种变量声明命令吧- 在开始ES6系列之初,我们就应该遵循尽量或者完全将它们 ...