fetch學習總結

自我學習記錄（一直會更新?）未完待續。。。。

先來回答一個問題：除了Ajax獲取後臺資料之外，還有沒有其他的替代方案？    
答：fetch
複製程式碼

request

fetch(input, init) // 這個方法接受兩個引數： 
複製程式碼

引數	說明
input	定義要獲取的資源。包含要獲取資源的 url
init	這個引數是可選的，它傳入一個配置項物件，可以用它來包括所對請求進行設定

配置如下：

method: 請求使用的方法，如 GET、POST。
headers: 請求的頭資訊，形式為 Headers 物件或 ByteString。

引數	說明（指定提交方式）
'Content-Type': 'application/json'
'Content-Type': 'application/x-www-form-urlencoded'	指定提交方式是表單提交

body: 請求的 body 資訊，可能是一個 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 物件。（如果是 GET 或 HEAD 方法，則不能包含 body 資訊）
mode: 請求的模式，主要用於跨域設定，如 cors、 no-cors 或者 same-origin。

引數	說明
cors	跨域
no-cors	不跨域
same-origin	同源

credentials: 需要向伺服器傳送cookie時設定，如 omit、same-origin 或者 include。

引數	說明
omit`預設`	忽略的意思，也就是不帶cookie
same-origin	意思就是`同源請求`帶cookie
`include`	表示`無論跨域還是同源`請求都會帶cookie

cache: 請求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached。

如果遇到不會的，可以參考vuemao-csr上的fetch

// fetch post
fetch('url', {
    method: 'POST',
    headers: {
       'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式為表單提交
    },
    credentials: 'include', // 請求都帶cookie
    body: querystring.stringify(param)
  }).then((res)=>{
    return res.text()
  }).then((res)=>{
    console.log(res)
  })
複製程式碼

// fetch get
fetch('url', {
    credentials: 'include', // 請求都帶cookie 
}).then((res) => {
    return res.json()
}).then((res) => {
    console.log(res)
})
複製程式碼

參考，個人很喜歡

fetch學習總結

request

相關文章