Fetch API 提供了一個 JavaScript 接口，用於訪問和操縱 HTTP 管道的一些具體部分，例如請求和響應。它還提供了一個全局 fetch() 方法，該方法提供了一種簡單，合理的方式來跨網絡異步獲取資源。
這種功能以前是使用 XMLHttpRequest 實現的。Fetch 提供了一個更理想的替代方案，可以很容易地被其他技術使用，例如 Service Workers (en-US)。Fetch 還提供了專門的邏輯空間來定義其他與 HTTP 相關的概念，例如 CORS 和 HTTP 的擴展。
請注意，fetch 規范與 jQuery.ajax() 主要有三種方式的不同：
- 當接收到一個代表錯誤的 HTTP 狀態碼時，從
fetch()返回的 Promise 不會被標記為 reject， 即使響應的 HTTP 狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的ok屬性設置為 false ），僅當網絡故障時或請求被阻止時，才會標記為 reject。 fetch()可以不會接受跨域 cookies；你也可以不能使用fetch()建立起跨域會話。其他網站的Set-Cookie頭部字段將會被無視。fetch不會發送 cookies。除非你使用了credentials 的初始化選項。
基本使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> async function readFile(){ const data = await fetch("./text.txt").then(e=>e.text()); console.log(data); } readFile() </script> </body> </html>
注意：
- fetch一般都是用在瀏覽器端的，少用在node端
- 服務器端使用，本地運行會報錯
此時我們看上面代碼，fetch返回的是一個promise對象，就可以通過.then來進行獲取操作，內部的e.text()指的獲取text文本
一共有幾種數據格式？
- arrayBuffer()
- blob()
- json()
- text()
- formData()
常用就是json()和text()
看一下使用json獲取
此時我們新建一個1.json文件，獲取a的值
<script>
async function readFile(){
const {a} = await fetch("./1.json").then(data=>data.json());
console.log(a);
}
readFile()
</script>
總結：fetch返回的是promise對象，一般是在瀏覽器端使用，發送請求，支持多種請求，有不同的方法獲取body返回值，大多數用的是text和json方法
fetch的優缺點
為什么要用fetch，原生的XMLHttpRequest是一個很笨重的實現，沒有整體的封裝性，配置和調用方式很混亂
我們看一下下面的代碼
<script>
var xhr = new XMLHttpRequest();
xhr.open("GET","http://www.baidu.com")
xhr.onload = function(){
console.log(xhr.response);
}
xhr.send()
</script>
fetch是JavaScript的語言封裝，是對XMLHttpRequest封裝，不是第三方庫的封裝，不同於jquery的ajax
fetch也有自己的規定，兼容性不好，大多數使用在瀏覽器端，如果想要在node中使用，只用原生的api是不支持，得引用第三方插件node-fetch
fetch和jquery的區別
- 當接收到一個代表錯誤的 HTTP 狀態碼時，從 fetch() 返回的 Promise 不會被標記為 reject， 即使響應的 HTTP 狀態碼是 404 或 500。相反，它會將 Promise 狀態標記為 resolve （但是會將 resolve 的返回值的 ok 屬性設置為 false ），僅當網絡故障時或請求被阻止時，才會標記為 reject。
- fetch() 可以接受跨域 cookies；也可以使用 fetch() 建立起跨域會話。
- fetch 不會發送 cookies。除非你使用了credentials 的初始化選項。
fetch的請求
fetch默認的請求是get請求，如果發送post請求，需要配置body信息
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <button>按我發送請求</button> <script src="./jquery.min.js"></script> <script> $("button").click(function(){ fetch("fetch_methods",{ // 請求方式 method: "post", // 請求頭部信息 headers:{ "content-type":'application/json' }, // 攜帶參數 body: "name=小明&age=12" }).then(data=>{data}) .catch(err=>{ console.log("錯誤信息",err); }) }) </script> </body> </html>
如果是post請求，此時需要第二個參數為對象，method表示請求方式，header是請求頭部信息，body是上行請求攜帶的參數