fetch API
fetch
- 一个获取资源的接口,类似于ajax
- 是基于
promise
之上设计,旧版本ie 完全不支持,须借助 来兼容 - 提供了对 request 和 response (以及其他与网络请求有关的)对象的通用定义
- 发送请求或者获取资源,需要使用 window.fetch or windoworworkerglobalscope.fetch 方法。
参数
资源路径(url string)
- 他必须接收一个需要请求的资源路径,返回一个
promise
对象,请求成功的数据返回到responese回调中,请求失败的信息返回到 request中。 - 当接收到一个代表错误的 http状态码时,
fetch
返回的promise
不会被标记为reject
而会被标记为resolve
,比如状态码为 404,500.只有网络故障或请求被阻止时才被标记为reject
fetch('https://api.apiopen.top/musicdetails1') .then(function(response) { return response.json(); }) .then(function(myjson) { console.log(myjson); //{code: 400, message: "404 not found", result: "https://api.apiopen.top/musicdetails1"} })
-
fetch
默认是不会从服务端发送接收或发送任何cookie
,如果需要则必须设置 credentials,自 2017/8 起默认的credentials政策变更为same-originfirefox也在61.0b13中改变默认值
[, config]
- 配置项对象,包括所有对请求的设置
method
: 请求使用的方法,如 get、post。headers
: 请求的头信息,形式为 headers 的对象或包含 bytestring值的对象字面量。body
:
请求的body
信息:
可能是:
blob( 表示一个不可变、原始数据的类文件对象)、buffersource
( 用于表示自身为arraybuffer或者typedarray提供对象的对象arraybufferview。)、
formdata(表示表单数据的键值对的构造方式,经过它的数据可以使用xmlhttprequest.send()
方法送出,本接口和此方法都相当简单直接。如果送出时的编码类型被设为 "multipart/form-data",它会使用和表单一样的格式。)、
urlsearchparams (接口定义了一些实用的方法来处理 url 的查询字符串)
或者usvstring
对象。mode
: 请求的模式,如cors、 no-cors
或者same-origin
。credentials
: 请求的credentials
,如omit、same-origin
或者include
。为了在当前域名内自动发送 cookie , 必须提供这个选项, 从 chrome 50 开始, 这个属性也可以接受 federatedcredential 实例或是一个 passwordcredential 实例。
5.1 如果需要跨域请求需设置为 "include"
5.2 如果只在同域内发送cookie 则设置为 "same-origin"
5.3 如果任何情况都不发送cookie 则设置为 "omit"cache
: 请求的cache
模式:default 、 no-store 、 reload 、 no-cache 、 force-cache
或者only-if-cached
。redirect
: 可用的redirect
模式:follow
(自动重定向),error
(如果产生重定向将自动终止并且抛出一个错误), 或者manual
(手动处理重定向). 在chrome中,chrome 47之前的默认值是follow
,从 chrome 47开始是manual
。referrer
: 一个usvstring 可以是no-referrer、client
或一个url
。默认是client
。referrerpolicy
:指定引用http头的值。可能是一个no-referrer、 no-referrer-when-downgrade、 origin、 origin-when-cross-origin、 unsafe-url 。
integrity
: 包括请求的 subresource integrity值 例如: sha256-bpfbw7ivv8q2jlit13fxdyae2tjllusrsz273h2nfse=)。
const fetch = function (url,config){ if(typeof(config) !== 'object' || config === null) return throw `config needs to pass an object type` let data = config || {} ; let {method = 'get', param = null, mode = "cors", cache = "no-cache",headers = {'access-control-allow-origin': '*', 'content-type': 'application/json'}, redirect = "follow", credentials = "include", referrer = "no-referrer"} = data; /* // 传输 json 数据 需将 param 转换 json.stringify(param) //上传文件 需传输 formdata 格式 let formdata = new formdata() let filefield = document.queryselector("#myfile") formdata.append('title',"my file") formdata.append('filefield ',filefield .files[0]) */ return fetch(url,{ method:method.touppercase(), body:param, mode, cache, headers, redirect, credentials, }).then(res =>{ if(res.ok) return res.json() throw new error("network response fail:"+res.status) } ).catch(err=>console.error(err)) } fetch('https://api.apiopen.top/musicdetails1',{credentials:'omit'}).then(res =>console.log(res)).catch(err=>console.error(err))
headers constructor
- 创建一个 headers 对象
一个 headers 对象是一个简单的多名值对:
let content = "hello world"; let myheaders = new headers(); myheaders.append("content-type", "text/plain"); myheaders.append("content-length", content.length.tostring()); myheaders.append("x-custom-header", "processthisimmediately");
可以传一个多维数组或者对象字面量:
let content = "hello world"; let myheaders = new headers({ "content-type": "text/plain", "content-length": content.length.tostring(), "x-custom-header": "processthisimmediately", }); //获取和设置 console.log(myheaders.has("content-type")); // true console.log(myheaders.has("set-cookie")); // false myheaders.set("content-type", "text/html"); myheaders.append("x-custom-header", "anothervalue"); console.log(myheaders.get("content-length")); // 11 console.log(myheaders.getall("x-custom-header")); // ["processthisimmediately", "anothervalue"] myheaders.delete("x-custom-header"); console.log(myheaders.getall("x-custom-header")); // [ ]
如果使用了一个不合法的http header属性名,那么headers的方法通常都抛出 typeerror 异常。如果不小心写入了一个不可写的属性,也会抛出一个 typeerror 异常。除此以外的情况,失败了并不抛出异常。
检查 content type 是否正确
fetch(myrequest).then(function(response) { if(response.headers.get("content-type") === "application/json") { return response.json().then(function(json) { // process your json further }); } else { console.log("oops, we haven't got json!"); } });
response 对象
-
fetch
返回的对象
对象中常用的属性
- status: 响应状态码 如 200 404 等
- statustext:返回和状态码对应信息
- ok 检查状态码是否 在 200-299之间,返回true or false
检查环境支持度
if(this.fetch) { // run my fetch request here } else { // do something with xmlhttprequest? }
兼容性
推荐阅读
-
基于Maya API和PySide2的插件开发(用TextBrowser实现文件信息的显示)
-
OpenCV_Python API 官方文档学习_ cv2 图像几何变换
-
OpenCV_Python API 官方文档学习_ cv2 绘制基本几何图形
-
php读取百度天气API Json数据
-
Web API---课程介绍 + JavaScript分三个部分
-
豆瓣的账号登录及api操作
-
关于dingo/api 响应的全局设置
-
PHP Google的translate API代码_PHP教程
-
fabric Report API
-
深入mysql_fetch_row()与mysql_fetch_array()的区别详解