目录
- 前言
- 一、fetch
- 1、基本特性
- 2、语法
- 3、基本用法
- 二、fetch请求参数
- 1、常用的配置项
- 2、get请求传参
- 3、post请求传参
- 三、fetch响应结果
- 响应数据格式
前言
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); });