javascript - JavaScript Axios 中的 NeSTLed API 调用，返回正确的 promise

Question

我正在尝试使用 axios 将数据发布到我的 API。我需要请求并发送 XSFR token 以及请求。我正在使用 React、Redux、Thunk 和 Axios。我需要将其作为 React 组件本身的 promise 来处理。现在是这样，但它没有以期望的方式响应。只要 token 请求成功，即使发布失败，它也总是会解决 promise 。

我在 React 组件中启动此功能的调用位于底部，即使 axios 调用在帖子上失败，它也会给我"is"，并且我确实从第二次调用的 catch 中收到了错误消息。如果我将 Promise.reject() 放在那里，它也会被发送但未被捕获，因为我认为已经返回了一个 promise 。

我尝试将整个内容包装在 return Promise.all([getToken()...]) 中。它可以工作，但行为完全相同，并且仍然给我成功接收 token 的决心，并忽略第二个 axios 调用。

行动:

export function Post(data) {

  return (dispatch) => {
    return getToken('csfr')
      .then(response => {
         return axios.post( '/post', {
           request: data,
           token: response,
           apitoken: 'apikey',
         })
         .then(response => {
           dispatch({type: 'POST', payload: response});
         })
         .catch(error => {
           dispatch(errorPopup({visible: true, message: error}));
           throw error;
         });

      })
      .catch(error => {
        dispatch(errorPopup({visible: true, message: error}));
      });

  };
}


export function getToken(tokentype) {
   return axios.post( '/token/' + tokentype, {
     apitoken: 'apikey',
   })
   .then()
   .catch(error => {
     throw error;
   });
}

React 组件(Post 操作使用 Redux 绑定(bind)到 props):

componentWillMount() {
  this.props.Post(this.state.data)
  .then(() => {
    console.log('yes')
   })
   .catch(() => {
     console.log('no')
   });
 }

Answer 1

如果您的目的是使用此操作创建器来根据之前的多个异步请求的结果调度一个操作，则您不应使用>return 关键字从异步操作返回 Promise。

删除内部 return 关键字并允许 .then 和 .catch 来调度您的操作。

与此相关，我建议您研究一下 Async/Await 的使用。Async/Await。这种代码构造(和解释困难)正是 Async/Await 被放入该语言中的原因。

以下代码(经过修改以满足您的架构)将满足您的用例。请注意，我通过模拟方法等在任何地方都采取了自由行动。例如，像 fetch()、axios 方法返回一个 promise 。我想你会明白要点的。如果您有疑问，请告诉我。

async function getToken(tokentype) {
  try {
    return await fetch('https://jsonplaceholder.typicode.com/posts/1')
  } catch (error) {
    throw error;
  };
}

function dispatch(data) {
  console.log(data);
}



function Post(data) {
  return async () => {
    try {
      let token = await getToken('csfr');
      let post = await fetch('https://jsonplaceholder.typicode.com/posts/1');
      dispatch({
        type: 'POST',
        payload: post
      });
    } catch (error) {
      dispatch('error: ' + error);
      throw error;
    };
  }
}

let attempt = Post('This is a test');
attempt().then(() => {
  console.log('Completed Post');
})

还有 fiddle :https://jsfiddle.net/0n6to6Lm/21/

如果您想在React Editor中设置您的架构我很乐意帮助其实现。