javascript - react redux async action 完成函数后调用下一个函数

Question

假设我有一个调用 api 的函数:

export default function AuthApi({url, method, headers, data}={}){
    return (dispatch, getState) => {

        fetch(url, {
            method: method || null,
            headers: headers || null,
            body: form || null,
            }).then(function(response) {
                return response.json();
            }).then(function(response){
                console.log(response)
            })

    }
}

现在我想在某个地方调用这个 api:

      dispatch(AuthApi({url: "some_url", method: "POST", data: data}))
      console.log("called api")
      dispatch(userInfo(response))
      console.log(getState())
      router.pushState(null, '/profile')

在这里，我使用 dispatch 调用 api，然后使用 dispatch(userInfo) 。我假设我的 dispatch(userInfo()) 函数在 dispatch(AuthApi())

中的所有处理之后被调用

但是这里它进入了 AuthApi() 但没有完成它就开始调用其他函数或进程

在 dispatch(AuthApi()) 完全完成后，我如何才能只调用我的其他函数或逻辑或曾经的 console.log()。

谢谢

Answer 1

您可以使用 Promises，它们与 thunkMiddleware 完美配合:

dispatch(AuthApi({url: "some_url", method: "POST", data: data})).then((response) => {
    dispatch(userInfo(response))
})

More examples here

更新您还应该修改操作以返回 promise 。

export default function AuthApi({url, method, headers, data}={}){
    return (dispatch, getState) => {    
        return fetch(url, {
            method: method || null,
            headers: headers || null,
            body: form || null,
        }).then(function(response) {
            return response.json();
        })    
    }
}