// 执行输出结果：Promise的结构体中也是主线程、主线程、微任务 Promise、宏任务 setTimeout
知识点（细节）
-
执行顺序：主线程>微任务>宏任务
-
Promise 的函数体也是主线程，并不是 Promise 的所有都是微任务，只有他
resolve()或reject()的回调部分才是微任务 -
即使
setTimeou()的延迟时间是 0，并且写在最前面，也是得等主线程和微任务执行完了之后才会去执行 -
Promise 的状态是单向的，不可逆的，一旦触发了一个状态之后就不可以进行更改状态了
Promise 的 then()方法细节
Promise()的 then()方法返回的值默认也是一个 Promise
new Promise((resolve, reject) => {
resolve(‘请求成功1’)
})
.then(
res => {
return ‘请求成功’ // 只要then 里面有return 结果就可以继续使用then来接收
},
err => {}
)
.then(res => {
console.log(‘kkk’, res)
})
// 执行结果 kkk 请求成功
- 只要 then 里面有 return 结果就可以继续使用 then 来接收，不论是第一个成功的回调的 return 还是 第二个失败的回调的 return 只要在 then 一下就可以拿到那个 return 的值
new Promise((resolve, reject) => {
resolve(‘请求成功1’)
})
.then(
res => {
return new Promise((resolve, reject) => {
reject(‘失败了’)
})
},
err => {}
)
.then(null, err => {
console.log(‘失败的结果’, err)
})
//6-Promise的then.html:31 失败的结果 失败了
- 正常的使用，then 回调里面 return 一个新的 Promise，这样因为 return 的是一个 Promise，所以我们就可以继续的链式的在后面继续一直的 then 下去了
Promise 多种错误监听方式与 catch 总监听
Promise 的 resolve 和 reject 状态分别可以在 then 方法的两个回调函数中捕获，但是除此之外还可以使用 catch()函数中来进行总获取
let p1 = new Promise((resolve, rejetc) => {
// resolve(‘处理成功’)
rejetc(‘处理失败’)
})
p1.then(res => {
return new Promise((resolve, reject) => {
reject(‘error’)
})
}).catch(err => {
console.log(‘catch总接收’, err)
})
// 打印结果：catch总接收 处理失败
知识点：
-
catch 是对整个 promise 流的一个总的错误监听，如果在 then 中没有写第二个错误处理的函数，那么这个错误会走到 catch 这里
-
因为 catch 是可以实现对整个 Promise 流的监听错误，所以 catch 正常情况下都是写在最后面的
-
如果一个 promise 的 then 中有对错误的处理，那么执行的顺序是会选择走自己的错误处理，原因也很好理解，自己有错误处理就用自己的，没有就用公用的
let p2 = new Promise((resolve, reject) => {
jimmy()
// try {
// jimmy()
// } catch (error) {
// reject(error)
// }
})
p2.then(
res => {
console.log(res)
},
err => {
console.log(err.message)
}
)
// 输出结果：jimmy is not defined
的确是存在逻辑错误，调用了一个没有定义的函数，但是我们会发现自动的走到了错误处理函数上，我们可以理解是在 promise 内部封装了我们看不见的 try-catch 模块，进入 catch 的时候会自动的 reject 出来错误信息
小案例 – 使用 Promise 封装一个 ajax
使用 ajax 就避免不了回调地狱，所以使用 Promise 来封装一下 ajax 是一个优解，axios 就是通过 Promise 封装得来的
// 要有面向对象思想，万物皆可封装成为一个我们自己的东西
class HttpError extends Error {
constructor(msg) {
super(msg) // 这里的msg 会被默认放在 message 属性里面
this.name = ‘接口错误’
}
}
class ParamsError extends Error {
constructor(msg) {
super(msg)
this.name = ‘参数错误’
}
}
function ajax(url) {
return new Promise((resolve, reject) => {
if (!/^https?/.test(url)) {
reject(new ParamsError(‘请求地址错误’))
}
let xml = new XMLHttpRequest()
xml.open(‘GET’, url)
xml.send()
xml.onload = () => {
console.log(‘kkk’, xml)
// 箭头函数this指向的是 调用这个函数对象的this
if (xml.status == 200) {
resolve(xml.response)
} else if (xml.status == 404) {
reject(new HttpError(‘请输入正确的接口’))
} else {
reject(‘加载失败’)
}
}
})
}
ajax(‘https://jsonplaceholder.typicode.com/posts’)
.then(res => {
console.log(res)
})
.catch(err => {
// instanceof 能够判断该对象对象是从哪个类实例出来的
/*
最典型的就是可以用来判断是对象还是数组
*/
if (err instanceof ParamsError) {
console.log(err)
} else if (err instanceof HttpError) {
alert(err)
}
})
总结：
-
这个案例虽小，但是涉及到的东西还是很多的，如创建自己的错误类，箭头函数的指向，创建基础的 ajax，
instanceof关键字的使用 -
Array 是继承 Object 类的 object 对象是通过实例化 Object 实现的，所以我们呢可以通过 对象是否是通过 Array 实例化出来的 来判断是否数组还是普通对象
finally 关键名
finally 表示无论 promise 请求的状态是成功还是拒绝都会执行的的代码块，就十分的类似 try-catch-finally
- 这个关键字可以做很多的操作，一个比较常用的操作就是可以封装一个加载动画，每次执行异步请求的时候显示这个动画，finally 的时候将这个动画给取消掉。
封装定时器
function timeout(delay) {
return new Promise((resolve, reject) => {
setTimeout(resolve, delay)
})
}
// 使用promise 不会造成会回调地狱 是一个竖装从下到下的执行过程 整个过程十分清晰
timeout(2000)
.then(() => {
console.log(‘使用Promise’)
return timeout(2000)
})
.then(() => {
console.log(‘封装的定时器’)
})
// 使用原生setTimeout 容易造成回调地狱 不好处理
setTimeout(() => {
console.log(‘不封装’)
setTimeout(() => {
console.log(‘回调地狱’)
}, 2000)
}, 2000)
封装轮询器
function interval(delay, callback) {
return new Promise((resolve, reject) => {
let id = setInterval(() => {
callback(id, resolve)
}, delay)
})
}
// 一旦理解了callback的使用 就更能理解promise的使用了 这样封装之后将setInter
interval(1000, (id, resolve) => {
console.log(‘hello wolrd’)
clearInterval(id)
resolve(‘封装成功’)
}).then(res => {
console.log(‘promise’, res)
})
Promise.resolve 与 Promise.reject 接口
Promise.resolve()是 promise 提供的一个直接获取成功状态的接口，使用的点就在于不用写上完整的 promise
Promise.reslove(‘success’).then(res => {
console.log(res) // success
})
Promise.reject(‘error’).then(null, err => {
console.log(err) // error
})
new Promise((reslove, reject) => {
reslove(‘成功a’)
})
.then(res => {
if (res != ‘成功’) {
throw new Error(‘不为成功！’)
}
})
.catch(err => {
console.log(‘anser1’, err)
})
// Promise.reject 的用途在于可以直接返回一个失败的额状态， 我们可以再第二个回调或者错误中捕获到错误信息
new Promise((resolve, reject) => {
resolve(‘成功b’)
})
.then(res => {
if (res != ‘成功’) {
// 当不是我们想要的状态 我们可以直接使用Promise.reject返回一个错误状态
return Promise.reject(‘不为成功’)
}
})
.catch(err => {
console.log(‘anser2’, err)
})
-
这两个接口不是必须的，如果没有这两个 Promise 也是照样使用
-
用途也有，比如缓存数据，当向后端获取一个基本不变的数据的时候，就可以判断是否缓存中有数据，如果有就直接走
Promise.resolve(缓存数据)这样就可以直接拿到数据。
Promise.all()
Promise.all()Promise 提供的一个批量处理 Promise 的一个接口，
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(‘失败1’)
}, 1000)
}).then(null, err => {
console.log(‘接收到了失败’)
// 因为对失败进行了处理 所以默认会返回一个成功状态的promise
})
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘成功2’)
}, 1000)
})
Promise.all([promise1, promise2])
.then(res => {
console.log(‘success’, res)
})
.catch(err => {
console.log(‘error’, err)
})
// success (2) [“成功1”, “成功2”]
-
promise.all()参数是传递一个数组 - 这个数组每个成员都是一个 Promise,只有数组的 Promise 的状态都是成功的状态 才会走到成功的回调 -
Promise 无论是成功的处理还是失败的处理 默认返回的都是一个成功的状态
Promise.allSettled()
Promise.allSettled()也是一个用来批量处理 Promise 的一个接口
let promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
reject(‘失败了’)
}, 1000)
})
let promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘成功了’)
}, 1000)
})
Promise.allSettled([promise1, promise2]).then(res => {
console.log(‘最终的数据’, res)
/*
(2) [{…}, {…}]
0: {status: “rejected”, reason: “失败了”}
1: {status: “fulfilled”, value: “成功了”}
length: 2
proto: Array(0)
*/
})
-
Promise.allSteeled()和Promise.all()的却别在于，前者返回的状态永远都是成功的状态 -
Promise.allSettled()参数传递的也是一个 Promise 数组，无论是成功还是失败的状态，都会走到 then 里面 -
Promise.allSettled()返回的是一个对象数组，其中对象包含了 status:状态，reson：失败原因，value 成功的值
Promise.race()
Promise.race() 传递一个数组 数组里面的 Promise 哪个快就会先执行哪个
// 封装带有请求超时处理的函数
function query(url, delay = 3000) {
let promise1 = axios.get(url)
let promise2 = new Promise((resolve, reject) => {
setTimeout((resolve, reject) => {
reject(‘请求超时’)
}, delay)
})
return Promise.race([promise1, promise2])
}
query(‘http://127.0.0.1:666’)
.then(res => {
console.log(‘请求结果’, res)
})
.catch(err => {
console.log(‘请求超时了请重试’)
})
async await 语法糖
async`await`是 promise 提供的语法糖，本质上也是一个 promise
注意点：
- 一个 function 如果加上 async 关键字修饰之后，调用这个函数，这个函数会默认返回一个解决状态的 promise，原理是因为 Pormise 的无论是 then 还是 catch 都是会默认返回一个解决状态的 Promise
async 本质
async function promise() {}
console.log(promise()) // Promise {: undefined}
function normal() {
return Promise.resolve()
}
console.log(normal()) // Promise {: undefined}
- async 链式操作
async function Promise2() {
let res = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘请求成功’)
}, 2000)
})
/*
await 默认会返回一个 promise 就可以继续一直的 await 下去 虽然是本质上是异步 但是代码的执行顺序是同步执行的
*/
let res2 = await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(‘请求成功2’)
}, 2000)
})
console.log(‘结果’, res2)
}
Promise2()
// 过4秒会输出 结果 请求成功2
使用async await语法糖的好处在于 和传统的 Promise 相比 我们可以不用一直写 .then()这样的回调函数， 要获取值直接一个 await 来接收返回值即可
async、await 监听错误
-
函数只要加上了 async 关键字之后，默认就是会返回一个 promise，因为，我们在调用函数的时候就可以使用 catch 来进行捕获
-
在 async 内部如果想监听 await 部分的错误，就需要使用传统的 try-catch 模块来进行监听错误
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
直写 .then()这样的回调函数， 要获取值直接一个 await 来接收返回值即可
async、await 监听错误
-
函数只要加上了 async 关键字之后，默认就是会返回一个 promise，因为，我们在调用函数的时候就可以使用 catch 来进行捕获
-
在 async 内部如果想监听 await 部分的错误，就需要使用传统的 try-catch 模块来进行监听错误
最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
[外链图片转存中…(img-VzjKUhjd-1715545876336)]
[外链图片转存中…(img-cSjiTz2K-1715545876336)]
[外链图片转存中…(img-4CbIRZps-1715545876337)]
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！
如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！
由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
扫一扫
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
