使用Promise+XMLHttpRequest获取数据。
假设服务端的接口如下:
返回成功的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例_使用Promise+XHR_获取省份列表</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:使用Promise管理XHR请求省份列表
* 1. 创建Promise对象
* 2. 执行XHR异步代码,获取省份列表
* 3. 关联成功或失败函数,做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
// 2. 执行XHR异步代码,获取省份列表
const xhr = new XMLHttpRequest()
xhr.open('get', 'https://hmajax.itheima.net/api/province')
xhr.addEventListener('loadend', () => {
// xhr如何判断是成功和失败的呢
// 根据http状态码来判断
// 2xx都是成功的响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(new Error(xhr.response))
}
// console.log(xhr)
// console.log('返回的响应内容:')
// console.log(xhr.response)
})
xhr.send()
})
// 3. 关联成功或失败函数,做后续处理
p.then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = JSON.parse(result).list.join('<br>')
}).catch(error => {
// 错误信息要用console.dir详细打印
console.dir(error)
// 将服务器返回的提示消息插入到p标签中
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>
返回错误的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例_使用Promise+XHR_获取省份列表</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:使用Promise管理XHR请求省份列表
* 1. 创建Promise对象
* 2. 执行XHR异步代码,获取省份列表
* 3. 关联成功或失败函数,做后续处理
*/
// 1. 创建Promise对象
const p = new Promise((resolve, reject) => {
// 2. 执行XHR异步代码,获取省份列表
const xhr = new XMLHttpRequest()
xhr.open('get', 'https://hmajax.itheima.net/api/province1')
xhr.addEventListener('loadend', () => {
// xhr如何判断是成功和失败的呢
// 根据http状态码来判断
// 2xx都是成功的响应状态码
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response)
} else {
reject(new Error(xhr.response))
}
// console.log(xhr)
// console.log('返回的响应内容:')
// console.log(xhr.response)
})
xhr.send()
})
// 3. 关联成功或失败函数,做后续处理
p.then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = JSON.parse(result).list.join('<br>')
}).catch(error => {
// 错误信息要用console.dir详细打印
console.dir(error)
// 将服务器返回的提示消息插入到p标签中
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>