fetch在vue中的封裝使用

2021-10-06 18:39:44 字數 3912 閱讀 7369

使用fetch 是乙個現代的概念, 約等同於xmlhttprequest，其最大的兩個特性：

可以在service workers使用；

基於promise，天然支援proomise；

在vue 專案開發中，我們與介面打交道最多了，如何來優雅的使用請求變得尤為重要了。 通常我們通過客戶端向後端傳送http請求來接收介面資料，然後將這些介面資料完美的呈現到網頁上。

同時，與介面打交道那麼就會用到網路請求，與 vue 結合的網路請求庫有哪些呢？

vue-resource

axios

fetch

本章將使用 fetch 來完成介面的請求，以及對fetch 請求的封裝，來滿足業務開發。

fetch 是與 xmlhttprequest同級的方式，而非對ajax的封裝。所以在現代瀏覽器中可以直接使用，無需引用任何庫類，低階瀏覽器中，需要使用降級方案，這點不在我們此次文章之中（ie:你們都看我幹什麼？）

建立單獨檔案來封裝fetch，封裝的同時，我們需要和 後端 協商好一些約定，如請求頭 ， 狀態碼, 等等

同時可以引入必要的ui 提示框, 不同的狀態碼，提示不同的響應，

請求頭 : 來實現一些具體的業務，必須攜帶一些引數才可以請求(例如：會員業務)

狀態碼 : 根據介面返回的不同code ， 來執行不同的業務，這塊需要和後端約定好。

響應***： 這塊就是根據 後端 返回來的狀態碼判定執行不同業務

首先，我們先看一下成品requist結構是什麼樣的

首先，第一步我們引入了vant的提示框

然後定義了乙個request class，然後是對於錯誤請求的error處理，以及對於正確請求的success處理，以及需要業務彈窗錯誤的businesserror處理。最後，是定義乙個request物件，並將其export出去

然後我們看一下最核心的，即定義的request class

class


request


request


(parames)


,            body:


json


.stringify


(data)}if


(method ==


'get'


)            qs = qs.


substring(0


, qs.length -1)


qs.length >


1? requesturl += qs :''}


return


fetch


(requesturl, options)


.then


(function


(response)).


then


(function


(res)).


catch


(function


(err))}


}
在class 中，我們定義了乙個建構函式，其接收乙個物件，用於控制request的白名單與請求字首，然後是其關鍵的request方法，這個方法也接受乙個json，物件預設三個屬性，分別是請求url,method,以及需要傳遞的引數白名單用不是核心，我這裡定義的白名單是為了處理不屬於同乙個後端的請求，如果你的專案中沒有，可以不定義。

options是為了配置對於請求fetch控制不同配置的init物件：

對於get請求，需要一些特殊的處理，fetch中，get不可以放置body，其次引數需要拼接在url之後。

最後，我們定義乙個fetch請求，將我們處理好的引數放置進去，隨後，使用successfn作為響應***。error作為網路錯誤的處理函式。

這樣，我們對於request的封裝基本已經完成了，完整**如下

/*


* @author: wjk


* @date: 2020-03-01 13:21:27


* @lastedittime: 2020-03-02 13:10:41


*/import


from


'vant'


;class


request


request


(parames)


,            body:


json


.stringify


(data)}if


(method ==


'get'


)            qs = qs.


substring(0


, qs.length -1)


qs.length >


1? requesturl += qs :''}


return


fetch


(requesturl, options)


.then


(function


(response)).


then


(function


(res)).


catch


(function


(err))}


}function


error


(err))}


function


successfn


(data)


}function


businesserror


(params))}


const request =


newrequest()


export


default request
封裝了之後，接下來就是如何使用，我們可以將專案中所有的請求，集中在乙個api.js中進行處理，當需要呼叫的時候，可以直接引用使用

**如下:

import request from


'./request'


let publicurl =


'/'/**


* @msg: 獲取首頁資料


* @param  


* @return: 


*/export


function


index


(data)


front/index`


,    method:


'post'


,    data,})


}
將request物件引用進來，使用的時候，直接呼叫方法即可，publicurl用於放置統一請求字首，method中用於放置請求型別，data中用於放置請求引數。

最後，當我們需要呼叫這個請求的時候，可以在vue中使用

import


from


"@/apis/index"


;//呼叫


index()


.then()


.catch()


;
封裝後的的fetch~，要更符合模組化使用的規範，也不容易在請求過程中，留下奇怪的bug

fetch函式在vue中的應用

fetch提供了乙個獲取資源的介面 包括跨域請求 fetch 在於對 http 介面的抽象，包括 request，response，headers，body，以及用於初始化非同步請求的 global fetch。其中，global fetch方法的語法定義 fetch input init inpu...

在vue中全域性元件的封裝與使用

一 寫元件 新建 button.vue 元件 二 在子元件中新增install方法 建立乙個index.js檔案 寫入如下 import buttoncomponent from button.vue 新增install方法 const button 匯出 export default button...

vue中axios的封裝使用

npm install axios s 或者 npm i axios simport axios from axios vue.prototype.axios axios 將axios繫結到vue的原型上module.exports before import axios from axios im...