javascript - 将 Promise 转换为 async/await - Javascript
问题描述
我在 React 中有一个 dataService 函数来获取我的 API。我尝试转换为 async/await 块,但似乎遇到了障碍。
使用承诺:
const dataService = (url, options, dataToPost) => {
return (dispatch, getState) => {
const { requestAction, successAction, failureAction } = options.actions;
if (options.shouldRequest(getState())) {
dispatch(requestAction());
const promise = axios.get(url, { withCredentials: true });
return promise
.then(response => {
if (response.status === 200) {
return dispatch(successAction(response, dispatch));
}
return Promise.reject(response);
})
.catch(error => {
if (error.response.status === 302) {
window.location = '/view';
}
dispatch(openErrorDialog());
return dispatch(failureAction(error));
});
}
return Promise.reject(new Error('FETCHING'));
};
};
使用异步/等待:
const dataService = async (url, options, dataToPost) => {
return async (dispatch, getState) => {
let url;
const {requestAction, successAction, failureAction} = options.actions;
if (options.shouldRequest(getState())) {
dispatch(requestAction());
const promise = axios.get(url, {withCredentials: true});
try {
const response = await promise;
if (response.status === 200) {
return dispatch(successAction(response, dispatch));
}
return Promise.reject(response);
} catch (error) {
return dispatch(failureAction(error));
}
}
return Promise.reject(new Error('FETCHING'));
};
};
错误是“操作必须是普通对象。使用自定义中间件进行异步操作。”。承诺代码完美运行。我已经在使用thunk了。请指教。
解决方案
如果你真的想改变 Promise -> async/await 那么改变如下:
首先,您不希望 dataService 成为这样async
,因为这意味着它会返回一个 Promise,这会改变它需要被调用的方式——您不希望这样
其次,改变
const promise = axios.get ...
promise.then(response ....
至
const promise = await axios.get ...
promise.then(response ....
不会工作...
它需要是
const response = await axios.get ...
不需要 promise 变量
即便如此,您仍然在转换后的代码中使用 Promise ... 现在只是async
无缘无故地使用关键字有所不同
以下是您的(原始)代码应如何转换为 async/await
请注意以下单词 Promise 的总 LACK:
const dataService = (url, options, dataToPost) => {
return async (dispatch, getState) => {
const { requestAction, successAction, failureAction } = options.actions;
if (options.shouldRequest(getState())) {
const data = typeof dataToPost === 'string' ? { data: dataToPost } : dataToPost;
dispatch(requestAction());
try {
const response = dataToPost
? await axios.post(url, data, { withCredentials: true })
: await axios.get(url, { withCredentials: true });
if (response.status === 200) {
return dispatch(successAction(response, dispatch));
}
throw response;
} catch(error) {
if (error.response.status === 302) {
window.location = '/view';
}
dispatch(openErrorDialog());
return dispatch(failureAction(error));
}
}
throw new Error('FETCHING');
};
};
推荐阅读
- docker - 如何使用 network_mode 和 depends_on 配置 Docker Compose 容器
- mysql - 从大表中删除行时数据库锁定
- javascript - 为什么我不能总结一个数组的所有属性?
- java - 虽然我已经初始化了 lateinit 属性 songurl
- html - 这是什么符号,为什么它在 Chrome 中有效?
- laravel - Laravel 路线未定义,但路线存在并在修补程序中工作
- c - 为什么 &p 和 &a[0] 不同?
- cookies - 我可以限制在我的 SP 中收到的索赔数量吗?
- python - 用于剥离术语的 Python 正则表达式
- jenkins - Jenkins Pipeline 轻量级执行器仍然是重量级的