总结Promise
axios的底层实现异步promise操作+xmlhttpRequest
关键词promise对象处理异步操作
xhr发送请求
promise异步操作触发成功/失败回调函数更新状态为成功fulfilled还是rejected
根据状态触发then还是catch。
通俗点举个例子就是 买了彩票,然后去菜市场买菜,其过程不会被阻塞,也就是不用一直在彩票店等到开奖才做其他事情,留下电话号码,也就是设置回调then还是catch,当中奖了(resolve)触发then回调, 没中奖(reject)触发catch
代码+讲解(可直接复制使用)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<div class="province">
</div>
<script>
// 内部创建promise对象,回调函数传入resolve和reject函数
new Promise((resolve, reject) => {
// 创建xhr对象,初始化请求方式,地址
const xhr = new XMLHttpRequest()
xhr.open('GET', 'http://hmajax.itheima.net/api/province324234')
// 设置监听器监听请求的完成状态来触发回调
xhr.addEventListener('loadend', () => {
// 根据请求的状态码来决定调用resolve还是reject函数并传入该异步操作所携带的数据
if (xhr.status >= 200 && xhr.status < 300) {
// (resolve的数据通常将其转为js对象,后续then回调的时候可以获取该js对象内的属性值
resolve(JSON.parse(xhr.response))
}
else {
// 而reject的参数为new Error(errorMsg)对象)
reject(new Error(xhr.response))
}
})
xhr.send()
// 调用回调resolve OR rejecte以此来更新promise的状态为
// fulfilled已完成异步操作,
// 还是rejected未完成异步操作,同时携带对应的数据给下一个回调
}).then(
// 给该promise对象设置监听器then和catch根据当前状态来触发then还是catch里的回调函数,
// 形参res为resolve还是reject带过来的数据
res => {
console.log(res);
document.querySelector('.province').innerHTML = res.list.join('<br>')
}).catch(res => {
// 取error对象的数据不能直接log打印,而是console.dir(error)详细打印,
// 同时往标签里塞值innerHtml = error.message
console.dir(res);
document.querySelector('.province').innerHTML = res.message
})
</script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</body>
</html>