8 Vue學習 fetch請求

2022-04-12 04:24:51 字數 3641 閱讀 6330

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

,它還支援fileftp協議。

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的好處是當我們寫**比較多的時候可以避免在不知道的情況下重複宣告變數

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中...