//npm
$ npm i axios -s
$ npm i vue-axios -s
//全域性註冊 axios
import vue from
'vue'
;import axios from
'axios'
;vue.prototype.$axios = axios;
//this.$axios使用
//或 vue-axios
import vue from
'vue'
;import axios from
'axios'
;import vueaxios from
'vue-axios'
;vue.
use(vueaxios,axios)
;使用axios,一次封裝方便協作規範
//模板中區域性引入
import axios from
'axios'
;使用
get請求、post請求
axios.get(url[,params]).then(function(response)).catch(function(error))
;
axios.post(url,data).then(function(response)).catch(function(error))
多個併發請求
併發的助手函式axios.all(iterable);axios.spread(callback)
function
get1()
;function
get2()
;function
get3()
;axios.
all(
[get1()
,get2()
,get3()
]).then
(axios.
spread
(function
(data1,data2,data3)
))
api
axios(}
)
axios
('/url?id=123456'
)//或
axios
('/url'
, params:
)
所有方法別名 別名
說明axios.request(config)
建立請求
axios.get(url[,config])
getaxios.delete(url[,config])
delete
axios.head(url[,config])
head
axios.post(url[,data[,config]])
post
axios.put(url[,data[,config]])
putaxios.patch(url[,data[,config]])
patch
建立例項
axios.creat([config])
可用的config配置選項
axios.
creat(]
,//『post』,『put』,『patch』傳送前,修改請求資料
transformresponse:
[function
(data)],
//傳遞給then/catch前,處理響應資料
headers:
,//自定義請求頭
params:
,//一起傳送的url引數
paramsserializer:
function
(params)
,//處理params的序列化函式
data:
,//『post』,『put』,『patch』請求主體被傳送的資料
timeout:
1000
,//超時中斷請求時間
withcredentials:
false
(預設)
,//跨域請求是否需要憑證
auth:
,//設定並覆蓋'authorization'頭資訊,http基礎驗證及憑據
adapter:
function
(config)
,//自定義處理請求,便於測試
responsetype:
'json'
(預設),//『arraybuffer』,『blob』,『document』,『json』,『text』,『stream』
xsrfcookiename:
'xsrf-token'
, xsrfheadername:
'xsrf-token'
,//xsrf token值的cookie名稱和http頭名稱
onuploadprogress:
function()
, ondownloadprogress:
function()
,//對原生進度事件的處理
maxcontentlenth:
2000
,//響應內容的最大尺寸
validatestatus:
function
(status)
, maxredirects:
5(預設)
,//為0不follow任何重定向
,中是否開啟自定義**
proxy:},
//自定義**伺服器及憑據,設定並覆蓋http中的proxy-authorization頭資訊
canceltoken:
newcanceltoken
(function
(cancel)
)//取消請求的cancel token
})
響應的結構
//then(response=>)得到的資料結構
response:{
data:
, status:
200,
statustext:
"ok"
, headers:
, config:, }
//catch(error=>)得到的資料結構
error:
, status:'',
headers:,}
, message:'',
config:
,}
配置預設值
axios.defaults.baseurl ='';
axios.defaults.headers.common[
'authorization']=
auth_token
;axios.defaults.headers.post[
'content-type']=
;
***
axios.interceptors.request.
use(
function
(config)
,function
(error)
);
//全域性註冊
import vue from
'vue'
;import axios from
'axios'
;import vueaxios from
'vue-axios'
;vue.
use(vueaxios,axios)
;
vue.axios/this.axios/this.$http
使用axios,一次封裝方便協作規範;
qs.js序列化處理資料:qs.parse()和qs.stringify();以及與json.parse()/stringify()的異同;
關於Vue axios下跨域cookie的處理
一般在生產環境下盡量可以通過nginx等反向 把vue前端和api介面處理成同一埠和網域名稱。在開發和測試時,也可以使用相容性比較好的瀏覽器進行。凡事有例外,以下分別對待不同情況 伺服器端 配置cors即可 客戶端配置axios.defaults.withcredentials true,這樣大部分...
vue中 sessionStorage 的使用
sessionstorage.key int index 返回當前 sessionstorage 物件的第index序號的key名稱。若沒有返回null。sessionstorage.getitem string key 返回鍵名 key 對應的值 value 若沒有返回null。sessionst...
關於PagedDataSourced的使用
asp.net提供了三個功能強大的列表控制項 datagrid datalist和repeater控制項,但其中只有datagrid控制項提供分頁功能。相對datagrid,datalist和repeater控制項具有更高的樣式自定義性,所以很多時候我們喜歡使用datalist或repeater控制...