Axios React 中 Async 和 Await 不起作用
2018-10-12
12122
我有一个问题:
我希望我的
axios
发出请求,然后执行
this.setState
,并将结果保存在变量中。
我的代码:
componentDidMount() {
let mails = [];
axios.get('/api/employee/fulano')
.then(res => this.setState({
employees: res.data
}, () => {
this.state.employees.map(i => {
async axios.get(`/api/status/${i.mail}`)
.then(res => {
mails.push(res.data)
await this.setState({
mails: mails
})
})
.catch(err => console.log(err))
})
}))
.catch(err => console.log(err))
}
但是它给出了错误的语法。
最好的解释:我想将地图的所有结果保存在变量
mails
中,然后使用
setState
更改一次结果。
有人可以告诉我我在哪里徘徊吗?拜托。
3个回答
您在错误的地方使用了 async await。包含异步函数的函数必须使用
async
关键字
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))
}
Shubham Khatri
2018-10-12
将
async/await
与
.then/.catch
混合使用并不是一个好习惯。请改用其中一种。下面是一个示例,说明如何使用
仅
async/await
和
仅
一个
this.setState()
来实现此目的(参考
Promise.each
函数):
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); }
}
Matt Carlotta
2018-10-12
这应该可行:
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))
}
Rex Ogbemudia
2018-10-12