fetch的基本用法、请求参数及响应结果(fetchall的用法)

编辑：rootadmin

fetch的基本用法、请求参数及响应结果目录前言一、fetch1、基本特性2、语法3、基本用法二、fetch请求参数1、常用的配置项2、get请求传参3、post请求传参三、fetch响应结果响应数据格式前言

推荐整理分享fetch的基本用法、请求参数及响应结果(fetchall的用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:fetch详解,fetch it,fetch用法及搭配,fetch的用法总结,fetch的用法及短语,fetch的用法及短语,fetch的用法总结,fetch用法及搭配,内容如对您有帮助，希望把文章链接给更多的朋友！

fetch是基于Promise来实现的，Promise用法：Promise用法及基于Promise处理ajax请求

一、fetch1、基本特性 fetch的基本用法、请求参数及响应结果(fetchall的用法)

更加简单的数据获取方式，功能更强大，更灵活，可以看作是xhr的升级版

官方：https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

xhr相关知识点：

2、语法fetch(url).then(fn2) .then(fn3) ... .catch(fn)3、基本用法

text()方法属于fetchAPI的一部分，它返回一个Promise实例对象，需要return 用途：用于获取后台返回的数据

fetch('/abc').then(data =>{return data.text(); // text()返回的是一个Promise对象}).then(ret =>{//这里得到的才是最终的数据console.log(ret)});二、fetch请求参数1、常用的配置项配置项类型说明methodStringHTTP请求方法，默认为get（get、post、put、delete）bodyStringHTTP请求参数headersObjectHTTP请求头，默认为{}2、get请求传参

put类似

fetch('/abc?id=123',{method:'get'}).then(data=>{ return data.text()}).then(ret=>{ // 这里得到的才是真正的数据 console.log(ret); })3、post请求传参

delete类似必须写请求头

fetch("/abc", { method: "POST", body: "uname=list&pwd=123", headers:{ 'Content-Type','application/x-www-form-urlencoded'; }}) .then((data) => { return data.text(); }) .then((ret) => { // 这里得到的才是真正的数据 console.log(ret); });三、fetch响应结果响应数据格式名称说明text()将返回体处理成字符串类型json()返回结果和JSON.parse(responseText)一样fetch("/abc/json") .then((data) => { // return data.text(); return data.json() }) .then((ret) => { // 这里得到的才是真正的数据 console.log(ret); });

本文链接地址:https://www.jiuchutong.com/zhishi/287059.html 转载请保留说明！

上一篇：图像分割之U-Net、U2-Net及其Pytorch代码构建(图像分割 unet)

下一篇：vue-router控制台异常：Uncaught (in promise) Error: Redirected when going from “/“ to “/foo“(vue router)