【async await】 “异步变同步”
一个异步操作执行完再执行下一步
async doit(){
await step1();
await step2();
await ...
}
step1(){
return new Promise((resolve, reject)=>{
...
异步操作(()=>{
//resolve()
//resolve(res)
})
...
})
}
step2(){
return new Promise((resolve, reject)=>{
...
//异步操作
...
})
}
例子1
async loadChart2Data () {
await this.loadChart2NodesData()
await this.loadChart2LinksData()
//处理数据:this.nodes,this.links
this.loadChart2()
},
loadChart2NodesData () {
return new Promise((resolve, reject) => {
let params = {
}
//异步
this.$axios.post(mentalGraphUrl, params).then((res) => {
this.nodes = res.data
//数据已赋值
resolve()
}).catch((err) => {
console.log(err)
})
})
},
loadChart2LinksData () {
return new Promise((resolve, reject) => {
let params = {
}
//异步
this.$axios.post(mentalLinkUrl, params).then((res) => {
this.links = res.data
//数据已赋值
resolve()
}).catch((err) => {
console.log(err)
})
})
},
例子2
async handleConform () {
this.nodes = await this.fileReader(this.fileNode)
this.links = await this.fileReader(this.fileLink)
//处理数据:this.nodes,this.links
this.loadChart2()
},
fileReader (file) {
return new Promise((resolve, reject) => {
let files = file.target.files
let fileReader = new FileReader()
//异步
fileReader.onload = (ev) => {
try {
let data = ev.target.result
let workbook = XLSX.read(data, {
type: 'binary'
})
let wsname = workbook.SheetNames[0]
let ws = XLSX.utils.sheet_to_json(workbook.Sheets[wsname])
//返回数据
resolve(ws)
} catch (e) {
console.log(e)
}
}
fileReader.readAsBinaryString(files[0])
})
},
【Promise.all】异步并行
所有异步操作都执行完(必须都执行成功),再执行下一步
const step1=new Promise((resolve, reject)=>{
...
//异步操作
...
})
const step2=new Promise((resolve, reject)=>{
...
//异步操作
...
})
Promise.all([step1,step2...]).then((resArr)=>{
console.log(resArr[0])
console.log(resArr[1])
...
})
Promise.race ([]).then() 一旦某个成功或失败即返回
Promise.allSettled([]).then() 不论执行成功或失败都会返回所有的执行状态