从浏览器索引数据库获取数据然后调用 api

Question

我有以下 useEffect 回调函数：-

import { initDB, useIndexedDB } from "react-indexed-db";
initDB(DBConfig);

const db = useIndexedDB("reads");

    useEffect(() => {
        db.getByIndex("hash", props.match.params.id).then((data) => {
          setToken(data.token);
        });
        handleTextColorSelection(backgroundColor);
        axios
          .post(`${process.env.REACT_APP_API_URL}khatma/read`, {
            khatma: props.match.params.id,
            part: props.match.params.part,
            section: props.match.params.section,
            token: token,
          })
          .then((res) => {
        
            if (res.data.token) {
              db.add({
                hash: props.match.params.id,
                token: res.data.token,
              }).then(
                (event) => {},
                (error) => {
                  console.log(error);
                }
              );
            }
    })

在 axios 帖子正文中我发送令牌，如果“令牌”状态接收到之前存储在浏览器索引数据库中的值，如果没有找到对象存储数据，则帖子令牌将作为 null 发送。

这里的问题，我注意到在 db.getByIndex("hash", ... 命令获得结果之前，axios 请求运行，并将令牌发送为空，即使稍后令牌状态会得到一个值。

如何运行 db.getByIndex("hash"，然后如果它完成，运行 axios post request ？

Answer 1

你可以使用.then

const axiosRequest = () => { /* your axios logic */ };

db.getByIndex(...).then(axiosRequest).catch(axiosRequest)

您在then 和catch 回调中执行的任何操作都将在getByIndex 调用之后运行