AJAX学习日记——Day 3

作者：Monodyee | 2024-03-16 10:52:24

踩

AJAX学习日记——Day 3

一、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、执行方式：
    首先执行同步代码，遇见异步代码时，交给宿主浏览器环境执行
    当异步有了结果，先将回调函数放进任务队列
    当调用栈空闲后，反复调用任务队列中的回调函数

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/249002