javascript - 如何使 Javascript/React/Typescript 获取调用异步?
问题描述
考虑以下 Javascript/React 代码:
// Javascript function that has a fetch call in it.
export const signIn = (email:string, password:string) => {
console.log("FETCHING...");
fetch(`${endPoint}/sign_in`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
email,
password
})
})
.then((response) => {
return response.json()
})
.then(({ data }) => {
console.log("FETCHED DATA...")
})
.catch((error) => {
console.error('ERROR: ', error)
})
console.log("DONE FETCHING...");
}
// A functional component that references signIn.
export const SignIn: React.FC<Props> = () => {
// irrelevant code ...
const onSubmit = (e: CustomFormEvent) => {
e.preventDefault()
console.log("SIGNING IN...")
// calls my signIn function from above
// I don't want this to finish until the fetch inside it does.
signIn(email, password, setAuthentication, setCurrentUser)
console.log("SIGNED IN...");
}
return <>A form here submits and calls onSubmit</>
}
这会产生以下控制台日志输出:
SIGNING IN...
FETCHING...
DONE FETCHING...
SIGNED IN...
FETCHED DATA...
我想FETCHED DATA...
早点出现DONE FETCHING...
。我试过玩,aysnc/await
但这不起作用,所以我不知道从哪里开始。
解决方案
只需添加另一个 .then
.then((response) => {
return response.json()
})
.then(({ data }) => {
console.log("FETCHED DATA...")
return
}).then(()=> {
console.log("DONE FETCHING...");
})
.catch((error) => {
console.error('ERROR: ', error)
})
推荐阅读
- tuples - number_in_month 练习(SML 函数从元组列表构建整数列表时出错)
- javascript - 如何在某些特定条件后向元素添加事件侦听器?
- pyspark - 枚举排序的 PySpark Dataframe 中的序列
- cucumber - BDD with cucumber:如何生成步骤?
- android - 如何查看应用支持哪些深层链接
- google-apps-script - SyntaxError:输入意外结束(第 4 行,文件“Code.gs”)
- python - 从标签条目中删除索引
- java - 将 SmartID Reader JNI 库添加到现有的 gradle 项目中
- angular - ag-Grid:找不到匹配的行模型 rowModelType 客户端
- scala - 为什么 scala 在有换行符且没有等号时评估类型别名?