前端對axios的封裝和使用

axios 是乙個基於 promise 的 http 庫。將axios封裝好後能更高效的開發並且方便維護，而且在以後的專案中也能直接套用，所以封裝好是必要的。在參考了很多方法後，我拼湊出了一套我認為很實用的方法。

這個是功能性檔案是拼接url和引數的，讀一遍知道他有什麼功能就行了

const helper =

=([^&]*)(&|$)`
)let hash = window.location.hash
let search = hash.
split
('?'
)let r = search[1]
&& search[1]
.match
(reg)
if(r !=
null
)return r[2]
;return''}
,// 拼接引數至url
querystring
(url, query)
let paramstr = str.
join
('&'
)return paramstr ?`$
?$` : url
}}export
default helper

import axios from

'axios'
import helper from
'./helper'
let qs =
require
('querystring'
) process.env.node_env)
//判斷環境提供baseurl，注意要與後台位址一致
let root = process.env.
node_env
==='development'
// 開發環境api介面
// 生產環境api介面
:`;// 引用axios，設定標頭檔案
axios.defaults.headers.post[
'content-type']=
;function
apiaxios
(method, url, params, token)` }
, withcredentials:
false})
}export
default
, post:
function
(url, params, token)
, put:
function
(url, params, token)
,delete
:function
(url, params, token)
,}

api.js

vue推薦封裝一下前端api介面，這樣可根據函式名判斷型別和url給axios檔案,不用每次傳送請求的時候都手動輸入url，方便維護和開發。

}在main.js中引用後就可以全域性呼叫了

import api from

'./api/api.js'
//定義全域性變數
vue.prototype.$api = api

使用:由於是非同步操作，axios返回的是promise物件，所以要用 .then的形式接收後端發回來的response，然後做出相應的反饋。

//直接用this.$api呼叫api中介面，如果不封裝api介面可以用this.$http

this
.$api.
login
(data, token)
.then
((res)
=>).
catch
((err)
=>
)

對axios的封裝

axios封裝 請求攔截 相應攔截 錯誤統一處理 import axios from axios import qsfrom qs import from element ui import store from store index import router from router index...

對axios的封裝

axios 封裝 請求攔截 相應攔截 錯誤統一處理 import axios from axios eslint disable next line no unused vars import qsfrom qs eslint disable next line no unused vars imp...

axios的封裝和使用

響應 instance.interceptors.response.use res else err return promise.reject err mergeoptions options 真正傳送請求在這 request options 封裝get方法 get url,config 封裝po...