利用ES8中的async,await关键字自己简单分装一个Ajax请求函数
- 首页我们定义一个函数叫做sendAjax,函数内部我们需要返回一个promise对象,这样我们后续就不用通过.then 和.catch这种原始的方法去获取对应的值了
function sendAjax(method, url) {
return new Promise((resolve, reject) => {
// 创建一个XMLHttpRequest实例
const xhr = new XMLHttpRequest()
// 传递参数
xhr.open(method, url)
// 发送请求
xhr.send()
// 监听事件
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 请求成功
resolve(xhr.responseText)
} else {
// 请求资源失败
reject(xhr.status)
}
}
}
})
}
-
接下来我们需要去发送网络请求,去请求数据了
// 测试 // 我们先使用原来的.then()的方式去获取返回值吧 // 注意这里sendAjax中返回的是一个promise对象 const result = sendAjax('get', 'https://api.apiopen.top/getJoke').then( (result) => console.log(result), (reason) => console.log(reason) ) // 在利用配合 async 和 await 尝试一下 async function main() { const result = await sendAjax('get', 'https://api.apiopen.top/getJoke') console.log(result) } main() //注意这里await 函数必须要放到async 函数中
哈哈哈啊 请求数据成功!