注册
web

WEB前端奇淫巧计-消除异步的传染性


简介


大家好
今天给大家介绍一个关于异步的比较恶心的东西
也许大家在开发中也曾遇到过
只不过解决起来比较棘手
废话不多说直接上代码


async function getUser() {
return await fetch('https://my-json-server.typicode.com/typicode/demo/profile').then((resp) => resp.json())
}

async function m1(){
//other works
return await getUser()
}

async function m2(){
//other works
return await m1()
}

async function m3(){
//other works
return await m2()
}

async function main() {
const res = await m3()
console.log('res', res)
}
main()

经过观察上述代码有没有发现
一旦一个函数使用 async await
其他函数调用这个函数进行异步操作时,也要加上async await
突然有没有觉得有那么一丝丝小恶心
我们今天的目的就是把以上的async await去掉也能达到同样的效果


function getUser() {
return fetch('https://my-json-server.typicode.com/typicode/demo/profile')
}

function m1() {
//other works
return getUser()
}

function m2() {
//other works
return m1()
}

function m3() {
//other works
return m2()
}

function main() {
const res = m3()
console.log('res', res)
}
main()

就像以上代码调用,也能实现同样的效果
是不是一下子有点懵懵的
这其实是一个大厂的内部晋升题,还是有点小难度的
这个问题在一些框架的底层也会常遇到
我来带你逐步探讨


解决问题


不难发现通过以上直接去掉async await是无法得到原来的结果的
因为它会返回一个promise 对象,无法使res得到真实的数据
这里我先说一下大概思路
首先fetch会返回一个promise,但是在请求时就想对结果进行操作,显然是不可能的
这时候我们需要在fetch没返回我们想要的数据前先终止函数运行,等拿到正确的数据后我们再运行函数
是不是听到这个过程也是一头雾水呀
先别着急
继续往下看
如果想要函数终止运行有个办法那就是抛出异常 throw error
然后等fetch返回数据data后,对数据进行缓存
缓存后开始函数的运行,
最后交付data
看一下流程图
image.png
整体流程大概就是这样
为了方便理解,我化简一下上述代码


function main() {
const res = fetch('https://my-json-server.typicode.com/typicode/demo/profile')
console.log('res', res)//res要得到一个data数据而不是一个promise对象
}
main()

我们都知道fetch实际返回一个promise对象
此时返回的是一个promise
image.png
在不改变main函数体的情况下使得res是我们想要的数据而不是promise
下面是我们想要的数据
image.png
那我们就得想办法更改main的调用方式


function main() {
const res = fetch('https://my-json-server.typicode.com/typicode/demo/profile')
console.log('res', res)//res要得到一个data数据而不是一个promise对象
}
function run(func){
//瓜瓜一顿操作,使得fetch返回真实的数据而不是promise
}
run(main)

根据上述讲的流程,我们来看一下run函数的具体过程
注释我已经写的很详细了
大家认真看哦


function run(func) {
let cache = []//缓存的列表,由于可能不止一个fetch,所以要用一个list
let i = 0;//缓存列表的下标
const _originalFetch = window.fetch//储存原先的fetch
window.fetch = (...args) => {//重写fetch函数,这个fetch要么抛出异常,要么返回真实的数据
if (cache[i]) {//判断一下缓存是否存在,如果存在就返回真实的数据或抛出异常
if (cache[i].status === 'fulfilled') {
return cache[i].data
} else if (cache[i].status === 'rejected') {
throw cache[i].err
}
}
const result = {
status: 'pending',
data: null,
err: null
}
cache[i++] = result//添加缓存
//发送请求
//真实的fetch调用
const prom = _originalFetch(...args).then(resp => resp.json()).then(resp => {
//等待返回结果,然后修改缓存
result.status = 'fulfilled'
result.data = resp
}, err => {
result.status = 'rejected'
result.data = err
})
//如果没有缓存,就添加缓存和抛出异常
throw prom
//这里为什么会抛出真实fetch返回的promise,主要是因为外面会用到这个promise然后等待拿到最终结果
}
try {
//在try里调用func也就是上述的main函数
//由于main里面有fetch,且第一次没有缓存,所以会抛出一个异常
func()

} catch (err) {
//从这里捕获到异常
//这里的err就是上述fetch返回的promise

if (err instanceof Promise) {//验证一下是不是promise
const reRun = () => {
i = 0//重置一下下标
func()
}
err.then(reRun, reRun)//待promise返回结果后重新执行func,也就是重新执行main
//这次执行已经有缓存了,并且返回中有了正确的结果,所以重写的fetch会返回真实的数据
}
}
}

