(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('
'); - })
-
- xhr.send()
将参数对象转为查询对象
- 1、创建URLSearchParams对象
- const paramsObj = new URLSearchParams({
- 参数名1:值,
- ...
- })
-
- const queryString = paramsObj.toString()
用作请求头里说明数据类型
- 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);
- //发出请求
- })
用于表示一个异步操作的最终完成(或失败)及其结果
- //1、创建Promise对象
- const p = new Promise((resolv,reject) => {
- //2、执行异步任务,并传递结果
- //成功调用:resolve,触发then()
- //失败调用:reject,触发catch()
- })
- p.then(result => {
-
- }).catch(error => {
-
- })
- 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('
')); - }).catch({
-
- })
- script>
-
- body>
-
- html>
- 1、同步代码:同步代码是按照书写顺序一行一行地执行程序的,浏览器会等待代码的解析和工作
- 2、异步代码:在一个程序长期运行的同时,继续对其他事件做出反应而不必等待任务完成,在有结果后触发一个回调函数
- 1、概念:依靠then()方法会返回一个新生成的Promise对象的特性,继续串联下一环任务
- 2、作用:防止回调函数地狱
示例:
1、定义:可以用一种更简洁的方式写出基于Promise的异步行为,而无需刻意地链式调用promise()
- 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 ``})
- console.log(aname);
- document.querySelector('.province').innerHTML = pname;
- document.querySelector('.city').innerHTML = cname;
- document.querySelector('.area').parentNode.innerHTML = aname;
- 1、语法
- try{
- //检测代码
- }catch(error){
- //错误则执行
- }
- 1、定义:
- 执行代码和收集异步任务的模型,在调用栈空闲,反复调用任务队列里回调函数的执行机制()
- 2、执行方式:
- 首先执行同步代码,遇见异步代码时,交给宿主浏览器环境执行
- 当异步有了结果,先将回调函数放进任务队列
- 当调用栈空闲后,反复调用任务队列中的回调函数