接口调用Fetch方法以及fetch请求参数

fetch概述

在这里插入图片描述
在这里插入图片描述
看一个基本的例子:
服务端代码:

app.get('/fdata',(req,res)=>{
    setTimeout(function(){
        res.send('this is content retrived by fetch method')
    },3000)
})

测试:

<script>
        fetch('http://127.0.0.1:9999/fdata').then((data) => {
            return data.text() // data.text()返回的是一个promise对象
        }).then((result) => { // 调用then这里获取的才是真正的数据
            console.log(result)
        })
    </script>

等了几秒以后控制台输出:
在这里插入图片描述

fetch请求参数

在这里插入图片描述

fetch之get请求参数

在这里插入图片描述
我们再看下面的代码:

// 服务端
app.get('/books',(req,res)=>{
    setTimeout(function(){
        console.log(req.query)
        res.send('传统参数传递:' + JSON.stringify(req.query))
    },3000)
})
// 这里我们用旧的方式传入参数,method:'get'写不写无所谓,默认就是get
fetch('http://127.0.0.1:9999/books?id=123',{
            method:'get'
        }).then((data) => {
            return data.text()
        }).then((result) => {
            console.log(result)
        })

结果:
在这里插入图片描述在这里插入图片描述
在这里插入图片描述

我们现在换restful风格的url:
在这里插入图片描述
那么在服务端我们也要修改一下路由:
在这里插入图片描述
这里要用:id来接收传来的数据,express需要用req.params来获得查询数据

结果:
在这里插入图片描述在这里插入图片描述

这里有个细节注意一下:
在这里插入图片描述
这里的参数999传过去的时候,在服务端:
在这里插入图片描述
路由接收传来的参数的变量名是可以自定义的,不一定非要是id,保持统一就可以了

fetch之delete请求参数

在这里插入图片描述

// 服务端
app.delete('/books/:id',(req,res)=>{
    setTimeout(function(){
        res.send('Delete请求参数传递:' + req.params.id)
    },3000)
})

fetch('http://127.0.0.1:9999/books/666',{
            method:'delete'
        }).then((data) => {
            return data.text()
        }).then((result) => {
            console.log(result)
        })

结果:
在这里插入图片描述

fetch之post请求参数

  1. 发送x-www-form-urlencoded类型的数据
    在这里插入图片描述
    上代码:
// 服务端
const bodyParser = require('body-parser')
// 配置body-parser
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

app.post('/books', (req, res) => {
	// body就是body-parser处理的
    console.log(req.body)
    res.send('Post请求参数传递:' + req.body.uname + '---' + req.body.pw)
})
fetch('http://127.0.0.1:9999/books/',{
            method:'post',
            body:'uname=dean&pw=123456',
            headers:{
                'Content-Type':'application/x-www-form-urlencoded'
            }
        }).then((data) => {
            return data.text()
        }).then((result) => {
            console.log(result)
        })

发post请求主要就下面这些变化:method,请求体body,头部headers:
在这里插入图片描述
结果:
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

  1. 发送json类型的数据
// 服务端
app.post('/books', (req, res) => {
    console.log(req.body)
    res.send('Post请求参数传递:' + req.body.uname + '---' + req.body.age)
})

js代码需要这样修改:
在这里插入图片描述
结果:
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

fetch之put请求参数

app.put('/books/:id', (req, res) => {
    console.log('req.body:',req.body)
    console.log('req.params:',req.params)
    console.log('请求id:',req.params.id)
    res.send('Put请求参数传递:' + req.body.bname + '---' + req.body.bprice)
})

注意这里::id需要用req.params.id取值在这里插入图片描述
在这里插入图片描述
结果:
在这里插入图片描述在这里插入图片描述

在这里插入图片描述

fetch响应结果

在这里插入图片描述
我们看看如何用fetch的json API返回数据:

// 服务端
app.get('/books/json', (req, res) => {
	// 调用express的json方法
    res.json({
        bname:'ES6',
        bprice:79
    })
})

在这里插入图片描述
结果:
在这里插入图片描述

  • 9
    点赞
  • 30
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值