解决回调地狱的三种常见方法:
Promise 对象、Generator 函数、async 函数
服务器端的接口:放在在app.js中
//引入express框架
const express = require('express')
//创建web服务器
const app = express()
// 服务器端接口
app.get('/num1', (req, res) => {
//解决跨域问题
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
res.send('one')
})
app.get('/num2', (req, res) => {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
res.send('two')
})
app.get('/num3', (req, res) => {
res.header("Access-Control-Allow-Origin", "*");
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
res.send('three')
})
app.get('/get.html',(req,res) => {
res.send('Hello Ajax');
})
// 启动监听
app.listen(3000, () => {
console.log('running...')
})
新建一个HTML文件
用promise对象处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link href="favicon.ico" rel="shortcut icon">-->
<link rel="shortcut icon" href="#"/>
</head>
<body>
<script type="">
function myAjax(path) {
return new Promise(function(resolve, reject) {
// 需要在这里处理异步任务
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:3000/' + path);
xhr.send(null);
xhr.onreadystatechange = function() {
// 当readyState值不为0的时候直接返回
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取后台数据
var ret = xhr.responseText;
// 成功的情况
resolve(ret);
} else {
// 失败的情况
reject('服务器错误');
}
}
})
}
myAjax('num1')
.then(ret=>{
console.log(ret) // 按顺序第一个输出为:one
// 这里返回的是Promise实例对象,下一个then由该对象调用
return myAjax('num2');
})
.then(ret=>{
console.log(ret); // 按顺序第二个输出为:two
return myAjax('num3');
})
.then(ret=>{
console.log(ret) // 按顺序第三个输出为:three
})
</script>
</body>
</html>
用async函数处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- <link href="favicon.ico" rel="shortcut icon">-->
<link rel="shortcut icon" href="#"/>
</head>
<body>
<script type="">
function myAjax(path) {
return new Promise(function(resolve, reject) {
// 需要在这里处理异步任务
var xhr = new XMLHttpRequest();
xhr.open('get','http://localhost:3000/' + path);
xhr.send(null);
xhr.onreadystatechange = function() {
// 当readyState值不为0的时候直接返回
if(xhr.readyState != 4) return;
if(xhr.readyState == 4 && xhr.status == 200) {
// 获取后台数据
var ret = xhr.responseText;
// 成功的情况
resolve(ret);
} else {
// 失败的情况
reject('服务器错误');
}
}
})
}
async function getNum() {
// await执行流程是顺序执行
let ret1 = await myAjax('num1');
let ret2 = await myAjax('num2');
let ret3 = await myAjax('num3');
console.log(ret1);
console.log(ret2);
console.log(ret3);
}
getNum();
</script>
</body>
</html>
控制台输出
参考博文:https://www.cnblogs.com/belongs-to-qinghua/p/11161140.html