8 Vue學習 fetch請求

1：import  from '@/api/getdata'(從api/getdata.js中import login函式。)
看一下如下的getdata.js檔案，其中export了login函式，所以其他地方可以呼叫。

import fetch from '@/config/fetch'
export const login = data => fetch('/admin/login', data, 'post');

繼續看fetch.js函式：

import  from './env'export 
default async(url = '', data = {}, type = 'get', method = 'fetch') =>)
if (datastr !== '') 
}if (window.fetch && method == 'fetch') 
if (type == 'post') )
}try 
catch
(error) 
} else
else
let senddata = '';
if (type == 'post') 
requestobj.open(type, url, 
true
); requestobj.send(senddata);
requestobj.onreadystatechange = () =>
resolve(obj)
} else}}
})}
}

fetch:傳統 ajax 指的是 xmlhttprequest（xhr），現在已被 fetch替代; fetch api 是基於 promise 設計，有必要先學習一下 promise

xmlhttprequest:是乙個 api，它為客戶端提供了在客戶端和伺服器之間傳輸資料的功能。它提供了乙個通過 url 來獲取資料的簡單方式，並且不會使整個頁面重新整理。這使得網頁只更新一部分頁面而不會打擾到使用者。xmlhttprequest在 ajax 中被大量使用;可以取回所有型別的資料資源，並不侷限於 xml。而且除了 http

，它還支援file和ftp協議。

activexobject: 與xmlhttprequest差異很小，這兩者是在不同瀏覽器上使用的。

ie裡面：

mozilla和safari裡面：

xmlhttprequest 是乙個設計粗糙的 api，不符合關注分離（separation of concerns）的原則，配置和呼叫方式非常混亂，而且基於事件的非同步模型寫起來也沒有現代的 promise，generator/yield，async/await 友好。

fetch 的出現就是為了解決 xhr 的問題，拿例子說明：

使用 xhr 傳送乙個 json 請求一般是這樣：

使用 fetch 後，頓時看起來好一點

fetch(url).then(function
(response) ).then(
function
(data) ).
catch(function
(e) );

使用 es6 的箭頭函式後：

fetch(url).then(response =>response.json())
.then(data =>console.log(data))
.catch(e => console.log("oops, error", e))

現在看起來好很多了，但這種 promise 的寫法還是有 callback 的影子，而且 promise 使用 catch 方法來進行錯誤處理的方式有點奇怪。不用急，下面使用 async/await 來做最終優化：

注：async/await 是非常新的 api，屬於 es7，目前尚在 stage 1(提議) 階段，這是它的完整規範。使用 babel 開啟 runtime 模式後可以把 async/await **編譯成 es5 **。也可以直接使用 regenerator 來編譯到 es5。

try

catch

(e)

//注：這段**如果想執行，外面需要包乙個 async function

duang~~ 的一聲，使用await後，寫非同步**就像寫同步**一樣爽。await後面可以跟 promise 物件，表示等待 promiseresolve()才會繼續向下執行，如果 promise 被reject()或丟擲異常則會被外面的try...catch捕獲。

promise，generator/yield，await/async 都是現在和未來 js 解決非同步的標準做法，可以完美搭配使用。這也是使用標準 promise 一大好處。最近也把專案中使用第三方 promise 庫的**全部轉成標準 promise，為以後全面使用 async/await 做準備。

另外，fetch 也很適合做現在流行的同構應用，有人基於 fetch 的語法，在 node 端基於 http 庫實現了 node-fetch，又有人封裝了用於同構應用的 isomorphic-fetch。

注：同構(isomorphic/universal)就是使前後端執行同一套**的意思，後端一般是指 nodejs 環境。

總結一下，fetch 優點主要有：

語法簡潔，更加語義化

基於標準 promise 實現，支援 async/await

同構方便，使用 isomorphic-fetch

上面的**的邏輯是：如果瀏覽器支援fetch，就用fetch; 否則就用xhr


let vs var:

let是es6的新運算

let的好處是當我們寫**比較多的時候可以避免在不知道的情況下重複宣告變數

8 Vue學習 fetch請求

vue訓練營8 vue效能優化

Vue全解8 Vue表單輸入繫結v model

vue下axios和fetch跨域請求

8 Vue學習 fetch請求

vue訓練營8 vue效能優化

Vue全解8 Vue表單輸入繫結v model

vue下axios和fetch跨域請求

相關推薦