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

Question

I have the following useEffect call back function:-

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);
                }
              );
            }
    })

In axios post body i am sending token, if "token" state receive a value stored before in browser indexed db, if there is not object store data found, then a post token will be sent as null.

The problem here, that i noticed that before the db.getByIndex("hash", ... command get a result, an axios request run, and sending a token as null, even-though later on token state will get a value.

How can i run the db.getByIndex("hash", then if it finish, run axios post request?

Answer 1

You could use .then

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

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

Anything you do inside the then and catch callbacks will be run after the getByIndex call