1. 使用ajax请求一个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="content">.........</h1>
<button id="btn">点我读取文件</button>
<script>
var content = document.getElementById('content');
var btn = document.getElementById('btn');
function ajax(method, url, data, successFn, failFn) {
let xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.send();
xhr.onreadystatechange = function() {
console.log(xhr,'==========')
if (xhr.readyState == '4') {
if (xhr.status == '200') {
//成功回调
successFn(xhr.responseText);
} else {
failFn(xhr.status);
}
}
};
}
function successFn(responTest) {
console.log(responTest, '成功');
content.innerText = responTest;
}
function failFn(status) {
console.log(status, '失败');
}
btn.onclick = function(){
ajax('get', './1.txt', {}, successFn, failFn);
}
</script>
</body>
</html>
对应的文件1.txt
hello world
2.使用promise 和 async await 来分别处理一个请求和两个请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<h1 id="content">文件1内容</h1>
<h1 id="content_one">文件2内容</h1>
<button id="btn">点我读取文件1</button>
<button id="btn_two">点我读取文件2</button>
<button id="btn_three">点击读取文件1和文件2(先一后二)</button>
<button id="btn_four">读取文件1和文件2(都读取完毕再做处理)</button>
<button id="btn_five">读取文件1和文件2(那个请求快处理哪个)</button>
<button id="btn_six">先后读取文件1和文件2(async await)</button>
<script src="http://code.jquery.com/jquery-2.1.1-rc2.min.js"></script>
<script>
let content = document.getElementById('content');
let content_one = document.getElementById('content_one');
let btn = document.getElementById('btn');
let btn_two = document.getElementById('btn_two');
let btn_three = document.getElementById('btn_three');
let btn_four = document.getElementById('btn_four');
let btn_five = document.getElementById('btn_five');
let btn_six = document.getElementById('btn_six');
//包装的ajax 用于请求数据
function ajaxPromise(url,method,data) {
var pro = new Promise(function(resolve, reject) {
var ajax = new XMLHttpRequest();
var method=method||"GET"
var data=data ||null
ajax.open(method, url);
ajax.send(data);
ajax.onreadystatechange = function() {
if (ajax.readyState == 4) {
if(ajax.status == '200'){
console.log(resolve,'======')
resolve(ajax.responseText);
}else{
reject(ajax.status);
}
}
}
})
return pro;
}
//1.使用promise then的链式调用的方式 传入请求成功和失败的回调 来执行成功的逻辑和捕获异常
btn.addEventListener('click',()=>{
ajaxPromise("./1.txt").then(function(msg) {
console.log(msg,'请求成功');
content.innerText = msg;
}, function(msg) {
console.log(msg,'请求失败');
content.innerText = msg;
})
})
//2.使用async await方式来处理该请求 使用try catch来处理请求成功的逻辑和捕获异常
btn_two.addEventListener('click',async ()=>{
try{
let res = await ajaxPromise("./1.json");
console.log(res,'哈哈哈哈哈哈');
let {success,data} = JSON.parse(res);
if(success){
console.log(data,'请求成功');
let {showColumnsMap} = data;
let listArr = [];
Object.keys(showColumnsMap).forEach((key)=>{
listArr.push(showColumnsMap[key])
})
console.log(listArr,'=====')
let contentDom = listArr.map((item)=>{
return `<div>${item}<div/>`
})
console.log(contentDom,'=====')
content_one.innerHTML = contentDom.join('');
}
}catch(error){
console.log(error,'请求失败')
}
})
//3.使用promise的then的链式调用方式 先后发两个请求 请求成功第一个文件后，再请求第二个文件 但凡第一个请求失败了，第二个请求也就不会去触发 被阻断了
btn_three.addEventListener('click',()=>{
ajaxPromise("./1.txt").then(function(msg) {
console.log(msg,'第一个文件请求成功');
content.innerText = msg;
ajaxPromise('./1.json').then((res)=>{
let {success,data} = JSON.parse(res);
if(success){
console.log(data,'第二个文件请求成功');
let {showColumnsMap} = data;
let listArr = [];
Object.keys(showColumnsMap).forEach((key)=>{
listArr.push(showColumnsMap[key])
})
console.log(listArr,'=====')
let contentDom = listArr.map((item)=>{
return `<div>${item}<div/>`
})
console.log(contentDom,'=====')
content_one.innerHTML = contentDom.join('');
}
},(err)=>{
console.log(err,'第二个文件请求失败')
})
}, function(msg) {
console.log(msg,'第一个文件请求失败');
content.innerText = msg;
})
});
//4. 使用promise all的方式 请求两个接口，都成功后对于请求到的数据进行统一处理
btn_four.addEventListener('click',()=>{
Promise.all([ajaxPromise("./1.txt"),ajaxPromise('./1.json')]).then((res)=>{
console.log(res,'请求成功')
//处理第一个请求回来的数据
let msg1 = res[0];
content.innerText = msg1;
//处理第二个请求回来的数据
let dataObj = JSON.parse(res[1]);
console.log(dataObj,'=======');
let {data} = dataObj;
console.log(data,'第二个文件请求成功');
let {showColumnsMap} = data;
let listArr = [];
Object.keys(showColumnsMap).forEach((key)=>{
listArr.push(showColumnsMap[key])
})
console.log(listArr,'=====')
let contentDom = listArr.map((item)=>{
return `<div>${item}<div/>`
})
console.log(contentDom,'=====')
content_one.innerHTML = contentDom.join('');
},(err)=>{
console.log(err,'请求出错')
})
});
//5. 使用promise race的方式 请求两个接口，于先完成的请求到的数据进行处理 如果某一个请求出错了，不会影响另外一个请求
btn_five.addEventListener('click',()=>{
Promise.race([ajaxPromise("./11.txt"),ajaxPromise('./1.json')]).then((res)=>{
console.log(res,'请求成功');
let resArr = res.split(' ');
console.log(resArr,'===========')
console.log(resArr,'===========')
if(resArr.length<=2){
//处理第一个请求回来的数据
content.innerText = res;
}else{
let {success,data} = JSON.parse(res);
if(success){
//处理第二个请求回来的数据
console.log(data,'第二个文件请求成功');
let {showColumnsMap} = data;
let listArr = [];
Object.keys(showColumnsMap).forEach((key)=>{
listArr.push(showColumnsMap[key])
})
console.log(listArr,'=====')
let contentDom = listArr.map((item)=>{
return `<div>${item}<div/>`
})
console.log(contentDom,'=====')
content_one.innerHTML = contentDom.join('');
}
}
},(err)=>{
console.log(err,'请求出错')
})
});
//6. 使用async await 的方式 哪个写在前面哪个先请求，一个请求失败，另一个也会被阻断。 使用这样的方式好处是在有异步回调嵌套的情况下比单纯的使用promise看起来代码逻辑和结构更清晰，
//避免了回调嵌套回调的回调地狱问题,async await 的使用try catch来处理成功和捕获异常
btn_six.addEventListener('click',async ()=>{
try{
let res2 = await ajaxPromise("./1.json");
console.log(res2,'=========');
if(res2){
let {success,data} = JSON.parse(res2);
if(success){
//处理第二个请求回来的数据
console.log(data,'第二个文件请求成功');
let {showColumnsMap} = data;
let listArr = [];
Object.keys(showColumnsMap).forEach((key)=>{
listArr.push(showColumnsMap[key])
})
console.log(listArr,'=====')
let contentDom = listArr.map((item)=>{
return `<div>${item}<div/>`
})
console.log(contentDom,'=====')
content_one.innerHTML = contentDom.join('');
}
}
let res1 = await ajaxPromise("./1.txt");
console.log(res1,'========');
if(res1){
//处理第一个请求回来的数据
content.innerText = res1;
}
}catch(error){
console.log(error,'请求出错')
}
})
</script>
</body>
</html>
对应的文件1.json
{
"data": {
"showColumnsMap": {
"keyval2": "币种",
"keyval3": "会计月",
"inputstate": "录入标志",
"pk_task": "所属任务",
"finalfilecount": "管理报告数量",
"pk_org": "报表主组织",
"pk_report": "报表",
"taskcheckstate": "任务审核状态",
"inputperson": "录入人",
"repcheckstate": "报表审核状态",
"repcommitstate": "报表上报状态",
"inputtime": "录入时间",
"taskcommitstate": "任务上报状态"
}
},
"success": true
}
以上实例即是ajax ，promise， async和await来处理异步的一些对比和分析。
