【async await Promise】解决异步问题

【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() 不论执行成功或失败都会返回所有的执行状态

猜你喜欢

转载自blog.csdn.net/lorogy/article/details/108104279