使用 Hooks 进行异步编程

本文摘选自 Rax 官网 rax.js.org

介绍

Javascript 是一个单线程的编程语言，单线程的特点就是一次只能处理一件事情，当前代码任务耗时执行会阻塞后续代码的执行。异步编程则是一种事件驱动编程，请求调用函数或方法后，无需立即等待响应，可以继续执行其他任务，而之前任务响应返回后可以通过状态、通知和回调来通知调用者。

异步编程方法

js 中的异步编程方法有回调函数、事件处理函数、观察者、Promise、Generator、async等，接下来看下在 Rax 中常用的异步编程方法。

回调函数

import { createElement, render, useState, useEffect } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
const [count, setCount] = useState(0);
useEffect(() => {
setCount(count + 1);
}, []);
return (
<View>
<Text >Hello Rax {count}!</Text>
</View>
);
}

export default App;
复制代码

我们在 useEffect 这个 effect hook 中，传入 callback，当组件 mount 时调用该 callback，设置 count ，并使用 state hook 更新本地 state。这就是 Rax 中一个常用的回调使用方式。

事件处理函数

import { createElement, render, useState, useEffect } from 'rax';
import View from 'rax-view';
import Text from 'rax-text';

function App() {
const [count, setCount] = useState(1);

function showAlert() {
setTimeout(() => {
alert('You clicked on: ' + count);
}, 3000);
}

return (
<View>
<Text onClick={() => setCount(count + 1)}>Add count: You clicked {count} times</Text>
<Text onClick={showAlert}>Hello Rax，show alert!</Text>
</View>
);
}

export default App;
复制代码

如果我们按照以下步骤操作：

• 点击增加 count 到 2
• 点击 show alert
• 马上点击增加 count 到 3

此时 alert 弹出的 count 值还是为 2。alert 会取到点击时 count 的状态，其实组件函数在每次渲染时都会被调用，但是在每次调用中 count 值都是常量，并被赋值为当前渲染中的状态值。其实普通函数也是如此，多次调用函数传入不同的参数，那么函数的每次调用也是取到传入的参数值。

Promise

import { createElement, render, useState, useEffect } from 'rax';
import request from 'universal-request';
import Text from 'rax-text';

function App() {
const [value, setValue] = useState(1);

useEffect(() => {
function getValue() {
request({
url: 'https://httpbin.org/post',
method: 'POST',
headers: {
'Access-Control-Allow-Origin': '*'
},
data: {
value: 'Rax'
},
timeout: 5000
}).then((result) => {
const data = JSON.parse(result.data.data);
// setValue
setValue(data.value);
}).catch((error) => {
});
}
getValue();
}, []);

return (
<Text>Current value: {value}</Text>
);
}

export default App;
复制代码

通过一个网络请求的例子已经很好的展示了 Promise 的使用方式，当首次 mount 之后发送请求，获得数据之后改变本地 state，触发再次 render。Promise 也解决了回调地狱的问题，对并发执行很友好。 当我们的异步操作任务较多时，会发现需要不断的使用书写 useEffect 等，增加了代码量，此时我们可以抽离成自定义 hook ,只得到我们关心的数据。

import { useEffect, useState } from 'rax';

export default function usePromise(promise) {
const [error, setError] = useState(null);
const [result, setResult] = useState(null);

useEffect(
() => {
let canceled = false;

promise
.then(r => {
if (!canceled) {
setResult(r);
}
})
.catch(e => {
if (!canceled) {
setError(e);
}
});

return () => {
canceled = true;
};
},
[promise]
);

return [result, error];
}
复制代码

自定义 hook usePromise，将 promise 作为参数，并对组件销毁时做了处理，usePromise 已经作为 npm 包 rax-use-promise 发布。 此时我们再使用网络请求时，只需要调用 usePromise 并获取返回的 data 与 error 即可。

import { createElement, render,  useState, useEffect, useMemo } from 'rax';
import usePromise from 'rax-use-promise';
import request from 'universal-request';
import Text from 'rax-text';

const getValue = () =>request({
url: 'https://httpbin.org/post',
method: 'POST',
headers: {
'Access-Control-Allow-Origin': '*'
},
data: {
value: 'Rax'
},
timeout: 5000
}).then(result => JSON.parse(result.data.data));

function App() {
const [data, error] = usePromise(useMemo(getValue));
return (
<Text>Current value: {data.value}</Text>
);
}

export default App;
复制代码

参考

Hooks

rax-use-promise

作者：狒狒神48k
链接：https://juejin.im/post/5de527165188255a71417173
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。