一、基本概念
Fetch 是一個現代的概念, 等同於 XMLHttpRequest。它提供了許多與XMLHttpRequest相同的功能，但被設計成更具可擴展性和高效性
二、創建Node服務器
1.添加node服務依賴
npm i express
2.在添加一個處理請求參數的依賴
npm i body-parser
3.創建服務器
const exprss = require('express') //npm i express
const app = exprss();
const bodyParser = require('body-parser')//npm i body-parser 處理請求參數
app.use(bodyParser.json())//設置可以處理json
app.use(bodyParser.urlencoded({ extended: false }))//設置可以處理表單
//處理跨域問題
app.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Methods', 'PUT,GET,POST,DELETE,OPTIONS,PATCH')
res.header('Access-Control-Allow-Headers', 'X-Requested-With');//以json格式傳參必須在Content-Type前面
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
})
app.get('/getName',(req,res)=>{
res.send(req.query.id+"---傳統?取值")
})
app.listen(9091)
啓動服務 node 之後指定你的服務器js文件
node .\fetch.js
4.啓動完成之後訪問： http://localhost:9091/getName?id=22 返回結果如下：
三、客戶端調用
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
fetch('http://localhost:9091/getName?id=11').then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
</script>
</body>
指定請求格式
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
fetch('http://localhost:9091/getName?id=11', {
method: 'get'
}).then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
</script>
</body>
請求返回值
四、其他操作
1、服務端
const exprss = require('express') //npm i express
const app = exprss();
const bodyParser = require('body-parser')//npm i body-parser 處理請求參數
app.use(bodyParser.json())//設置可以處理json
app.use(bodyParser.urlencoded({ extended: false }))//設置可以處理表單
//處理跨域問題
app.all('*', (req, res, next) => {
res.header('Access-Control-Allow-Origin', '*')
res.header('Access-Control-Allow-Methods', 'PUT,GET,POST,DELETE,OPTIONS,PATCH')
res.header('Access-Control-Allow-Headers', 'X-Requested-With');//以json格式傳參必須在Content-Type前面
res.header('Access-Control-Allow-Headers', 'Content-Type');
next();
})
//npm i nodemon -G 開啓熱部署模塊 代碼改動不需要重啓
// app.get('/getName',(req,res)=>{
// res.send("<p>無參數請求</p>")
// })
//?形式取值
app.get('/getName',(req,res)=>{
res.send(req.query.id+"---傳統?取值")
})
//Restful格式
app.get('/getName/:id',(req,res)=>{
res.send(req.params.id+"---Restful格式取值")
})
app.delete('/delete/:id',(req,res)=>{
res.send(req.params.id+"---delete方式")
})
app.post('/getUser',(req,res)=>{
res.send("--id--"+req.body.id+"--用戶名--"+req.body.name)
})
app.listen(9091)
2.客戶端
<body>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
// Restful格式請求
fetch('http://localhost:9091/getName/11', {
method: 'get'
}).then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
// delete模式請求
fetch('http://localhost:9091/delete/11', {
method: 'delete'
}).then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
// JSON表單模式請求
fetch('http://localhost:9091/getUser', {
method: 'post',
body: 'id=1&name=coderWang',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
// JSON格式模式請求
fetch('http://localhost:9091/getUser', {
method: 'post',
body: JSON.stringify({
id: 1,
name: 'coderWang'
}),
headers: {
'Content-Type': 'application/json'
}
}).then((data) => {
return data.text();
}).then((data) => {
console.log(data);
})
</script>
</body>