axios基礎封裝

2021-08-18 05:18:07 字數 3442 閱讀 9419

script新建axios資料夾,新建index.js fetch.js

fetch.js如下:

index.js如下:

//引入fetch.js檔案

import from './fetch'

//定義獲取資料的函式getdata(),其中url,type,data對應fetch(config)中的config

export  function getdata(url,type,data) )

}呼叫方法:

import 

from

'./assets/scripts/axios'

foo

()為使用者傳入的引數,中間方法為

'',預設

'get'

getdata

(mockapi

.getindexlist()+

/\/\.json/

, ''

, {}).

then

(res

=>

, err

=>

)}

附錄:

關於自定義const instance = axios.create() 可以有很多配置,我只是寫了最基本的幾個,官方都給了詳細說明,我這裡也貼一下。

],

// `transformresponse` 在傳遞給 then/catch 前,允許修改響應資料

transformresponse:[

function

(data)],

// `headers` 是即將被傳送的自定義請求頭

headers:,

// `params` 是即將與請求一起傳送的 url 引數

// 必須是乙個無格式物件(plain object)或 urlsearchparams 物件

params:,

// `paramsserializer` 是乙個負責 `params` 序列化的函式

// (e.g.

paramsserializer

:function

(params))

},// `data` 是作為請求主體被傳送的資料

// 只適用於這些請求方法 'put', 'post', 和 'patch'

// 在沒有設定 `transformrequest` 時,必須是以下型別之一:

// - string, plain object, arraybuffer, arraybufferview, urlsearchparams

// - 瀏覽器專屬:formdata, file, blob

// - node 專屬: stream

data:,

// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)

// 如果請求話費了超過 `timeout` 的時間,請求將被中斷

timeout

:1000

,// `withcredentials` 表示跨域請求時是否需要使用憑證

withcredentials

:false

,// 預設的

// `adapter` 允許自定義處理請求,以使測試更輕鬆

// 返回乙個 promise 並應用乙個有效的響應 (查閱 [response docs](#response-api)).

adapter

:function

(config),

// `auth` 表示應該使用 http 基礎驗證,並提供憑據

// 這將設定乙個 `authorization` 頭,覆寫掉現有的任意使用 `headers` 設定的自定義 `authorization`頭

auth:,

// `responsetype` 表示伺服器響應的資料型別,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'

responsetype

:'json'

,// 預設的

// `xsrfcookiename` 是用作 xsrf token 的值的cookie的名稱

xsrfcookiename

:'xsrf-token'

,// default

// `xsrfheadername` 是承載 xsrf token 的值的 http 頭的名稱

xsrfheadername

:'x-xsrf-token'

,// 預設的

// `onuploadprogress` 允許為上傳處理進度事件

onuploadprogress

:function

(progressevent),

ondownloadprogress

:function

(progressevent),

// `maxcontentlength` 定義允許的響應內容的最大尺寸

maxcontentlength

:2000

,// `validatestatus` 定義對於給定的http 響應狀態碼是 resolve 或 reject promise 。如果 `validatestatus` 返回 `true` (或者設定為 `null` 或 `undefined`),promise 將被 resolve; 否則,promise 將被 rejecte

validatestatus

:function

(status),

// `maxredirects` 定義在 node.js 中 follow 的最大重定向數目

// 如果設定為0,將不會 follow 任何重定向

maxredirects:5

,// 預設的

// `httpagent` 和 `httpsagent` 分別在 node.js 中用於定義在執行 http 和 https 時使用的自定義**。允許像這樣配置選項:

// `keepalive` 預設沒有啟用

(),// 'proxy' 定義**伺服器的主機名稱和埠

// `auth` 表示 http 基礎驗證應當用於連線**,並提供憑據

// 這將會設定乙個 `proxy-authorization` 頭,覆寫掉已有的通過使用 `header` 設定的自定義 `proxy-authorization` 頭。

proxy:},

// `canceltoken` 指定用於取消請求的 cancel token

canceltoken

:new

canceltoken

(function

(cancel))

}

axios封裝使用

記錄專案中使用過的axios封裝,以便下次使用。import axios from axios 引用axios import from util util 引用剛才我們建立的util.js檔案,並使用getcookie方法 import qs from qs 很重要!過濾json格式化 axios ...

axios詳細封裝

我們採取封裝分類管理舉個栗子 新建資料夾utils 裡面新建url.js 全站http的配置 全站http配置 axios引數說明 isserialize是否開啟form表單提交 istoken是否需要token 新增乙個響應 axios interceptors response use func...

axios請求封裝

首先在vue專案下安裝axios以及支援非同步提示的iview元件庫 npm install axios npm install iview 在src資料夾下新建axios資料夾,在其中新建api.js用於存放介面,request.js用於封裝axios物件 編寫request.js 123 456...