Javascript 异步和等待在Axios中不工作
我有一个问题: 我希望我的Javascript 异步和等待在Axios中不工作,javascript,reactjs,async-await,axios,Javascript,Reactjs,Async Await,Axios,我有一个问题: 我希望我的axios满足要求,并在它满足this.setState后,将结果保存在变量中 我的代码: componentDidMount(){ 让邮件=[]; axios.get('/api/employee/fulano') .然后(res=>this.setState({ 雇员:res.data }, () => { this.state.employees.map(i=>{ 异步axios.get(`/api/status/${i.mail}`) 。然后(res=>{ 邮
axios
满足要求,并在它满足this.setState
后,将结果保存在变量中
我的代码:
componentDidMount(){
让邮件=[];
axios.get('/api/employee/fulano')
.然后(res=>this.setState({
雇员:res.data
}, () => {
this.state.employees.map(i=>{
异步axios.get(`/api/status/${i.mail}`)
。然后(res=>{
邮件推送(res.data)
等待这一天({
邮件:邮件
})
})
.catch(err=>console.log(err))
})
}))
.catch(err=>console.log(err))
}
这应该可以:
componentDidMount() {
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
axios.get(`/api/status/${i.mail}`)
.then( async (res) => { // Fix occurred here
let mails = [].concat(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
您将
async
放错了位置
异步应该放在函数定义中,而不是函数调用中
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
axios.get(`/api/status/${i.mail}`)
.then(async (res) => {
mails.push(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
您在错误的位置使用了async Wait<代码>异步关键字必须用于包含异步函数的函数
await
关键字需要用于返回Promise
的表达式,尽管setState
是async
,但它不返回Promise,因此await
不能使用它
您的解决方案如下所示
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, async () => {
const mails = await Promise.all(this.state.employees.map(async (i) => { // map function contains async code
try {
const res = await axios.get(`/api/status/${i.mail}`)
return res.data;
} catch(err) {
console.log(err)
}
})
this.setState({ mails })
}))
.catch(err => console.log(err))
}
将
async/await
与.then/.catch
混合使用不是一种好的做法。相反,使用一个或另一个。下面是一个示例,说明如何仅使用异步/await和仅使用一个this.setState()
(参考函数):
欢迎来到stackoverflow!请再详细说明一下。给出的另一个答案看起来更好,即使它是在你的后面给出的:这是因为有一个解释。你好,谢谢你的回答,我为此感到高兴。。但是它被给出:await是一个保留字(20:22)
,为什么?@Jota,很抱歉,在setState回调函数中缺少了一个async关键字,更新了我的答案为什么你甚至试图使用async
/await
如果你对使用很在行,那么和catch
?来解决你的实际问题,您正在寻找承诺。所有
componentDidMount = async () => {
try {
const { data: employees } = await axios.get('/api/employee/fulano'); // get employees data from API and set res.data to "employees" (es6 destructing + alias)
const mails = []; // initialize variable mails as an empty array
await Promise.each(employees, async ({ mail }) => { // Promise.each is an asynchronous Promise loop function offered by a third party package called "bluebird"
try {
const { data } = await axios.get(`/api/status/${mail}`) // fetch mail status data
mails.push(data); // push found data into mails array, then loop back until all mail has been iterated over
} catch (err) { console.error(err); }
})
// optional: add a check to see if mails are present and not empty, otherwise throw an error.
this.setState({ employees, mails }); // set employees and mails to state
} catch (err) { console.error(err); }
}