Promise 详解
1、Promise的特点
- Promise 有一个参数,这个参数是一个回调函数,参数中又有两个参数resolve和reject,这两个参数也是两个回调函数,其中resolve必须写;
- 无论成功还是失败,都会返回一个Promise对象,继而用then和catch来处理这个Promise对象;
- 记住: 成功调resolve 执行then; 失败调reject 执行 catch;
2、什么情况下使用Promise?
- 一般情况下是有异步操作时,使用promise对这个异步操作进行封装;
3、Promise解决了什么:
- 一般情况下,如果请求成功,执行某个函数,看着比较混乱,一个回调还比较容易分清,如果是多个回调的话,代码易读性可想而知
4、模拟Promise 链式异步请求调用
//需求模拟异步请求,假设页面加载后2秒后打印6个 你好 然后隔3秒后再打印 6 个vue.js 然后再隔3秒打印 米斯特付
function fn(){
return new Promise((resolve,reject)=>{
setTimeout(()=>{ //只要是网络请求,都是在Promise那个对象里面,它的那个回调函数中,
resolve("你好!"); //请求结果的处理,都是在Promise下面的那个 .then 中做处理;
},2000);
}).then((resolve)=>{
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("vue.js")
},2000);
}).then((resolve)=>{
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
console.log(resolve)
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve("米斯特付");
},3000);
}).then((resolve)=>{
console.log(resolve)
});
});
});
}
//这种编程思维就是 Promise 的链式调用;
fn();
这就是一个模拟的,最后会在浏览器控制台会2秒后打印6个 你好 然后隔3秒后再打印 6 个vue.js 然后再隔3秒打印 米斯特付;
- 可以最结果进行 return 处理,return之后的结果还是一个Promise 对象,所以可以接续 then 处理;
5、Promise 的三种状态:
6、Promise 同时发出多个异步请求:
详细例子如下:
function fn2(resolve){
return new Promise(resolve); //Promise括号中必须要有一个参数
}
Promise.all([
fn2((resolve,reject)=>{
setTimeout(()=>{
resolve("Promise");
},2000)
}),
fn2((resolve,reject)=>{
setTimeout(()=>{
resolve("all")
},3000)
})
]).then((resolves)=>{
console.log(resolves)
});
//现在的 fn2 函数就像是 我们做项目时封装的一个 resquest异步请求函数;
打印结果如下图:
打印的是一个数组,数组中是两个异步请求的结果;
汝741: how much
兰��: 不缺你这一篇
目的性极强: 一直说我AMap is not defined是还需要下载其它的嘛
胡子哥哥呀: 怎么能将粒子背景颜色改成图片背景
秃头李大爷: 你好,你最后解决了没