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