fetch的基本用法

fetch("/abc").then(data=>{// text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，用于获取和后台返回的数据return data.text();
}).then(ret=>{// 注意这里得到的才是最终的数据console.log(ret);
})

基本的 get 请求

第一种写法

后台路由

app.get("/books", (req, res) => {res.send("传统的URL传递参数！" + req.query.id);
})

fetch 请求

默认为 get 请求(第二个参数)，所以就不写了

fetch("http://127.0.0.1:3000/books?123").then(function(data){return data.text();
}).then(function(data){console.log(data);
});

第二种写法

后台路由

app.get("/books/:id", (req, res) => {res.send("Restful的URL传递参数！" + req.params.id);
})

fetch 请求

默认为 get 请求(第二个参数)，所以就不写了

fetch("http://127.0.0.1:3000/books/123").then(function(data){return data.text();
}).then(function(data){console.log(data);
});

delete 请求和 get 请求基本类似

基本的 post 请求

第一种用法

后台路由

app.post("books", (req, res) => {res.send("POST的URL传递参数！" + req.body.uname + "---" + req.body.pwd);
})

fetch 请求

fetch("http://127.0.0.1:3000/books", {method: "post",body: "uname=lisi&pwd=123",header: {"Content-Type": "application/x-www-form-urlencoded"}
}).then(function(data){return data.text();
}).then(function(data){console.log(data)
})

第二种用法

后台路由

app.post("books", (req, res) => {res.send("POST的URL传递参数！" + req.body.uname + "---" + req.body.pwd);
})

fetch 请求

fetch("http://127.0.0.1:3000/books", {method: "post",body: JSON.stringify({uname: "张三",pwd: "456"}),header: {"Content-Type": "application/json"}
}).then(function(data){return data.text();
}).then(function(data){console.log(data)
})

put 请求和 post 请求基本类似

fetch 响应结果

text(): 将返回体处理成字符串类型
json(): 返回结果和 JSON.parse(responseText) 一样

后台接口

app.get("/json", (req, res) => {res.json({uname: "lisi",age: 13,gender: "male"});
})

fetch 请求

第一种（推荐）

fetch("http://127.0.0.1:3000/books").then(function(data){return data.json();
}).then(function(data){console.log(data)
})

第二种

fetch("http://127.0.0.1:3000/books").then(function(data){return data.text();
}).then(function(data){var obj = JSON.parse(data);console.log(obj.uname, obj.age, obj.gender);
})

fetch的基本用法相关推荐

Fetch介绍及用法(配置)
接触到越来越多使用fetch的项目,在此记录fetch使用的学习过程. fetch初步介绍--what is Fetch? MDN上介绍 Fetch API 提供了一个获取资源的接口(包括跨域请求). ...
fetch整个仓库 github_git fetch 的简单用法:更新远程代码到本地仓库
方式一 1. 查看远程仓库 1 2 3 4 5 6 $ git remote -v eoecn https://github.com/eoecn/android-app.git (fetch) eoe ...
gitee 从拉取新分支到本地_git fetch 的简单用法:更新远程代码到本地仓库
Git中从远程的分支获取最新的版本到本地方式如下, 如何更新下载到代码到本地,请参阅ice的博客基于Github参与eoe的开源项目指南方式一 1. 查看远程仓库 1 2 3 4 5 6 $ git ...
Axios fetch的基本用法
fetch API通过promise接口来实现的. fetch( ' / abc' ) .then (data=>{ return data.text (); //return返回的是primo ...
c语言fetch函数的用法,fetch_add
fetch_add 描述 (Description) 它自动原子地将参数添加到存储在原子对象中的值,并获得先前保存的值. 声明 (Declaration) 以下是std :: atomic :: fe ...
fetch 基本用法（fetch 处理后端数据）
fetch 的基本用法 fetch 的基本用法 fetch 两级then的却别 fetch 的基本用法 await fetch(url, {method: 'POST', // 请求方式headers ...
fetch的用法ajax,Promise发送Ajax请求、fetch用法
实例方法: Document /* 基于Promise发送Ajax请求 */ function queryData(url) { var p = new Promise(function(resolv ...
Vue学习（三十五）——fetch的用法
文章目录一.fetch API 中的 HTTP 请求二.fetchAPI 中响应格式 Fetch API是新的ajax解决方案 Fetch会返回Promise fetch不是ajax的进一步封装 ...
前后端交互（Promise、fetch、axios、async/awit用法）
1.Promise概述 Promise是异步编程的一种解决方案,从语法上讲,Promise是一个对象,从它可以获取异步操作的消息. 1.2Promise的好处: 1.2.1. 可以避免多层异步调用嵌套 ...

fetch的基本用法

fetch的基本用法

基本的 get 请求

第一种写法

第二种写法

基本的 post 请求

第一种用法

第二种用法

fetch 响应结果

fetch的基本用法相关推荐

最新文章

热门文章