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
  })
}

 

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