javascript - 我怎样才能让 redux 派发一个 Action 并返回一个 promise ？

Question

这是我在 songAction.js 中的函数

export function createSong(title, url, token) {

    axios.defaults.headers.common['Authorization'] = token

    return function (dispatch) {
        axios.post('http://localhost:8080/api/song/create', {
            title,
            link: url

        })
        .then((response) => {
            console.log('the response was', response)
            if(response.data.success){
                dispatch({type: "CREATE_SONG_FULFILLED", payload: response.data.song})
            } else {
                dispatch({type: "CREATE_SONG_REJECTED", payload: response.data})

            }
        })
        .catch((err) => {
            dispatch({type: "CREATE_SONG_REJECTED", payload: err})
        })
    }
}

我希望能够在分派(dispatch)后返回一个 promise ，这样我就可以在组件中使用这样的函数 -

 createSong(title, url, token)
   .then((result) =>{
        // do stuff with result 
     })

我知道我可以传入一个回调来使这项工作异步..但我想使用 promise 的 ES6 功能。我有点困惑我该怎么做。

Answer 1

如果你想使用完整的 ES6，你应该使用 async/await 语法。这完全消除了处理 promise 的需要。

export function createSong (title, url, token) {
  axios.defaults.headers.common['Authorization'] = token
  return async (dispatch) => {
    try {
      const response = await axios.post('http://localhost:8080/api/song/create', {
        title,
        link: url
      })
      console.log('the response was', response)
      if (response.data.success) {
        dispatch({type: 'CREATE_SONG_FULFILLED', payload: response.data.song})
      } else {
        dispatch({type: 'CREATE_SONG_REJECTED', payload: response.data})
      }
    } catch (err) {
      dispatch({type: 'CREATE_SONG_REJECTED', payload: err})
    }
  }
}

createSong 返回的匿名函数标有新的 async 关键字。这意味着匿名函数现在将返回一个隐式的 Promise。

async 关键字还允许您在函数体中使用 await，这样您就可以await 异步调用 axios.post 并将其视为同步调用。

另一个优点是您可以返回使用普通的 try/catch block 。这些实际上是在解决和拒绝幕后隐含的 promise ，但他们以正常方式行事。

因为匿名函数实际上返回一个 Promise，在调用链的更高层，无论你在哪里调用 createSong(...) 函数，你也可以使用 async/await 语法 ... 等等。不再有回调，也不再有更明确的 Promise 处理。