通过这么一个函数调用main,就可以使得在不改变main函数体的情况下使得fetch返回真实的数据而不是promise对象
是不是感到很神奇
我们来看下完整代码


function getUser() {
return fetch('https://my-json-server.typicode.com/typicode/demo/profile')
}

function m1() {
//other works
return getUser()
}

function m2() {
//other works
return m1()
}

function m3() {
//other works
return m2()
}

function main() {
const res = m3()
console.log('res', res)
}

function run(func) {
let cache = []//缓存的列表
let i = 0;//缓存下标
const _originalFetch = window.fetch//储存原先的fetch
window.fetch = (...args) => {//重写fetch函数
if (cache[i]) {
if (cache[i].status === 'fulfilled') {
return cache[i].data
} else if (cache[i].status === 'rejected') {
throw cache[i].err
}
}
const result = {
status: 'pending',
data: null,
err: null
}
cache[i++] = result
//发送请求
const prom = _originalFetch(...args).then(resp => resp.json()).then(resp => {
result.status = 'fulfilled'
result.data = resp
}, err => {
result.status = 'rejected'
result.data = err
})
throw prom
}
try {
func()
} catch (err) {
//什么时候引发重新执行function
if (err instanceof Promise) {
const reRun = () => {
i = 0
func()
}
err.then(reRun, reRun)
}
}
}
run(main)

此时执行的结果,就是我们想要的结果
image.png
没错就是这样,nice



在框架中的应用


其实在react这个应用很常见
我们先来看一段代码


const userResource = getUserResource()
function ProfilePage() {
return (
<Suspense fallback={<h1>Loading profile...</h1>}>
<ProfileDetails />
</Suspense>

)
}
function ProfileDetails(){
const user = userResource.read();
return <h1>{user.name}</h1>
}
ReactDOM.render(<ProfilePage/>, document.getElementById("root"));

别急别急我来稍微翻译下
这段代码的意思是在ProfileDetails没加载到数据前先显示Loading profile...
待ProfileDetails加载到数据就渲染 {user.name}
他是怎么实现的呢
如果放在vue里面ProfileDetails必须为一个异步函数
而在这里的实现方案与我上述讲述的类似
我们来验证一下
在ProfileDetails打印1


function ProfileDetails(){
console.log(1)//在这里输出一个1
const user = userResource.read();
return <h1>{user.name}</h1>
}

输出结果是这样的
image.png
为什么会输出两个1呢
原因就和我们上述代码类似
在userResource.read()第一次执行它会抛出一个错误
第二次是已经拿到数据
所以它执行了两遍,最终拿到了数据
我们在函数里手动抛出一个promise


function ProfileDetails(){
throw new Promise((resolve)=>{})//我们在这里抛出一个promise,且函数体里没有执行resolve()
const user = userResource.read();
return <h1>{user.name}</h1>
}

你会发现页面一直展示Loading profile...
image.png
因为我们抛出的promise,一直没有resolve,也就是等待不了结果返回,所以它只会渲染Loading profile...保持不变
肿么样,神奇吧,你学费了嘛
有兴趣的可以一起学习交流,有什么问题也可以联系我
小编微信:buouyupro


作者:布偶鱼
来源:juejin.cn/post/7223937161707716669

0 个评论

要回复文章请先登录注册