vue 中使用 async/await 将 axios 异步请求同步化处理
2024-10-14 10:55:44
1. axios 常规用法：
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
created () {
this.getHistoryData()
},
methods: {
handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
this.getHistoryData()
},
// 统一处理axios请求
getHistoryData (data) {
axios.get('/api/survey/list/', {
params: data
}).then((res) => {
console.log(res)
this.tableData = res.data.result
this.totalData = res.data.count
}).catch((err) => {
console.log(err)
alert('请求出错！')
})
}
}
}
2. 使用 asyns/await 将 axios 异步请求同步化：
2.1 当 axios 请求拿到的数据在不同场景下做相同的处理时：
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
created () {
this.getHistoryData()
},
methods: {
handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
this.getHistoryData()
},
// 统一处理axios请求
async getHistoryData (data) {
try {
let res = await axios.get('/api/survey/list/', {
params: data
})
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错！')
}
}
}
}
2.2 当 axios 请求拿到的数据在不同场景下做不同的处理时：
export default {
name: 'Historys',
data() {
return {
totalData: 0,
tableData: []
}
},
async created () {
try {
let res = await this.getHistoryData()
console.log(res)
// 等拿到返回数据res后再进行处理
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错')
}
},
methods: {
async handleClick (tab) {
let data = {
status: tab.name,
name: this.formInline.user,
cid: this.formInline.identity,
start_time: this.formInline.dateTime ? this.formInline.dateTime[0] : '',
end_time: this.formInline.dateTime ? this.formInline.dateTime[1] : ''
}
try {
let res = await this.getHistoryData()
console.log(res)
// 等拿到返回数据res后再进行处理
this.tableData = res.data.result
this.totalData = res.data.count
} catch (err) {
console.log(err)
alert('请求出错')
}
},
// 封装axios请求，返回promise, 用于调用getHistoryData函数后作不同处理
getHistoryData (data) {
return new Promise((resolve, reject) => {
axios.get('/api/survey/list/', {
params: data
}).then((res) => {
resolve(res)
}).catch((err) => {
reject(err)
})
})
}
}
}
最新文章
- esri联邦用户大会 总结
- git中的版本库，暂存区和工作区
- [LINUX] 查看连接数和IO负载
- 转载--thinkphp框架的路径问题 - 总结
- C#强制清除缓存
- jsp或Action获取请求参数中文乱码
- wsse:InvalidSecurity Error When Testing FND_PROFILE Web Service in Oracle Applications R 12.1.2 from SOAP UI (Doc ID 1314946.1)
- CAS SSO:汇集配置过程中的错误解决方法
- js中的潜伏者之Arguments对象
- VS2010无法断点调试解决办法
- 关于HTML5新手应该知道的几点知识
- Rsync（远程同步）： linux中Rsync命令的实际示例
- New UWP Community Toolkit - Staggered panel
- Java的类加载器种类（双亲委派）
- phpcms中set_config和get_sysinfo函数
- ssh防止暴力破解之fail2ban
- MyBatis自动生成Java/C#的Bean（Entity）的等价MYSQL实现函数
- 命名实体识别，使用pyltp提取文本中的地址
- Maven 添加jar包到本地仓库
- verilog语法实例学习(1)