一、XHR
1、四步使用
（1）创建对象
（2）配置请求方法和请求url地址
（3）监听loadend事件，接收响应结果
（4）发出请求
const xhr =new XMLHttpRequest()
xhr.open('请求方法','请求url网址')
xhr.addEventListener('loadend',() => {
//loadend：无论成功或失败，都会执行
//响应结果
console.log(xhr.response)
})
xhr.send()
实例：
const xhr = new XMLHttpRequest()
xhr.open('GET','http://hmajax.itheima.net/api/province');
xhr.addEventListener('loadend',() => {
const data = JSON.parse(xhr.response);
console.log(data.list);
document.querySelector('.my-div').innerHTML = data.list.join('<br>');
})
xhr.send()二、URLSearchParams
1、用处
将参数对象转为查询对象
2、语法
1、创建URLSearchParams对象
const paramsObj = new URLSearchParams({
参数名1:值,
...
})
const queryString = paramsObj.toString()三、setRequestHeader
1、用处
用作请求头里说明数据类型
2、语法
1、说明类型
xhr.setRequestHeader('Content-Type','application/json')
2、实例
document.querySelector('.reg-btn').addEventListener('click', () => {
const xhr = new XMLHttpRequest();
xhr.open('post','http://hmajax.itheima.net/api/register');
xhr.addEventListener('loadend',() => {
console.log(xhr.response);
})
xhr.setRequestHeader('Content-Type','application/json');
const user = {username:'itheima237',password:'7654321'};
const userStr = JSON.stringify(user);
xhr.send(userStr);
//发出请求
})四、Promise
1、用处
用于表示一个异步操作的最终完成（或失败）及其结果
2、语法
//1、创建Promise对象
const p = new Promise((resolv,reject) => {
//2、执行异步任务，并传递结果
//成功调用：resolve，触发then()
//失败调用：reject，触发catch()
})
p.then(result => {
}).catch(error => {
})五、XHR综合使用
<!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>
<script>
/**
* 目标：封装_简易axios函数_获取省份列表
* 1. 定义myAxios函数，接收配置对象，返回Promise对象
* 2. 发起XHR请求，默认请求方法为GET
* 3. 调用成功/失败的处理程序
* 4. 使用myAxios函数，获取省份列表展示
*/
function myAxios(config){
return new Promise((resolve,reject)=>{
const xhr = new XMLHttpRequest();
if(config.params){
//params是查询参数，用于url中？后
const paramsObj = new URLSearchParams(config.params);
//URLSearchParams用来获取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))
}
})
if(config.data)
{
xhr.setRequestHeader('Content-Type','application/json');
//设置请求头
const userStr = JSON.stringify(config.user);
//将请求数据转换成JSON字符串
xhr.send(userStr);
//请求
}
else
{
xhr.send();
}
})
}
myAxios({
url:"http://hmajax.itheima.net/api/register",
data:{
username:'itheima007',
password:'7654321',
}
}).then(result => {
console.log(result.list.join('<br>'));
}).catch({
})
</script>
</body>
</html>六、同步代码和异步代码
1、定义
1、同步代码：同步代码是按照书写顺序一行一行地执行程序的，浏览器会等待代码的解析和工作
2、异步代码：在一个程序长期运行的同时，继续对其他事件做出反应而不必等待任务完成，在有结果后触发一个回调函数七、Promise-链式调用
1、概念：依靠then()方法会返回一个新生成的Promise对象的特性，继续串联下一环任务
2、作用：防止回调函数地狱示例：
八、async函数和await
1、定义：
1、定义：可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用promise()2、语法：
1、用async修饰函数，可以使函数变成异步函数
2、再用await修饰axios对象
3、概念：用await取代了then函数，等待获取Promise对象成功状态的结果值
示例：
async function getData(){
const pObj = await axios({url:'http://hmajax.itheima.net/api/province'});
const pname = pObj.data.list[0];
const cObj = await axios({url:`http://hmajax.itheima.net/api/city`,params:{pname}})
const cname = cObj.data.list[0];
const aObj = await axios({url:'http://hmajax.itheima.net/api/area',params:{pname,cname}})
const alist = aObj.data.list;
const aname = alist.map(item => {return `<option class="area">${item}</option>`})
console.log(aname);
document.querySelector('.province').innerHTML = pname;
document.querySelector('.city').innerHTML = cname;
document.querySelector('.area').parentNode.innerHTML = aname;九、async/await 捕获错误
1、使用：try...catch
2、语法
1、语法
try{
//检测代码
}catch(error){
//错误则执行
}十、事件循环
1、定义
1、定义：
执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里回调函数的执行机制()
2、执行方式：
首先执行同步代码，遇见异步代码时，交给宿主浏览器环境执行
当异步有了结果，先将回调函数放进任务队列
当调用栈空闲后，反复调用任务队列中的回调函数