其实在10年前,我读大学的期间,感觉jquery的ajax太好用了,但是随着时代的发展,JS的坑点越来越明显,其中一点就是地狱回调的问题,好在es7中提出了await/async函数 本文将jquery中的ajax转化成使用await/async函数的使用方式
首先需要定义一个函数,用于返回Promise类型的对象,接着需要使用resolve和reject函数用于异步处理结果
function fetch(url) {
const p = new Promise((resolve, reject) => {
$.ajax(url, {
dataType: 'json',
timeout: 5000,
success: function (result) {
if (result.title) {
resolve(result.title);
} else {
reject(new Error('没有标题'))
}
},
error: function () {
reject(new Error('返回错误'))
}
})
})
return p
}
async function clickHandler() {
const url = 'https://jsonplaceholder.typicode.com/todos/1'
try {
const title = await fetch(url)
console.log('标题是:' + title)
} catch (e) {
console.error(e)
}
}
$('#btn1').on('click', clickHandler)