文章目录

Promise简介
promise的方法
Promise封装读取文件
使用promise封装AJAX请求
小结：Promise的优点
Promise.prototype.then方法
- Promise.prototype.then方法的返回值
- then的链式调用
Promise解决回调地狱实例
Promise的catch参数

Promise简介

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

promise的方法

Promise构造函数: Promise (excutor)
Promise.prototype.then方法
Promise.prototype.catch方法
eg：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<body><script>// 实例化Promise对象const p = new Promise(function (resolve,reject){setTimeout(function (){   let data = '数据库中的数据'resolve(data)//对象状态变成成功/*  let err = '数据读取失败'reject(err)//对象状态变成失败*/},1000)});// 调用promise对象的then方法，对应上面的resolve和rejectp.then(function (value){// 状态是成功的时候调用该函数，即如果调用resolve就调用该函数 console.log(value)   },function (reason){// 状态失败调用该函数,即如果调用reject就调用该函数console.error(reason) })</script>
</body>
</html>

Promise有3种状态:初始化完成、成功、失败

Promise封装读取文件

不使用Promise读取文件

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

Promise封装读取文件

// 1.引入fs模块
const fs = require('fs');// 2.调用方法读取文件
// fs.readFile('./resources/为学.md', (err, data) => {//     // 如果失败则抛出错误
//     if (err) throw err;
//     // 如果没出错则输出内容
//     console.log(data.toString());// })// 3. 使用Promise封装
const p = new Promise(function (resolve, reject) {//读取文件是异步的 fs.readFile('./resources/为学.md', (err, data) => {// 如果失败则抛出错误if (err) reject(err);// 如果成功resolve(data);
})})p.then(function (value){// 如果没出错则输出内容console.log(value.toString());
},function (reason){console.log('读取失败')
})

