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请求参数

发送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：

结果：

发送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})
})

结果：

接口调用Fetch方法以及fetch请求参数相关推荐

国际短信平台接口调用的方法步骤，简单5步快速教程
如果您需要使用国际短信平台来满足您的业务需求,那么您需要了解短信平台接口调用的方法步骤. 接口调用是指您的应用程序通过网络接口与短信平台进行通信,从而实现向全世界发送短信的功能. 下面是国际短信平台接 ...
每日一句api Android,金山每日一句 API 接口调用接入方法
原标题:金山每日一句 API 接口调用接入方法金山每日一句 API 大家都听说过吧,金山每日一句 API 每次刷新网页都会带来一个新的语句,现在盒子部落公布金山每日一句 API 接口,可以直接在自己 ...
python excel token_python+excel接口自动化获取token并作为请求参数进行传参操作
1.登录接口登录后返回对应token封装: import json import requests from util.operation_json import OperationJson from ...
标签中的onclick调用js方法传递多个参数的解决方案
标签中的onclick调用js方法传递多个参数的解决方案参考文章: (1)标签中的onclick调用js方法传递多个参数的解决方案 (2)https://www.cnblogs.com/twohea ...
SpringMVC@RequestMapping请求方法限定与请求参数限定
SpringMVC@RequestMapping请求方法限定与请求参数限定一.请求方法限定除了可以对url进行设置,还可以限定请求进来的方法限定GET方法 @RequestMapping(met ...
@Aspect aop切面获取请求接口类名、方法名、及参数
1.自定义一个注解,通过将自定义的注解添加到对应的方法上,可实现对该方法进行增强操作 package com.basis.aspect;import java.lang.annotation.Elem ...
Vue接口调用（一）fetch用法
Vue接口调用
实战HttpClient 接口调用以及获取token 设置请求头
简介: HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 JDK 的 java.net 包中已 ...
ashx 接口调用_使用ajax去请求调用ashx的接口
首先要明白这个是前台去请求后台的接口,把前台的参数传给后台,然后后台给前台一个或多个返回结果. 1.后台的代码如下: /// /// GetInfomationDetail 的摘要说明 /// pub ...

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