Promise
//异步请求的处理方式
/*
* @Description: 这种回调的方式有很多弊端:
1 如果我们自己封装的requestData, 那么我们在封装时候必须要自己设计好callback名称,并且使用好
2 如果我们使用的是别人封装的requestData或者一些第三方库,那么我们必须去看别人的源码或者文档,
才知道这个函数需要怎么获取结果
* @Author: baozi
* @Date: 2022-12-11 17:28:16
*/
const requestData = (url,successCallback,failtureCallback) =>{
// 模拟网络请求,异步return不出去结果
setTimeout(() =>{
// 拿到请求结果
// url传入某个值,请求成功
if(url === 'baozi') {
// 成功
let names = ['abc','cba','dba']
successCallback(names)
}else {
//否则请求失败
let errMessage = "请求失败"
failtureCallback(errMessage)
}
}
,3000)
}
requestData('baozi',(res) => {
console.log(res);
},
(err) => {
console.log(err)
})
// 更好的方案 Promise承诺(规范好了所有的代码编写逻辑)
const requestData2 = (url) => {
return '承诺'
}
const chengnou = requestData2()
/*
* @Description: Promis API
* @Author: baozi
* @Date: 2022-12-11 17:38:57
*/
// Promis 是一个类,当我们需要给予调用者一个承诺:
// 我会给你回调数据时,就可以创建一个Promise对象 new Promise
// 在通过new创建Promise对象时,我们需要传入一个回调函数, executor
// 当我们调用resolve回调函数时,会执行Promise对象的then方法传入的回调函数
// 当我们调用reject回调函数时,会执行Promise对象的catch方法传入的回调函数
// promise传入的回调函数会立即执行 , 这个函数称为 executor
// resolve 成功时 回调resolve
// reject 失败时 回调reject
const promise = new Promise((resolve,reject)=>{
console.log('Promise传入的函数执行');
resolve()
})
promise.then(()=>{
console.log('then方法执行拉');
})
promise.catch(()=>{
console.log('catch方法执行拉');
})
// then 方法传入的回调函数,会在Promise执行resolve函数时,被回调
// catch 方法传入的回调函数,会在Promise执行reject函数时,被回调
// 类比
class Person {
constructor(callback){
let foo = () => {
}
let bar = () => {
}
callback(foo,bar)
}
}
const p =new Person((foo,bar)=>{
foo()
bar()
});
// 异步请求的promise
function requestData3(url) {
// 异步请求的代码会被放入到executor中
return new Promise((resolve, reject)=>{
setTimeout(()=>{
if(url === 'baozi'){
let names = ['abc', 'def']
resolve(names)
}else {
let errMessage = '请求失败,url错误'
reject(errMessage)
}
},2000)
})
}
const promiseRes = requestData3()
// promiseRes.then(()=>{
// console.log('请求成功')
// }).catch(()=>{
// console.log('请求失败掉毛');
// })
// node环境不能单独使用 promiseRes.catch(()=>{})
// 写法二,then传入两个回调函数
promiseRes.then((res)=>{
console.log('请求成功',res)
},(err)=>{
console.log('请求失败',err);
})
// promise resolve详解
// Promise 划分状态
// 1. exectutor pending
// 2. 执行了resolve 状态:fulfilled、resolved(已敲定)
// 3. 执行reject 状态 rejected(已拒绝)
// 一旦确定 Promise状态不可更改
new Promise((resolve, reject) =>{
// pending
console.log('-----');
resolve() //处于fulfilled状态
// reject() 处于rejected状态
}).then(res=>{
},err =>{
})
/*
* @Description: Promise的resolve参数
1、 普通的值或者对象
2、 传入一个Promise 那么当前的Promise状态会由传入的Promise来决定
相当于状态进行了移交
3、 如果传入一个对象,并且这个对象有实现then方法,
那么也会执行该then方法(并且对象实现thenable),并且由该then方法决定后续状态
* @Author: baozi
* @Date: 2022-12-11 19:23:15
*/
/*
* @Description: then方法-接受两个参数
then方法是Promise对象上的一个方法:它其实是放在Promise的
原型上的Promise.prototype.then
* @Author: baozi
* @Date: 2022-12-11 20:13:23
*/
function Person2(){
}
// 加对象方法是添加在原型上
Person.prototype.eating = function(){}
// promise有哪些对象方法 直接打印对象看不见 enumerable为false的原因
console.log(Object.getOwnPropertyDescriptors(Promise.prototype));
// 同一个Promise可以被多次调用then方法
// 当我们的resolve方法被回调时,所有的then方法传入的回调函数都会被调用
// promise.then(res => {
// console.log('res1',res);
// })
// promise.then(res => {
// console.log('res2',res);
// })
// promise.then(res => {
// console.log('res3',res);
// })
// 2.then 方法传入的 回调函数 可以有返回值 返回值是Promise
// 如果返回的是一个普通的值,那么这个普通的值会被作为一个新的Promise的resolve的值
// 此时的链式调用是新的’aaaa'的Promise的then方法
promise.then(res => {
return 'aaaa'
}).then()
// 一个函数没有返回值 相当于返回 undefined
// 如果返回的是一个Promise , 相当于上面状态转移
promise.then(res => {
return new Promise((resolve,reject)=>{
})
})
// catch方法
// 1.当executor抛出异常时,也是会调用错误捕获的回调函数
// 2.通过catch方法来传入错误(拒绝)的回调函数
// Promise A+ 规范
promise.then(undefined,err => {
console.log(err);
})
promise.catch(res => {
console.log(res);
})
promise.then(res => {
//新的Promise ,这种方式捕获的是上一个promise的异常
// 优先捕获最上面的一层Promise异常
}).catch(err => {
})
// 3.拒绝捕获问题 在promise.then 中没有告诉怎么处理异常,程序会推出
promise.catch(err => {})
作者:程序员包子,转载请注明原文链接:https://www.cnblogs.com/coder-baozi/articles/16974654.html
coder-baozi一位菜鸟码农

promise 学习笔记
浙公网安备 33010602011771号