fetch方法get请求(fetch的基本用法、请求参数及响应结果)
导读:前言 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版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!