Question

我正在关注一些react和redux前端教程，当我们调度一个发出api请求（使用axios）的操作时，有一部分内容。教师用新的承诺包装了动作功能和api调用功能。我真的不明白为什么需要这样做，因为我们可以返回axios返回的诺言，而不是将其包装在新的诺言中。我将发布代码以使其更加清晰：

这是本教程中建议的内容：

api调用函数：

export function apiCall(method, path, data) {
  return new Promise((resolve, reject) => { // <-- WRAPPING WITH A PROMISE
      return axios[method](path, data)
          .then(res=> {
              return resolve(res.data);               
          })
          .catch(err => {
              return reject(err.response.data.error);
          });
  });
}

这是redux动作函数（调用apiCall）：

export function authUser(type, userData) {
  return dispatch => {            
      return new Promise((resolve, reject) => { // <-- WRAPPING WITH A PROMISE
          return apiCall("post", `/api/auth/${type}`, userData).then(             
              ({ token, ...user }) => {                                       
                  localStorage.setItem("jwtToken", token); 
                  dispatch(setCurrentUser(user));
                  dispatch(removeError); 
                  resolve();      
              })
              .catch(err => {
                  dispatch(addError(err.message));        
                  reject(); 
              });             
      });
  };
}

这是react组件中调用redux动作的函数：

this.props.onAuth(authType, this.state).then(() => { // <-- onAuth is referring to authUser   
  this.props.history.push("/");
})
.catch (() => { 
  return;
});

我不明白为什么我们需要用promise包装apiCall和authUser，所以我尝试删除那些promise，只返回axios从authUser和apiCall返回的promise：

这是没有包装承诺的修改版本：

功能与原始实现有什么区别吗？

api调用函数：

export function apiCall(method, path, data) {
  return axios[method](path, data)
      .then(res => {
          return (res.data);
      })
      .catch(err => {
          throw (err.response.data.error);
      });
};

这是redux动作函数（调用apiCall）：

export function authUser(type, userData) {
  return dispatch => {
      return apiCall("post", `/api/auth/${type}`, userData).then(     
          ({ token, ...user }) => {
              localStorage.setItem("jwtToken", token);
              dispatch(setCurrentUser(user)); 
              dispatch(removeError); 
          })
          .catch(err => {
              dispatch(addError(err.message));
              throw err;
          });
  };
}

react组件中的功能可以保持不变。

封装一个返回一个承诺和另一个承诺的函数？

0 个答案: