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

最新推荐文章于 2022-11-28 13:20:47 发布

werch

最新推荐文章于 2022-11-28 13:20:47 发布

阅读量157

点赞数

分类专栏： js nodejs 文章标签： fetch js nodejs

本文链接：https://blog.csdn.net/weixin_42666092/article/details/117828288

版权

js 同时被 2 个专栏收录

54 篇文章 1 订阅

订阅专栏

nodejs

7 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在JavaScript中使用fetch API进行HTTP GET和POST请求。首先，展示了如何通过fetch获取本地JSON文件，并解析响应数据。然后，详细解释了POST请求的配置，包括数据序列化、设置请求头和模式。示例代码演示了如何处理响应。最后，文章提到了服务器端使用Express接收并处理POST数据的方法。

摘要由CSDN通过智能技术生成

/*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('服务启动成功');
});