使用promise封装AJAX请求

   <script>const p = new Promise((resolve,reject)=>{// Promise把AJAX请求包起来，看什么时候返回成功，什么时候返回失败// 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){if(xhr.status>=200&&xhr.status<300){// 表示成功resolve(xhr.response) }else{reject(xhr.status)}}}})// 指定Promise的回调p.then(function (value){console.log(value)},function (reason){console.log(reason)})</script>

小结：Promise的优点

通过上述练习我们可以看出Promise的大致思路是，在Promise的构造函数中用resolve、reject指出成功和失败的地方，然后再Promise.prototype.then中指出成功和失败的回调函数。

所以使用Promise封装读取文件可以是代码结构更加清晰，减少代码缩进避免回调地狱，使代码更加精炼。

Promise.prototype.then方法

Promise.prototype.then方法的返回值

Promise.prototype.then方法的返回值也是一个Promise对象，它的状态由回调函数的执行结果决定：

如果回调函数中返回的结果是非promise 类型的属性，它的状态为成功，并且它的值为该回调函数中返回的结果。
eg：

    <script>// 实例化Promise对象const p = new Promise((resolve,reject)=>{setTimeout(()=>{   // resolve('用户数据')reject('失败')},1000)   });const result = p.then(value=>{console.log(value) return 123  },reason=>{console.error(reason) return 456 })console.log(result)</script>

如果回调函数没有指定返回结果，那么默认值是返回undefine，不是Promise类型的，所以它的状态是成功

如果回调函数中返回的结果是promise 类型的属性，它的状态为该返回Promise的状态，并且它的值为返回Promise的值（参数）。
eg：

   <script>// 实例化Promise对象const p = new Promise((resolve,reject)=>{setTimeout(()=>{   resolve('用户数据')// reject('失败')},1000)   });const result = p.then(value=>{console.log(value) return new Promise((resolve,reject)=>{resolve('OK')}) },reason=>{console.error(reason) return 456 })console.log(result)</script>

eg：

如果抛出错误，它的状态为失败，并且它的值为抛出来的值。

   <script>// 实例化Promise对象const p = new Promise((resolve,reject)=>{setTimeout(()=>{   resolve('用户数据')// reject('失败')},1000)   });const result = p.then(value=>{console.log(value) throw new Error('出错啦')},reason=>{console.error(reason) return 456 })console.log(result)</script>

then的链式调用

因为then的返回值有可能是Promise所以可以继续调用then，即链式调用。
eg：

        p.then(value=>{},reason=>{}).then(value=>{},reason=>{})

then方法的回调函数中可以继续嵌套异步任务。

Promise解决回调地狱实例

实现多个文件读取：

普通写法（出现回调地狱）

// 引入fs模块
const fs = require('fs')fs.readFile('./resources/为学.md', (err, data1) => {fs.readFile('./resources/插秧诗.md', (err, data2) => {fs.readFile('./resources/观书有感.md', (err, data3) => {let result = data1 +'\n'+ data2 +'\n'+ data3console.log(result)})})
})

输出：

Promise实现

// 引入fs模块
const fs = require('fs')const p = new Promise((resolve, reject) => {fs.readFile('./resources/为学.md', (err, data) => {resolve(data)})
})
p.then(value => {// value的值就是resolve或reject传过来的值return new Promise((resolve, reject) => {fs.readFile('./resources/插秧诗.md', (err, data) => {resolve([value,data])//返回的是 为学的data和插秧诗的data})})
}).then(value => {// 根据Promise的特性,此时.then,就是读取完插秧诗.thenreturn new Promise((resolve, reject) => {fs.readFile('./resources/观书有感.md', (err, data) => {value.push(data)resolve(value)})})
}).then(value => {console.log(value.join('\n'))
})

输出：

优点：不会出现回调地狱

Promise的catch参数

用来指定promise的失败回调
eg：

        const p =new Promise((reslove,reject)=>{setTimeout(()=>{// 设置p对象reject('失败了')},1000)})p.catch(function (reason){console.log(reason)})/*等价于p.then(function (value){},function (reason){console.log(reason)})*/

ES6-Promise简介相关推荐

前端js进阶之ES6 Promise(承诺)用法小结笔记、详细解释（resolve，catch，catch）历史最通俗易懂的承诺
什么是Promise? 英文翻译:承诺! js里: Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all.reject.resolve这几个方法,原型上有then.catch ...
promise简介以及使用方法
Promise简介 es6原生提供的Promise Promise 对象代表了未来将要发生的事件,用来传递异步操作的消息简单来讲promise就是用于处理异步任务的 Promise也可以将异步任务队 ...
十分钟快速了解 ES6 Promise
转载自十分钟快速了解 ES6 Promise 什么是Promise Promise最早由社区提出并实现,典型的一些库有Q,when, bluebird等:它们的出现是为了更好地解决JavaScrip ...
解读ES6 Promise
详解ES6 Promise异步文章目录详解ES6 Promise异步前言一.Promise是什么呢... 二.resolve 三.reject 四.then() & catch() 五 ...
流程控制： jQ Deferred 与 ES6 Promise 使用新手向入坑！
谢谢n͛i͛g͛h͛t͛i͛r͛e͛大大指出的关于Promise中catch用的不到位的错误,贴上大大推荐的文章Promise中的菜鸟和高阶错误,文章很详细说明了一些Promise使用中的错误和指导. ...
es6 Promise是什么?
# es6 Promise是什么? 1. Promise 是一个构造函数自带三个方法 all.resolve.reject,原型上(prototype)有then.catch等的几个常用的方法. ` ...
ES6 — Promise基础用法详解（resolve、reject、then、catch,all,）
ES6 - Promise基础用法详解 Promise 是一个构造函数,它自身拥有all.reject.resolve这几个眼熟的方法, 原型上有then.catch等同样熟悉的方法. 所以,在开始一 ...
ES6 promise 用法小结
ES6 promise 用法小结 Js 是一⻔单线程语言,早期解决异步问题,大部分是通过回调函数进行. 比如我们发送 ajax 请求,就是常见的一个异步场景,发送请求后,一段时间服务器给我们响应,然后 ...
Vue进阶（四十五）：精解 ES6 Promise 用法
文章目录一.前言二.链式操作用法三.reject 用法四.catch 用法五.all 用法六.race 用法七.总结八.拓展阅读一.前言复杂难懂概念先不讲,我们先简单粗暴地把Pro ...
ES6 Promise原理
ES6 Promise原理一.Promise是什么二.为什么会有Promise 1.回调地狱 + 异步同步事件调用顺序带来的双重伤害 2.回调事件的分离三.Promise的三种状态 1.reso ...

ES6-Promise简介

文章目录

Promise简介

promise的方法

Promise封装读取文件

使用promise封装AJAX请求

小结：Promise的优点

Promise.prototype.then方法

Promise.prototype.then方法的返回值

then的链式调用

Promise解决回调地狱实例

Promise的catch参数

ES6-Promise简介相关推荐

最新文章

热门文章