在使用 axios 往后端发送数据后,如果需要立即更新列表,可以使用以下方法:
1.在发送数据成功后手动更新列表
在发送数据成功后,手动触发列表的更新。例如,在 Vue 组件中,可以在发送数据成功后,调用组件中的一个方法,该方法可以重新获取列表数据,然后将数据更新到页面上。
methods: {
addData() {
axios.post('/api/addData', this.formData)
.then(() => {
this.getData() //重新获取列表数据
})
.catch((error) => {
console.log(error)
})
},
getData() {
axios.get('/api/getData')
.then((response) => {
this.list = response.data
})
.catch((error) => {
console.log(error)
})
}
}
2.使用异步请求
可以将获取列表数据的操作和发送数据的操作放在同一个异步请求中,当发送数据成功后,再获取最新的列表数据。这样可以保证在发送数据成功后,立即更新列表。
methods: {
async addData() {
try {
await axios.post('/api/addData', this.formData)
this.getData() //重新获取列表数据
} catch (error) {
console.log(error)
}
},
async getData() {
try {
const response = await axios.get('/api/getData')
this.list = response.data
} catch (error) {
console.log(error)
}
}
}
以上是两种常用的方法,可以根据实际情况选择合适的方式来更新列表。
标签:axios,更新,列表,error,发送数据,getData From: https://www.cnblogs.com/NetUSA/p/17183327.html