node.js网络技术

最新推荐文章于 2024-07-25 09:24:40 发布

Y636

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量54

点赞数

文章标签： node.js javascript 前端

本文链接：https://blog.csdn.net/weixin_56464670/article/details/126128859

版权

1、回调封装

tool("/dlost",cb):tool函数一般是执行任务的函数，当这个任务执行完毕时调用传入的cb函数，然后开始运行cb的代码，在这种设计中，cb函数就是回调函数

如何利用回调函数来设计一个网络请求工具：

tool("/dlost",cb):tool函数是一个简单封装了ajax请求工具在tool内部，去用ajax请求传入的第一个参数"/dlost"对应网址，当请求返回数据时，就把数据传给cb函数使用

具体实现代码如下：

function tool(url,cb){
var xhr=new XMLHttpRequest()||new ActiveXObject()
xhr.open("GET",url,cb)
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
cb(xhr.responseText)  //写页面
}
}

const router=require("./router.js")
router.get("/home",function(req,res){
var obj={name:"YU",age:19}
var str=JSON.stringfy(obj)
res.setHeader("content-Type","text/json;charset=utf8")
res.end(str)
})

<h1>home</h1>
<button onclick="fn()">点击使用ajax请求数据</button>
<script>
function fn(){
tool("/home",function(str){
console.log(str)
}
</script>

2、 jQuery

jQuery是JavaScript的函数库，极大地简化了JavaScript的编写

使用jQuery需要在头部引用jQuery 文件，既可以使用网络路径，也可以先下载到本地再引用

<head>
<meta charset="utf-8">
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.2.4/jquery.js"></script>
</head>
<body>
<h1>home</h1>
<button onclick="fn()">点击使用ajax请求数据</button>
<script>
function fn(){
$.get("/home",function(res){
console.log(res,12345)
})
}
</script>
</body>

3、promise

关于 promise异步编程在前面有提到，自行翻看之前的笔记

这里主要写怎样用promise进行封装

const router=require("./router.js")
router.get("ajax1",(req,res){
res.end('{"hello":"world1"}')
})
router.get("/ajax2",(req,res)=>{
	res.end('{"hello":"world2"}')
})
router.get("/ajax3",(req,res)=>{
	res.end('{"hello":"world3"}')
})

<h1>promise封装ajax</h1>
<script>
function fn(url){
return new Promise((resolve,reject)=>{
try{
let xhr=new XMLHttpRequest()||ActiveXObject("xxx")
xhr.open("GET",url,true)
xhr.send()
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
console.log(99999)
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=fn('/ajax1')
p1.then((data)=>{
console.log(6789,data)
return fn('/ajax2')
})
.then((data2)=>{
console.log(data2)
return fn('/ajax3')
})
.then((data3)=>{
console.log(data3)
})
.catch((e)=>{
console.log(e)
})

4、axios和fetch

axios已经被写好了，我们只需要引用就好了，可以直接引用网址也可以直接下载到本地引用

axios网络请求得到的结果用then去取存放在形参的data中

fetch是浏览器自带的api，可以更加简单的获取数据，也可以看作ajax的升级版，是基于Promise实现的

<head>
<meta charset="utf-8">
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"></script>
</head>
<body>
<h1>axios网络请求工具</h1>
<script>
axios("/ajax2")
.then(res=>console.log(res))
</script>

<script>
fetch("/ajax1")
.then((res)=>{
return res.json()
})
.then((data)=>{
console.log(data)	//这里才是得到的最终数据			
})
</script>
</body>

5、async和await

await是把promise对象的数据取出来，必须放在函数内部且该函数必须是async修饰

<head>
<meta charset="utf-8">
<script src='https://s1.pstatp.com/cdn/expire-1-M/axios/0.19.2/axios.js'></script>
</head>
<body>
<button onclick="fn()">按钮</button>
<script>
async function fn(){
let data1=await new Promise((n1,n2)=>{n1("hello world")})
console.log(data1)
				
let data2=await axios('/ajax2')  //返回值为promise对象
console.log(data2)
				
let data3=await axios('/ajax3')
console.log(data3)
				
let data4=await axios('/ajax4')
console.log(data4)
}
</script>
</body>