day8 Promise
引入
回调地狱
回调函数中 嵌套 其他回调函数 例子: 多个文件依次读取
解决方法: 使用ES6 中的 Promise, 来解决 回调地狱的问题
基本概念
- Promise 是一个 构造函数, 既然是构造函数 就可以new Promise() 得到一个 Promise 的实例
- 在 Promise 上, 有两个函数 resolve(成功后的回调) 和 reject(失败后的回调)
- 在 Promise 构造函数 Prototype 属性上, 有.then() 方法
- Promise 表示一个 异步操作, 每当我们new 一个Promise 的实例, 就表示一个异步操作
- 异步操作有两种状态
- 状态1: 异步执行成功, 需要调用 resolve 返回结果
- 状态2: 异步执行失败, 需要调用 reject 返回结果
- 由于异步操作无法使用 return 把操作结果返回, 这时候, 只能使用回调函数 来把结果(成功/失败)返回.
- 我们可以在 new 出来的 Promise 实例上, 调用 .then()方法, **[预先] **为这个 Promise异步操作, 指定 成功 和 失败 回调函数.
形式上 和 具体的 异步操作的区别
形式上 的异步操作: 我们知道它是一个异步操作, 但是具体做什么事情, 目前还不清楚
var promise = new Promise()
具体的 的异步操作: 使用 function 指定一个具体的 异步操作
var promise = new Promise(function(){
// 这个 fun 内部写的就是具体的异步操作
})
Promise实例 只要被创建 就会立即执行里面的异步方法
- 每当 new 一个 Promise 实例的时候, 就会执行 异步操作中的代码
- 也就是说, new的时候, 除了能够得到一个 Promose 实例之外, 还会立即调用 我们传递的 function, 并执行function 中的 异步操作代码
通过 .then() 指定成功 和 失败的回调
const p = new Promise(function(res, rej){
// 成功返回res 失败返回rej
res(data)
rej(err)
})
p.then(function(data){
console.log(data)
},function(err){
console.log(err)
})
注意: 通过.then 指定回调函数的时候, 成功的回调 必须传, 失败的回调 可以省略不传
Promise 正确使用方式
image
需求: 依次读取文件1 文件2 文件3
捕获异常的两种方式
1.Promise 执行失败, 但是不影响后续, 此时, 我们可以单独为 每个Promise, 通过 .then 指定一下失败回调
image
2.和上面需求刚好相反, Promise 执行失败,后续直接终止, 可以使用 .catch() 指定回调函数 捕获错误
作用: 如果执行过程中, 有任意一步失败, 就会立即中终止所有 Promise的执行, 并马上进入.catch() 中, 抛出异常
.catch(err => console.log(err.message))
Jquery 中Ajax使用Promise指定成功回调函数
$.ajax({
url: '/path/to/file',
type: 'GET',
dataType: 'xml/html/script/json/jsonp',
data: {param1: 'value1'},
})
.then(function(data){
console.log(data)
})
