拒絕回調，擁抱async await
之前使用jquery中ajax，請求的結果需要寫在回調函數裏面，後面接觸到了axios/fetch，使用了es6中Promise進行封裝，這種鏈式結構調用，看起來比之前直觀，可是還是沒有解決需要把結果寫在回調函數裏面，甚至axios/fetch相比原生ajax以及jquery中的ajax來說，不支持同步請求，這就導致：當一個請求需要的參數是依賴上一次請求返回的結果時，只能把第二次請求也寫在第一次請求的回調裏面，當內容過多時，就會被嵌套繞進去，寫法上很不優雅。
es7中的async await正是解決這一尷尬問題的方法，配合try catch，代碼簡潔而優雅，跟回調說拜拜。
首先，如果是 jquery的項目：
1.使用Promise封裝ajax
let ApiHost = ‘http://10.0.0.0:3000‘
function DoRequest(url, data=null, type=‘get‘) {
return new Promise((resolve, reject) => {
$.ajax({
type: type,
url: `${ApiHost }${url}?_rank=${new Date*1}`,
data: Object.assign({}, data),
crossDomain: true,
dataType: ‘json‘,
success: (res) => {
resolve(res)
},
error: (xhr, textStatus, errorThrown) => {
reject(xhr, textStatus, errorThrown)
}
})
})
}
2.調用
DoRequest(url, { id: 1 }).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
})
3.使用async await改寫
async function getList() {
try {
let data = await DoRequest(url, { id: 1 })
console.log(data)
} catch(err) {
console.log(err)
}
}
拒絕回調，擁抱async await