1.简易axios_获取身份列表
需求:基于Promise + XHR 封装 myAxios函数,获取省份列表展示
步骤:
1.定义 myAxios函数,接收配置对象,返回Promise对象
2.发起XHR请求,默认请求方法为GET
3.调用成功/失败的处理程序
4.使用myAxios函数,获取省份列表展示
<!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>封装_简易axios函数_获取省份列表</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:封装_简易axios函数_获取省份列表
* 1. 定义myAxios函数,接收配置对象,返回Promise对象
* 2. 发起XHR请求,默认请求方法为GET
* 3. 调用成功/失败的处理程序
* 4. 使用myAxios函数,获取省份列表展示
*/
// 1. 定义myAxios函数,接收配置对象,返回Promise对象
function myAxios(config){
return new Promise((resolve, reject) => {
//2.发起XHR请求,默认请求方法GET
const xhr = new XMLHttpRequest()
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
//3.调用成功/失败的处理程序
if (xhr.status >= 200 && xhr.status < 300){
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
// 4. 使用myAxios函数,获取省份列表展示
myAxios({
url:'http://hmajax.itheima.net/api/province'
}).then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('<br>')
}).catch(error => {
console.log(error)
document.querySelector('.my-p').innerHTML = error.message
})
</script>
</body>
</html>
2.简易axios_获取地区列表
需求:修改myAxios函数支持传递查询参数,获取"辽宁省","大连市"对应地区列表展示
要求:
- myAxios函数调用后,传入params选项
- 基于URLSearchParams转换查询参数字符串
<!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>封装_简易axios函数_获取地区列表</title>
</head>
<body>
<p class="my-p"></p>
<script>
/**
* 目标:封装_简易axios函数_获取地区列表
* 1. 判断有params选项,携带查询参数
* 2. 使用URLSearchParams转换,并携带到url上
* 3. 使用myAxios函数,获取地区列表
*/
function myAxios(config) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
// 1. 判断有params选项,携带查询参数
if(config.params){
//2.使用URLSearchParams转换,并携带到url上
const paramsObj = new URLSearchParams(config.params)
const queryString = paramsObj.toString()
// 把查询参数字符串,拼接在url?后面
config.url += `?${queryString}`
}
xhr.open(config.method || 'GET', config.url)
xhr.addEventListener('loadend', () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(JSON.parse(xhr.response))
} else {
reject(new Error(xhr.response))
}
})
xhr.send()
})
}
// 3. 使用myAxios函数,获取地区列表
myAxios({
url:'http://hmajax.itheima.net/api/area',
params: {
pname:'辽宁省',
cname:'大连市'
}
}).then(result => {
console.log(result)
document.querySelector('.my-p').innerHTML = result.list.join('<br>')
})
</script>
</body>
</html>
3.简易axios_注册用户
需求:修改myAxios函数支持传递请求头数据,完成注册用户功能
步骤:
-
myAxios函数调用后,判断data选项
-
转换数据类型,在send方法中发送
-
使用自己封装的myAxios函数完成注册用户功能
<!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>封装_简易axios函数_注册用户</title> </head> <body> <button class="reg-btn">注册用户</button> <script> /** * 目标:封装_简易axios函数_注册用户 * 1. 判断有data选项,携带请求体 * 2. 转换数据类型,在send中发送 * 3. 使用myAxios函数,完成注册用户 */ function myAxios(config) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest()
</script> </body> </html>if (config.params) { const paramsObj = new URLSearchParams(config.params) const queryString = paramsObj.toString() config.url += `?${queryString}` } xhr.open(config.method || 'GET', config.url) xhr.addEventListener('loadend', () => { if (xhr.status >= 200 && xhr.status < 300) { resolve(JSON.parse(xhr.response)) } else { reject(new Error(xhr.response)) } }) // 1. 判断有data选项,携带请求体 if (config.data) { //2. 转换数据类型,在send中发送 const jsonStr = JSON.stringify(config.data) xhr.setRequestHeader('Content-Type','application/json') xhr.send(jsonStr) } else { // 如果没有请求体数据,正常的发起请求 xhr.send() } }) } document.querySelector('.reg-btn').addEventListener('click',() => { // 3. 使用myAxios函数,完成注册用户 myAxios({ url:'http://hmajax.itheima.net/api/register', method:'POST', data:{ username:'itheima999', password:'666666' } }).then(result => { console.log(result) }).catch(error => { console.dir(error) }) })