前言
- fetch 是 window.fetch 的 JavaScript polyfill。全局 fetch 函数是 web 请求和处理响应的简单方式,不使用 XMLHttpRequest。这个 polyfill 编写的接近标准的 Fetch 规范。也就是说现在可以不使用ajax了,除非是兼容很低得浏览器。
- 该fetch()函数是一个基于Promise的机制,用于在浏览器中编程地制作Web请求。该项目是一个实现标准Fetch规范子集的polyfill,足以fetch在传统Web应用程序中为XMLHttpRequest的大多数用途提供可行的替代方案。
- 如果你得旧浏览器就得引入 polyfill ,然后在使用这个库。
网址
官方网站: http://github.github.io/fetch/
GitHub:https://github.com/github/fetch
cdn http://www.bootcdn.cn/fetch/
fetch 见解
这里就不做太多得讲解,fetch详解开启传送门
手册地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API
使用
引入脚本
直接在页面中引入脚本,本人建议在body结束标签前面引入,这样是最优化得。
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
使用 npm 安装
// 输入
npm install whatwg-fetch --save
// 或者输入下面
bower install fetch
// 或者输入下面
yarn add whatwg-fetch
webpack 使用
为了与webpack一起使用,请entry在应用程序入口点之前将该程序包添加到配置选项中:
entry: ['whatwg-fetch', ...]
对于Babel和ES2015 +,请确保导入文件:
import 'whatwg-fetch'
注意事项
该fetch规范从不同jQuery.ajax()的方式主要有两种即承担牢记:
即使响应是HTTP 404或500,返回的Promise fetch() 也不会拒绝HTTP错误状态。相反,它将正常解析,并且它只会拒绝网络故障或阻止请求完成。
默认情况下,如果站点依赖维护用户会话,fetch 则不会发送或接收来自服务器的任何cookie,导致未经身份验证的请求。请参阅发送cookie以了解如何选择cookie处理。
fetch 方法
语法:
/*
* fetch方法:
* 参数一:URL是请求地址
* 参数二:options是多个参数配置
*/
fetch(url, options).then(function(response) {
// 成功代码,返回response 结果数据
}, function(error) {
// 请求错误返回,error是返回错误得类型
})
更多配置项
根据第二个参数,是更多得配置项,可以做可选参数,但是有些请求还是得配置下得。
参数二options配置 | 说明 |
---|---|
method | (字符串) HTTP请求方法。默认:”GET” |
body | (字符串,正文类型)HTTP请求正文 |
headers | (对象,标题)默认值:{} |
credentials | (字符串)身份验证凭据模式。默认:”omit”。“omit”:请求中不包含认证凭证(例如cookie)。“same-origin”:将请求中的凭证包含在同一个网站中。“include”: 在所有网站的请求中包含凭据 |
成功响应
这个是在fetch方法请求成功返回得.then()方法中回调函数参数。
.then()回调函数返回参数 | 参数说明 |
---|---|
status | (数字) - 100-599范围内的HTTP响应代码 |
statusText | (字符串) - 服务器报告的状态文本,例如“未经授权” |
ok(boolean) | 如果status是HTTP 2xx,则返回true |
headers | 在下面有相应得方法,返回头部信息得一些,可以通过一些方法及属性操作。 |
url | (串)返回请求得链接。 |
text() | 以String形式产生响应文本。 |
json() | 产生的结果是一个对象, JSON.parse(responseText) |
blob() | 产生一个Blob 。本地临时存储路径。 |
arrayBuffer() | 产生一个ArrayBuffer,二进制处理 |
formData() | 产生可以转发到另一个请求的FormData |
clone() | |
Response.error() | |
Response.redirect() |
headers 参数详情
在上面.then()方法成功返回headers对象。语法: new Headers(hash)
实例化得返回得对象 | 方法及属性说明 |
---|---|
has(name) | (布尔值) 查找,下面所说得key是否存在,如果存在则,进入。 |
get(name) | (串)获取自定义或默认有的请求头信息。可以跟下面得说得一样,写上key值,就可以获取值。 |
set(name, value) | 设置请求头信息,set(key,值)。跟cookie格式。 |
append(name, value) | 添加进去 |
delete(name) | 删除那个key值即可 |
forEach(function(value, name){ … }, [thisContext]) | 遍历里面得数据。 |
案例
- 开启本地服务器才能跑!
- 开启本地服务器才能跑!
- 开启本地服务器才能跑!
- 重要得事情说三遍!
获取html文件
// 这里由于不懂跨域请求到html文件。所以这里直接复制一段官方得吧,自己可以测试。
fetch('/users.html')
.then(function(response) {
return response.text()
}).then(function(body) {
document.body.innerHTML = body
})
JSON
写法一和写法二其实是一样得。只不过写法二是当错误得时候回调都是同一个函数。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box {
width: 120px;
height: 120px;
position: relative;
top: 0;
}
#box img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif">
</div>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
<script type="text/javascript">
// 写法一
fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(Response) {
console.log('请求成功,并且返回对象:',Response);
// 处理json得方法
Response.json().then(function (data){
console.log(data)
}).catch(function(err) {
console.log('err', ex)
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
// 写法二(推荐):
fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
// 使用return 将数据返回对象。
return response.json();
}).then(function (data) {
console.log('返回json数据',data);
}).catch(function(ex) {
console.log('parsing failed', ex)
})
/*
拆分写法二:
var jsonObj = fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
// 使用return 将数据返回对象。
return response.json();
})
jsonObj.then(function (data) {
console.log('返回json数据',data);
})
*/
</script>
</body>
</html>
响应属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box {
width: 120px;
height: 120px;
position: relative;
top: 0;
}
#box img {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div id="box">
<img src="http://img.lanrentuku.com/img/allimg/1212/5-121204193R5-50.gif">
</div>
<script src="https://cdn.bootcss.com/fetch/2.0.3/fetch.js"></script>
<script type="text/javascript">
fetch("http://m.lolku.cn/lib/api/city_thoughtful.php?format=json").then(function(response) {
console.log('headers的类型:'+response.headers.get('Content-Type'));
console.log('请求时间:'+response.headers.get('Date'));
console.log('请求状态:'+response.status);
console.log('请求状态返回字符串:'+response.statusText);
response.json().then(function (data) {
box.innerHTML = JSON.stringify(data.result);
console.log(data);
})
}).catch(function(err){
console.log("Fetch错误:"+err);
})
</script>
</body>
</html>
过段时间更新……