js 的 await 與 async、Promise

1、 使用await關鍵字時,所在方法必須要被async修飾

2、使用await得到的值爲Promise調用resolve(response)之後的值,即response

3、async修飾的方法,其返回值爲Promise對象

1-3案例:

let fileUrl = top.fileServiceUrl + '/fileext'

function getFileList(fileGroupId){
    return axios.get(`${fileUrl}/list/${fileGroupId}`);
}

function getFileURL(fileId){
    return `${fileUrl}/${fileId}`
}
(注:getFileURL()方法等同於如下:
    function getFileURL(fileId){
      return new Promise(function(resolve, reject) {
  		// ... donging someThing
  		if (/* 異步操作成功 */){
    		resolve(value); //await getFileURL()得到的即是該value值
  		} else {
    		reject(error);
  	 	}
	  })
   }
)
async function getImgUrl(info){
    let imgUrl = '';
    if (info.platformCoverGroupId) {
        let data = await getFileList(info.platformCoverGroupId)
        if(data.data.length>0){
            imgUrl = getFileURL(data.data[0].id)
        }

    }
    if(!imgUrl){
        imgUrl = 'img/login-background.jpg';
    }

    return imgUrl; //該返回值爲Promise對象,要想拿到imgUrl值,須再次await
}

async function createBusiness(info, zoom, imgUrl) {
    marker.imgUrl = await getImgUrl(info);
    ...
}

4、Promise的then方法,會在調用resolve()之後,自動進入

案例:

function getFileURL(fileId){
      return new Promise(function(resolve, reject) {
  		// ... donging someThing
  		if (/* 異步操作成功 */){
    		resolve(value); //await getFileURL()得到的即是該value值
  		} else {
    		reject(error);
  	 	}
	  })
}

function test(fileId){
  getFileURL(fileId).then((response) => { //getFileURL方法執行resolve(value)之後,會自動進入該then中
	//正常 ... donging someThing
  }).catch((error) => {//getFileURL方法執行reject(error)之後,會自動進入該catch中
	//異常 ... donging someThing
  })
}

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章