fetch是web提供的一个可以获取异步资源的api,目前还没有被所有浏览器支持,它提供的api返回的是Promise对象,所以你在了解这个api前首先得了解Promise的用法。参考阮老师的文章
那我们首先讲讲在没有fetch的时候,我们是如何获取异步资源的:
//发送一个get请求是这样的:
//首先实例化一个XMLHttpRequest对象
var httpRequest = new XMLHttpRequest();
//注册httpRequest.readyState改变时会回调的函数,httpRequest.
//readyState共有5个可能的值,
//0 UNSENT (未打开) open()方法还未被调用;
//1 OPENED (未发送) send()方法还未被调用;
//2 HEADERS_RECEIVED (已获取响应头) send()方法已经被调用, 响应头和响应状态已经返回;
//3 LOADING (正在下载响应体) 响应体下载中; responseText中已经获取了部分数据;
//4 DONE (请求完成) 整个请求过程已经完毕.
httpRequest.onreadystatechange = function(){
//该回调函数会被依次调用4次
console.log(httpRequest.readyState);
if(httpRequest.readyState===4){
//请求已完成
if(httpRequest.status===200){
//http状态为200
console.log(httpRequest.response);
var data = JSON.parse(httpRequest.response);
console.log(data);
}
}
}
//请求的网址
var url = "http://127.0.0.1:7777/list";
//该方法为初始化请求,第一个参数是请求的方法,比如GET,POST,PUT,第二个参数是请求的url
httpRequest.open('GET',url,true);
//设置http请求头
httpRequest.setRequestHeader("Content-Type","application/json");
//发出请求,参数为要发送的body体,如果是GET方法的话,一般无需发送body,设为空就可以
httpRequest.send(null);
关于XMLHttpRequest的更多用法请参照:https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest#open()
如果用了fetch之后,发送一个get请求是这样的:
//请求的网址
var url = "http://127.0.0.1:7777/list";
//发起get请求
var promise = fetch(url).then(function(response) {
//response.status表示响应的http状态码
if(response.status === 200){
//json是返回的response提供的一个方法,会把返回的json字符串反序列化成对象,也被包装成一个Promise了
return response.json();
}else{
return {}
}
});
promise = promise.then(function(data){
//响应的内容
console.log(data);
}).catch(function(err){
console.log(err);
})
接下来介绍下fetch的语法:
/**
参数:
input:定义要获取的资源。可能的值是:一个URL或者一个Request对象。
init:可选,是一个对象,参数有:
method: 请求使用的方法,如 GET、POST。
headers: 请求的头信息,形式为 Headers 对象或 ByteString。
body: 请求的 body 信息:可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式,如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源,但是首先有个前提条件,就是请求的 method 只能是HEAD、GET 或 POST。此外,如果 ServiceWorkers 拦截了这些请求,它不能随意添加或者修改除这些之外 Header 属性。第三,JS 不能访问 Response 对象中的任何属性,这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求,将返回一个 error,这样确保所有的请求遵守同源策略。
credentials: 请求的 credentials,如 omit、same-origin 或者 include。
cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.
返回值:一个 Promise,resolve 时回传 Response 对象。
*/
fetch(input, init).then(function(response) { });
一个发送post请求的示例:
fetch("http://127.0.0.1:7777/postContent", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
mode: "cors",
body: JSON.stringify({
content: "留言内容"
})
}).then(function(res) {
if (res.status === 200) {
return res.json()
} else {
return Promise.reject(res.json())
}
}).then(function(data) {
console.log(data);
}).catch(function(err) {
console.log(err);
});
如果考虑低版本浏览器的问题的话,引入https://github.com/github/fetch/blob/master/fetch.js 即可兼容。
一 序言
在 传统Ajax 时代,进行 API 等网络请求都是通过XMLHttpRequest或者封装后的框架进行网络请求,然而配置和调用方式非常混乱,对于刚入门的新手并不友好。今天我们介绍的Fetch提供了一个更好的替代方法,它不仅提供了一种简单,合乎逻辑的方式来跨网络异步获取资源,而且可以很容易地被其他技术使用,例如 Service Workers。
二 与Ajax对比
使用Ajax请求一个 JSON 数据一般是这样:
var xhr = new XMLHttpRequest();
xhr.open('GET', url/file,true);
xhr.onreadystatechange = function() {
if(xhr.readyState==4){
if(xhr.status==200){
var data=xhr.responseText;
console.log(data);
}
};
xhr.onerror = function() {
console.log("Oh, error");
};
xhr.send();
复制代码
同样我们使用fetch请求JSON数据:
fetch(url).then(response => response.json())//解析为可读数据
.then(data => console.log(data))//执行结果是 resolve就调用then方法
.catch(err => console.log("Oh, error", err))//执行结果是 reject就调用catch方法
复制代码
从两者对比来看,fetch代码精简许多,业务逻辑更清晰明了,使得代码易于维护,可读性更高。 总而言之,Fetch 优点主要有:
1. 语法简洁,更加语义化,业务逻辑更清晰
2. 基于标准 Promise 实现,支持 async/await
3. 同构方便,使用isomorphic-fetch
三 Promise简介
由于 Fetch API 是基于 Promise 设计,接下来我们简单介绍下Promise工作流程,方便大家更好理解Fetch。
fetch方法返回一个Promise对象, 根据 Promise Api 的特性, fetch可以方便地使用then方法将各个处理逻辑串起来, 使用 Promise.resolve() 或 Promise.reject() 方法将分别返会肯定结果的Promise或否定结果的Promise, 从而调用下一个then 或者 catch。一旦then中的语句出现错误, 也将跳到catch中。
四 请求常见数据格式
接下来将介绍如何使用fetch请求本地文本数据,请求本地JSON数据以及请求网络接口。其实操作相比与Ajax,简单很多!
//HTML部分
<div class="container">
<h1>Fetch Api sandbox</h1>
<button id="button1">请求本地文本数据</button>
<button id="button2">请求本地json数据</button>
<button id="button3">请求网络接口</button>
<br><br>
<div id="output"></div>
</div>
<script src="app.js"></script>
复制代码
1.fetch请求本地文本数据
本地有一个test.txt文档,通过以下代码就可以获取其中的数据,并且显示在页面上。
document.getElementById('button1').addEventListener('click',getText);
function getText(){
fetch("test.txt")
.then((res) => res.text())//注意:此处是res.text()
.then(data => {
console.log(data);
document.getElementById('output').innerHTML = data;
})
.catch(err => console.log(err));
}
复制代码
2.fetch请求本地JSON数据
本地有个posts.json数据,与请求本地文本不同的是,得到数据后还要用forEach遍历,最后呈现在页面上。
document.getElementById('button2').addEventListener('click',getJson);
function getJson(){
fetch("posts.json")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((post) => {
output += `<li>${post.title}</li>`;
})
document.getElementById('output').innerHTML = output;
})
.catch(err => console.log(err));
}
复制代码
3.fetch请求网络接口
获取https://api.github.com/users中的数据,做法与获取本地JSON的方法类似,得到数据后,同样要经过处理
document.getElementById('button3').addEventListener('click',getExternal);
function getExternal(){
// https://api.github.com/users
fetch("https://api.github.com/users")
.then((res) => res.json())
.then(data => {
console.log(data);
let output = '';
data.forEach((user) => {
output += `<li>${user.login}</li>`;
})
document.getElementById('output').innerHTML = output;
})
.catch(err => console.log(err));
}