客户端请求Ajax、axios、web worker、fetch

redeyehare

已于 2023-08-15 15:54:53 修改

阅读量249

点赞数

文章标签：前端 python

于 2023-08-13 20:14:42 首次发布

本文链接：https://blog.csdn.net/u013523190/article/details/132253272

版权

客户端请求Ajax、axios、web worker、fetch

axios

axios

Ajax 的很好替代方案，比 Ajax 更加简单易用。
基于nodejs服务器

<script src="js/axios.js"></script>
import axios from "axios";
配置信息
jet config = {
	baseURL:"http://localhost:8080",
	timeout:10000,
	withCredentials:true
}
创建实例
const instance=axios.create(config)
导出
export default instance
get请求
methods:{
	search(){
		axios.get("http://localhost:3000")
		.then(res=>{
			console.log(res);
		}，reason=>{
			console.log("error");
			console.log(reason); 触发异常
		}
	}
}

methods:{
	search(){
		axios.get("http://localhost:3000")
		.then(res=>{
			console.log(res);
		}，catch(reason=>{
			console.log("error");
			console.log(reason); 触发异常
		})
	}
}

data:{postList:[]},
methods:{
	search(){
		axios.get("http://localhost:3000")
		.then(res=>{
			console.log(res);
			this.postList=res.data;
		}，reason=>{
			console.log("error");
			console.log(reason); 触发异常
		}
	}
}

Ajax

在这里插入代码片

web worker

后台线程不能直接访问页面或窗口对象,需要创建脚本文件.

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>TEST1</title>
</head>

<body>
  <script type="text/javascript" src="./pages/test.js">console.log("123");</script>
  <h1>index.html</h1>
  <p id="sourceArr"></p>
  <button id="sortBtn">sort</button>
  <p id="resultArr"></p>
  <script type="text/javascript" src="index.js"></script>
  
</body>
</html>

index.js

console.log("123");
alert("Hello");
const sourceArr=document.getElementById("sourceArr");//靠id获取dom
const sortBtn=document.getElementById("sortBtn");
const resultArr=document.getElementById("resultArr");

let arr=[4,3,1,9];

sourceArr.textContent = arr.toString();

let worker = new Worker("worker.js");//创建worker,调用worker内的函数

sortBtn.addEventListener("click",()=>{//监听
    worker.postMessage(arr);
    console.log("123")
});

worker.onmessage=function(e){
    resultArr.textContent=e.data;
    console.log("111")
};

worker.js

onmessage=function(e){
    const data = e.data;
    this.postMessage(data.sort((a,b)=>a-b));
};

fetch

新一代请求方案

<script>
    fetch("http://ajax-base-api-t.itheima.net/api/getbooks")
    .then((response) => response.json())
    .then((data) => console.log(data));
</script>

async function getData(){
	try{
	let res=await fetch("http://ajax-base-api-t.itheima.net/api/getbooks")
	console.log(res)
	let json=await res.json()
	console(json)
	}catch.log(err){
		console.log(err)
	}
}
getData()

查询参数
let res=await fetch(“http://ajax-base-api-t.itheima.net/api/getbooks?id=2”)

function a(){
	console.log('1111111')}
</script>
<input type="button" value="html级别绑定方式" onclick="a()" />

res.ok   返回是否成功
res.status  返回状态吗
res.statusText 返回状态文本信息
rs.url  返回请求地址

局部刷新数据

<script>
async function a(){
	let res=await fetch("/123")
	console.log(res)
	let json=await res.json()
	console.log(json)
	//document.write(json)
	document.getElementById("myDiv").innerHTML=json;绑定交换数据
}
</script>
<div id="myDiv"><h2>原始数据</h2></div>

获取，添加，删除

封装

封装效果get
http({
	method:"xxx",
	url:"xxx",
	params:{.....}
})
封装效果post
http({
	method:"xxx",
	url:"xxx",
	data:{.....}
})

async function fn1({
	method:"xxx",
	url:"xxx",
	data:{.....}
})
fn1()

async function http(obj){
	let{method,url,params,data}=obj 结构赋值
	if(params){转换成key
		let str=new URLSearchParams(params).tostring() 把字典拼接成参数字符串
		url += '?'+str 拼接成带参数的请求
	}
}

获取

<script scr="./lib/form-serialize.js"></script> 获取表单数据插件
<script scr="./lib/http.js"></script>  引入封装文件
<script>

//获取两个dom对象
let tbody=document.querySelector('tbody')  
let form=document.querySelector('form')  form表单


render()
async function render(){
	let res=await http({
	method:'get',
	url:'http://ajax-base-api-t.itheima.net/api/getbooks'
	})
	console.log(res)
	
	let htmlSte=''
	res.data.forEach(item=>{
		htmlStr+='
			<tr>
				<th scope="row">${item.id}</th>
				<td>${item.bookname}</td>
				<td>${item.author}</td>
				<td>
				<button type="button" class="btn btn-link btn-sm" data-id="${item.id}"> 添加自定义属性
					删除
				</button>
				</td>
			</tr>
		'
	})
	tbody.innerHTML=htmlStr
	console.log(htmlStr)
}
</script>

添加

<script>
//添加数据
form.addEventListener('submit',async function(){
//表单，浏览器存在页面跳转功能
	//阻止浏览器默认行为
	e.preventdefault()
	console.log('111')
	//获取表单数据,固定写法
	let result = serialize(form,{hash:true})
	let res = await http{ // await 必须在async函数里
		method:'post',
		url:'http://ajax-base-api-t.itheima.net/api/getbooks',
		data:result
	}
//成功，重新渲染
if(res.status===201){
	render()
	//清空表单
	form.reset()
}else{//失败，提示弹窗
	alert(messagr?any):void
	alert(res.msg)
}
})

</script>

删除

//删除功能利用委托
tbody.addEventListener('click',async function(e)){
	console.log(e.target.tagName)//当前点击对象.标签名
	if(e.target.tagName==='BUTTON'){//判断是不是button
		console.log(e.target.dataset.id)  //dataset 可以拿到data-id的属性
		let res= await http({
			method:'delet',
			url:'http://ajax-base-api-t.itheima.net/api/getbooks',
			params:{di:e.target.dataset.id}//通过id删除数据
		})
		console.log(res)
		if(res.status===200){
			render()
		}
	}
}