目录
对promise的理解
一种处理异步编程的解决方案,本质是对象或者构造函数,内部存放在未来某个事件执行结束的结果(通常是异步操作)。
避免异步回调层层嵌套
js是单线程执行任务,一次执行一个任务,为解决此问题,js将任务执行模式分开为两种,异步和同步。
处理异步执行的任务通过回调方式进行处理
举个例子 一级分类的集合数组里面对应的每项item下还有 二级分类集合数据
异步请求一级分类获取 每项 再通过每项ID 请求二级分类集合 这样形成了异步请求层层嵌套
fetch(initOrgUrlC, {}).then(res => {
res.data.forEach((item)=>{
fetch(initOrgUrlById, {id:item.id}).then(res => {
this.arr = res.data
}).catch(err => {
console.log(err)
})
})
}).catch(err => {
console.log(err)
})
在这样的异步请求里面js不一定保证执行顺序,所谓回调地狱。promise是这种异步编程的解决方案。
promise有两个特点
1.对象的状态不会受外界影响,promise对象代表一个异步操作,promise有三种状态,
pending(进行中) fulfilled(成功) rejected(失败)
只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态
2.状态一旦改变,不会再变,任何时候都可以得到这个结果。promise对象状态的改变只有两种可能
从 pending -> fulfilled 或者 从 pending ->rejected 只要这两种情况发生状态就会凝固会一直保持这个结果
这时候已经定型(resolved)
这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
有了Promise
对象,就可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。此外,Promise
对象提供统一的接口,使得控制异步操作更加容易。
promise的缺点
1.无法取消promise,一旦新建会立即执行,无法中途取消
2.如果不设置回调函数,promise内部抛出的错误不会反应到外部
3.当处于pending状态时候,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
如果某些事件不断地反复发生,一般来说,使用 Stream 模式是比部署Promise
更好的选择。
promise基本用法
promise对象是一个构造函数,new Promise()来生成 promise实例
const promise = new Promise(function(reslove,reject){
if(/*异步操作成功*/){
resolve(value)
}else{
reject(error)
}
})
promise构造函数接收一个函数作为参数,该函数里有两个参数,resolve,reject,他们分别也是两个函数
resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;
reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。
then 函数
Promise
实例生成以后,可以用then
方法分别指定resolved
状态和rejected
状态的回调函数。
then 函数接收两个函数作为可选参数:
第一个回调函数是Promise
对象的状态变为resolved
时调用,
第二个回调函数是Promise
对象的状态变为rejected
时调用。
这两个函数都是可选的,不一定要提供。它们都接受Promise
对象传出的值作为参数。
promise.then(function(value){
//success
},function(err){
//failure
})
promise.then(onFulfilled, onRejected)
同时遵循下面几个规则:
-
如果可选参数不为函数时应该被忽略;
-
两个函数都应该是异步执行的,即放入事件队列等待下一轮 tick,而非立即执行;
-
当调用 onFulfilled 函数时,会将当前 Promise 的值作为参数传入;
-
当调用 onRejected 函数时,会将当前 Promise 的失败原因作为参数传入;
-
then 函数的返回值为 Promise。
then函数是异步执行!!! Promise 新建后就会立即执行。
使用promise案例
异步加载图片例子
function loadImageAsync(url){
return new Promise(function(reslove,reject){
const image = new Image();
image.onload = function (){
console.log('image suss')
reslove(image)
};
image.onerror = function (){
reject(new Error('could not load image at'+url))
};
image.src = url
})
}
const imgUrl = 'http://app.jbttech.com.cn/AppLogo/android/ic_launcher2_1.png'
const imgDom = loadImageAsync(imgUrl).then((res)=>{
console.log(res)
})
运行返回
promise ajax 封装
function ajax(url){
return new Promise(function (reslove,reject){
var req = new XMLHttpRequest()
req.open('GET',url,true)
req.onload = function (){
if(req.status===200){
reslove(req.responseText)
}else{
reject(new Error(req.statusText))
}
};
req.onerror = function (){
reject(new Error(req.statusText))
};
req.send();
})
}
var url = 'https://admin.jbttech.com.cn/initPage/initOrg'
ajax(url).then(function (value){
document.write('成功返回'+value)
}).catch(function (error){
document.write('错误'+error)
})
封装一个导出文件函数
function exportExcelPost(url, params) {
return new Promise((resolve, reject) => {
axios.post(url,params).then((res) => {
console.log('数据返回', res.data.msg)
resolve(res.data)
if (res.data.success == 'error' || res.data.success == 'fail') {
return
}
window.location.href = res.data.msg
}).catch((err) => {
console.log('解析错误', err)
reject(error)
})
})
}
Promise.prototype.then方法:链式操作
Promise 实例具有then
方法,也就是说,then
方法是定义在原型对象Promise.prototype
上的。
then
方法返回的是一个新的Promise
实例(注意,不是原来那个Promise
实例)。因此可以采用链式写法,即then
方法后面再调用另一个then
方法。
getJson('"/post/1.json"').then((res)=>{
return res.json
}).then(json=>{
//对json 进行处理
})
第一次回调函数then的值是一个新的promise,如果这个值也是一个异步操作,可以继续调用自身的then函数来处理
采用链式的then
,可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个Promise
对象(即有异步操作),这时后一个回调函数,就会等待该Promise
对象的状态发生变化,才会被调用。
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function (comments) {
console.log("resolved: ", comments);
}, function (err){
console.log("rejected: ", err);
});
//使用箭头函数
getJSON("/post/1.json").then(
post => getJSON(post.commentURL)
).then(
comments => console.log("resolved: ", comments),
err => console.log("rejected: ", err)
);
catch()函数
catch
方法是.then(null, rejection)
或.then(undefined, rejection)
的别名,用于指定发生错误时的回调函数。
axios.post('/posts.json').then(function(posts) {
// ...
}).catch(function(error) {
// 处理 axios.post 和 前一个回调函数运行时发生的错误
console.log('发生错误!', error);
});
上面代码中,axios.post()
方法返回一个 Promise 对象,
如果该对象状态变为resolved
,则会调用then()
方法指定的回调函数;
如果异步操作抛出错误,状态就会变为rejected
,就会调用catch()
方法指定的回调函数,处理这个错误。
另外,then()
方法指定的回调函数,如果运行中抛出错误,也会被catch()
方法捕获。
finally 函数
finally函数不管最后promise对象状态如何都会执行的操作
promise.then(res=>{
//...
}).catch(err=>{
console.log(err)
}).finally(()=>{
//...
})
服务器使用 Promise 处理请求,然后使用finally
方法关掉服务器
server.listen(port)
.then(function () {
// ...
})
.finally(server.stop);
all 函数
Promise.all()
方法用于将多个 Promise 实例,包装成一个新的 Promise 实例。
Promise.all()
方法的参数可以不是数组,但必须具有 Iterator 接口,且返回的每个成员都是 Promise 实例。
function queryData(){
return new Promise((resolve,reject)=>{
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
if (xhr.readyState != 4) return;
if (xhr.readyState == 4 && xhr.status == 200) {
// 处理正常结果
resolve(xhr.responseText);
} else {
// 处理异常结果
reject('服务器错误');
}
};
xhr.open('get', url);
xhr.send(null);
});
}
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a2');
var p3 = queryData('http://localhost:3000/a3');
var proArr = [p1,p2,p3]
Promise.all(proArr).then((res)=>{
console.log(res)
})
p
的状态由p1
、p2
、p3
决定,分成两种情况。
(1)只有p1
、p2
、p3
的状态都变成fulfilled
,p
的状态才会变成fulfilled
,此时p1
、p2
、p3
的返回值组成一个数组,传递给p
的回调函数。
(2)只要p1
、p2
、p3
之中有一个被rejected
,p
的状态就变成rejected
,此时第一个被reject
的实例的返回值,会传递给p
的回调函数。
race 函数
const p = Promise.race([p1, p2, p3]);
只要p1
、p2
、p3
之中有一个实例率先改变状态,p
的状态就跟着改变。那个率先改变的 Promise 实例的返回值,就传递给p
的回调函数。
Promise.race()
方法的参数与Promise.all()
方法一样
const p = Promise.race([
fetch('/resource-that-may-take-a-while'),
new Promise(function (resolve, reject) {
setTimeout(() => reject(new Error('request timeout')), 5000)
})
]);
p
.then(console.log)
.catch(console.error);
上面代码中,如果 5 秒之内fetch
方法无法返回结果,变量p
的状态就会变为rejected
,从而触发catch
方法指定的回调函数。