vue專案axios使用及axios的配置介紹

axios 是乙個基於 promise 的 http 庫，可以用在瀏覽器和 node.js 中

npm install axios

import

*as axios from
'./axios/'
vue.prototype.$axios = axios

//axios檔案

import axios from
'axios'
const base =
'/api'
//介面申明
//post請求
const
getsms
= params =>
//get請求
const
getsms2
= params =>)}
//介面匯出
export

//這裡在main.js檔案統一引入了介面，所以可以使用this.$axios直接呼叫

let res =
await
this
.$axios.
getsms
()

直接使用axios設定

axios.defaults.baseurl =
'';axios.defaults.headers.common[
'authorization']=
auth_token
;axios.defaults.headers.post[
'content-type'
]2. 或者建立例項，設定例項預設值
const service = axios.
create
()

某個請求的響應包含以下資訊

,// `status` 來自伺服器響應的 http 狀態碼
status:
200,
// `statustext` 來自伺服器響應的 http 狀態資訊
statustext:
'ok'
,// `headers` 伺服器響應的頭
headers:
,// `config` 是為請求提供的配置資訊
config:
}

// 新增請求***，對請求資訊做統一處理

service.interceptors.request.
use(
config =>
,error =>
)// 新增響應***，對介面的返回資料做統一的處理
service.interceptors.response.
use(res =>
else
if(res.data.code ===
22001
)// 根據介面code做不同處理
switch
(res.data.code)
return res
}, error =>
)

只有url屬性是必須的其他都是非必須，預設是get],

// `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:
newcanceltoken
(function
(cancel)
)}

vue專案及axios請求獲取資料

一般vue專案中 乙個頁面是由多個元件組成的，各個組建的資料都是統一在主介面的元件中傳送axios請求獲取，這樣極大地提高了效能。import homeheader from components header import homeswiper from components swiper imp...

vue專案封裝axios

還是直奔主題吧，因為官方不推薦使用vue resource，而是推薦axios，所以這篇文章分享給大家我在自己的專案裡如何封裝axios，雖說將axios在main.js裡寫入vue的原型鏈作為vue的屬性 vue.prototype.http axios 直接用最原始的方法也能進行請求 這樣也不是...

vue專案使用axios請求後端資料

在專案中使用到的向後端請求和提交資料的方式，axios請求 在使用axios時，需要先安裝axios npm install axios安裝完成後在main.js中引入 import axios from axios 為了使用方便在定義為全域性方法 vue.prototype.http axios完...