回调函数封装ajax

通过回调函数设计一个网络请求工具 tool(参数1,参数2)

在tool内部用ajax请求传入的第一个参数,参数1就是请求的网址,当请求返回数据时,就把数据传给参数2. 参数2为一个函数

列:

function tool(url, cb) {
 	var xhr = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP")
 	xhr.open("GET", url, true)
 	xhr.send()
 	xhr.onreadystatechange = function() {
 		if (xhr.readyState == 4 && xhr.status == 200) {
 			
 			cb(xhr.responseText)
 		}
 	}
 }
 tool("/login",cb)
 console.log(111)

jquery封装ajax

引入jquery框架

<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>

使用get函数调用

const router=require("./router.js")
router.get("/homegoods",function(req,res){
	var obj={data:[{title:"产品1",des:"描述1",id:1231},
	{title:"产品2",des:"描述2",id:1232},
	{title:"产品3",des:"描述3",id:1233}
	]}
	var str=JSON.stringify(obj)
	res.setHeader("content-Type","text/json;charset=utf8")
	res.end(str)
})


router.get("/car",function(req,res){
	var obj=[{name:"1号",id:1231},
	{name:"2号",id:1232},
	{name:"3号",id:1233}
	]
	var str=JSON.stringify(obj)
	res.setHeader("content-Type","text/json;charset=utf8")
	res.end(str)
})


router.get("/login",function(req,res){

    var str='{"title":"hello"}'
	res.setHeader("content-Type","text/json;charset=utf8")
	res.end(str)
})

<head>
	<meta charset="utf-8">
	<title></title>
	<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>
</head>

<body>
	<h1 id="btn">login</h1>
	<script>
		btn.onclick = function () {
			console.log(66666)
			$.get("http://192.168.43.147:8080/login", function () {
				console.log(arguments, 123)
			})
		}
	</script>

Promise 封装ajax

避免了回调地狱的形成

			function myaxios(url){
				return new Promise((resolve,reject)=>{
					
					try{
						//这里写代码  
						//3种情况: 语法错误,语法正确但是会产生错误的业务数据或者正确的业务数据
						
						let xhr=new XMLHttpRequest()||ActiveXObject("xxx")
						xhr.open("GET",url,true)
						xhr.send()
						xhr.onreadystatechange=function(){
							if(xhr.readyState==4){
								console.log(123)
								if(xhr.status==200){
									resolve(xhr.responseText)
								}else if(xhr.status==404){
									reject(xhr.responseText)
								}else{
									reject("net err")
								}
							}
						}
					}catch(e){
						reject(xhr.responseText)
					}
					
				})
				
			}

调用

			var p1=myaxios('/ajax1')
			p1.then((data)=>{
				console.log(111111111,data)
				return myaxios('/ajax2')
			})
			.then((data2)=>{
				console.log(data2)
				return myaxios('/ajax3')
			})
			.then((data3)=>{
				console.log(data3)
				return myaxios('/ajax4')
			})
			.then((data4)=>{
				console.log(data4)
			})
			.catch((e)=>{
				console.log(e)
			})

还可同步调用:

			var data1=myaxios('/ajax1')
			
			var data2=myaxios('/ajax2')
			
			var data3=myaxios('/ajax3')
			
			var data4=myaxios('/ajax4')

axios和fetch

axios网络请求工具(去静态资源库中获取,推荐字节跳动)

获取axios网络请求工具:

<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>
</head>

使用方法:就是用promise封装好的ajax网络请求

                        var p1=axios('/ajax1')
			p1.then((data)=>{
				console.log(111111111,data.data)
				return axios('/ajax2')
			})
			.then((data2)=>{
				console.log(data2.data)
				return axios('/ajax3')
			})
			.then((data3)=>{
				console.log(data3.data)
				return axios('/ajax4')
			})
			.then((data4)=>{
				console.log(data4.data)
			})
			.catch((e)=>{
				console.log(e)
			})

fetch:浏览器的功能,不是函数

			fetch("/ajax3")
			.then((res)=>{
				return res.json()
			})
			.then((data)=>{
				console.log(data)				
			})

async与await

去静态资源库中获取

asycn与await一同使用,await可以取出primise中产生的数据

	<head>
		<meta charset="utf-8">
		<title></title>
		<script src='https://s1.pstatp.com/cdn/expire-1-M/axios/0.19.2/axios.js'></script>
	</head>

		<script>
			async function fn(){
				//高内聚低耦合
				
				//ES7出的新语法
				let data1=await new Promise((n1,n2)=>{n1(2000)})
				console.log(data1)
				
				let data2=await axios('/ajax2')
				console.log(data2)
				
				let data3=await axios('/ajax3')
				console.log(data3)
				
				let data4=await axios('/ajax4')
				console.log(data4)
			}
			
		</script>

全栈5---(回调函数封装ajax,Promise 封装ajax,axios和fetch,async与await)