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>