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'exportdefault 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裡面:xmlhttprequest 是乙個設計粗糙的 api,不符合關注分離(separation of concerns)的原則,配置和呼叫方式非常混亂,而且基於事件的非同步模型寫起來也沒有現代的 promise,generator/yield,async/await 友好。mozilla和safari裡面:
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。
trycatch
(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的好處是當我們寫**比較多的時候可以避免在不知道的情況下重複宣告變數
vue訓練營8 vue效能優化
答題思路 根據題目描述,這裡主要 vue 層面的優化 一 路由懶載入 const router new vuerouter 二 k eep alive 快取頁面 id 三 使用 v show 復用dom class cell v show value class on n 10000 v show ...
Vue全解8 Vue表單輸入繫結v model
vue 全解 0 vue 例項 vue 全解 1 構造選項 options 之 data vue 全解 2 vue 模板語法摘要 vue 全解 3 vue 的 data 和資料響應式 vue 全解 4 options 之生命週期鉤子 created mounted updated destroyed...
vue下axios和fetch跨域請求
1.在config的index.js下面進行常用跨域配置 proxytable 2.利用axios的post方式元件內發起請求this.axios.post apis test testtoken.php then res catch err 3.這幾個axios常用設定可在封裝axios的api中...