fetch基于promise替代ajax请求的函数（不需要引入）

news/2024/7/19 14:39:19 标签: fetch, js, nodejs

/*fetch请求*/
	<!DOCTYPE html>
	
	<html>
		<head>
			<meta charset="utf-8">
			<title>fetch</title>
		</head>
		<body>
			<button id="btn">提交</button>
			<button id="btnpost">post提交</button>
		</body>
	</html>
	<script type="text/javascript">
		let btn = document.getElementById("btn");
		let btnpost = document.getElementById("btnpost");
		btn.onclick = function(){
			/*
				fetch第一个then中返回的数据不是需要处理的请求数据，
				是服务端返回的所有请求信息，在此信息中，有一个隐式原型，
				隐式原型里有json()方法，只有通过执行json(),才可以获取
				需要的信息，通常都是把json()方法的执行结果，传递给
				下一个then来处理
			*/
			fetch('./js/data.json').then(res=>{
				console.log(res);
				return res.json();
			}).then(res=>{
				console.log(res);
			});
		};
		/*
		fetch post提交，必须把要提交的数据进行序列化
		*/ 
		btnpost.onclick = function(){
			let data={
				name:'愚公',
				age:70,
				job:'刨山'
			};
			let config = {
				method:"POST", //设置post请求
				body: JSON.stringify(data), //必须配置headers
				的content-type为application/json
				headers:{
					'content-type':'application/json'
				},
				mode:'cors' //设置为跨域模式,意思是从不同的域请求数据
			};
			
			fetch('http://127.0.0.1:8080/postdata',config).then(res=>{
				console.log(res);
			});
		};
	</script>


//server  express框架下
const express = require('express');
const app = express();
const bodyParser = require('body-parser');

const cors = require('cors');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended:false
}));
app.use(cors());

app.post('/postdata',(req,res)=>{
    // console.log(req);
    console.log(req.body);
    let { name,age,job } = req.body;
    res.send(name+'一闪一闪亮晶晶');
});


app.listen(5000,()=>{
    console.log('服务启动成功');
});