一挪拟、什么是Fetch 歧斟？
1.Fetch本質(zhì)上是一種標準，該標準定義了請求晌畅、響應(yīng)和綁定的流程但指。
2.Fetch標準還定義了Fetch () JavaScript API。
3.可用于前后端抗楔，數(shù)據(jù)交互棋凳。
4.fetch返回的是promise對象，比XMLHttpRequest的實現(xiàn)更簡潔谓谦，fetch 使用起來更簡潔 贫橙，完成工作所需的實際代碼量也更少
5.fetch 可自定義是否攜帶Cookie。
6.fetch不像axios需要安裝使用反粥，fetch可以直接使用卢肃。
二疲迂、如何使用Fetch
Fetch API 提供了一種全局fetch()方法，該方法位于 WorkerOrGlobalScope 這一個 mixin 中 方法用于發(fā)起獲取資源的請求莫湘。它返回一個 promise尤蒿，這個 promise 會在請求響應(yīng)后被 resolve，并傳回 Response 對象幅垮。
fetch(input?: Request | string, init?: RequestInit): Promise<Response>
fetch(url, options).then(function(response) {
// 處理 HTTP 響應(yīng)
}, function(error) {
// 處理網(wǎng)絡(luò)錯誤
})
fetch() 參數(shù)
fetch方法可以接收兩個參數(shù)input和options腰池。
- input 參數(shù)可以是字符串，包含要獲取資源的 URL忙芒。也可以是一個 Request 對象示弓。
- options 是一個可選參數(shù)。一個配置項對象呵萨，包括所有對請求的設(shè)置奏属。可選的參數(shù)有：
method: 請求使用的方法潮峦，如 GET囱皿、POST、DELETE忱嘹、PUT等嘱腥。
headers: 請求的頭信息，包含與請求關(guān)聯(lián)的Headers對象拘悦。
body: 請求的 body 信息齿兔。注意 GET 或 HEAD 方法的請求不能包含 body 信息
mode: 請求的模式，如 cors础米、 no-cors 或者 same-origin愧驱。
credentials: 請求的 credentials，如 omit椭盏、same-origin 或者 include。為了在當前域名內(nèi)自動發(fā)送 cookie 吻商， 必須提供這個選項掏颊。
三、常用的fetch請求
html
fetch('/index/fetchHtml')
.then(res => {
return res.text() // 定義返回格式艾帐。
}).then(res => {
document.body.innerHTML += res
})
.catch((err) => {
})
JSON
fetch('請求路徑')
.then((res) => {
return res.json()
})
.then(res => {
console.log(res)
})
.catch((err => {
}))
POST JSON
fetch('請求路徑',{
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '張麻子',
age: '26',
})
})
.then((res) => {
return res.json()
})
.then(res => {
console.log(res)
})
.catch((err => {
}))
4乌叶、fetch注意事項
1. 錯誤處理
fetch只有在網(wǎng)絡(luò)錯誤的情況，返回的promise會被reject柒爸。成功的 fetch() 檢查不僅要包括 promise 被 resolve准浴，還要包括 Response.ok 屬性為 true。HTTP 404 狀態(tài)并不被認為是網(wǎng)絡(luò)錯誤捎稚，所以Promise的狀態(tài)為resolve乐横。
2. credentials 設(shè)置
fetch可以通過credentials自己控制發(fā)送請求時是否帶上cookie求橄。credentials可設(shè)置為include、same-origin葡公、omit罐农。include為了讓瀏覽器發(fā)送包含憑據(jù)的請求（即使是跨域源）。如果你只想在請求URL與調(diào)用腳本位于同一起源處時發(fā)送憑據(jù)催什，請?zhí)砑觕redentials: 'same-origin'涵亏。要改為確保瀏覽器不在請求中包含憑據(jù)，請使用credentials: 'omit'蒲凶。
5.fetch簡單封裝
1.和src同級新建一個api（名字可以隨意起）的文件夾气筋，在文件夾里面新建一個request.js （名字可以隨意起）文件內(nèi)容如下：
export default async(url = '', data = {}, type = 'GET') => {
const baseUrl = "https://api.it120.cc/small4" // 基礎(chǔ)路徑
type = type.toUpperCase(); // 請求方式小寫轉(zhuǎn)換成大寫
url = baseUrl + url; // 請求地址的拼接
if (type == 'GET') {
let dataStr = ''; //數(shù)據(jù)拼接字符串
Object.keys(data).forEach(key => {
dataStr += key + '=' + data[key] + '&';
})
if (dataStr !== '') {
dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
url = url + '?' + dataStr;
}
}
let requestConfig = {
credentials: 'same-origin',
method: type,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
mode: "cors", // 用來決定是否允許跨域請求 值有 三個 same-origin，no-cors（默認）以及 cores;
cache: "force-cache" // 是否緩存請求資源 可選值有 default 旋圆、 no-store 宠默、 reload 、 no-cache 臂聋、 force-cache 或者 only-if-cached 光稼。
}
if (type == 'POST') {
Object.defineProperty(requestConfig, 'body', {
value: JSON.stringify(data)
})
}
try {
const response = await fetch(url, requestConfig);
const responseJson = await response.json();
return responseJson
} catch (error) {
throw new Error(error)
}
}
6.封裝接口
import api from '../request.js';
下面是簡寫的形式
// getXXX 自定義的接口名字
export const getXXX = (params) => api(`/apigb/v1/component`, params)
export const postXXX = (params) => api.post(`/apigb/v1/component/update-info`, params,'post')
