JavaScript
浅析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使用内容请搜索 以前的文章或继续浏览下面的相关文章希望大家以后多多支持 ！
