发起一个ajax请求，向后端请求用户信息，用解决回调地狱的Promise 、Generator 函数、async 函数对象处理返回值

最新推荐文章于 2022-07-19 16:11:36 发布

咿呀咿呀咿呀哟

最新推荐文章于 2022-07-19 16:11:36 发布

阅读量219

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_44985985/article/details/106203977

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

解决回调地狱的三种常见方法：

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>