首页IT科技fetch方法get请求(fetch的基本用法、请求参数及响应结果)

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

时间2025-06-21 06:33:14分类IT科技浏览5431
导读:前言 fetch是基于Promise来实现的,Promise用法:Promise用法及基于Promise处理ajax请求...

前言

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

一              、fetch

1                    、基本特性

更加简单的数据获取方式                     ,功能更强大       ,更灵活      ,可以看作是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       、常用的配置项

配置项 类型 说明 method String HTTP请求方法      ,默认为get(get       、post                    、put             、delete) body String HTTP请求参数 headers Object HTTP请求头                    ,默认为{}

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); });
声明:本站所有文章              ,如无特殊说明或标注,均为本站原创发布              。任何个人或组织                    ,在未征得本站同意时                     ,禁止复制、盗用                     、采集                    、发布本站内容到任何网站、书籍等各类媒体平台                    。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理       。

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
java运行多个类(记一次多个Java Agent同时使用的类增强冲突问题及分析)