vue使用Axios做ajax請求

vue2.0之後，就不再對vue-resource更新，而是推薦使用axios

1. 安裝 axios

$ npm install axios

或

$ bower install axios

2. 在要使用的檔案中引入axios

import axios from

'axios
'

3. 使用axios做請求

可以通過向axios傳遞相關配置來建立請求,只有url是必需的。如果沒有指定method，請求將預設使用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: new
canceltoken(function (cancel) )
}

為方便，所有支援的請求方法都提供了別名:

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

axios.head(url[, config])

axios.post(url[, data[, config]])

axios.put(url[, data[, config]])

axios.patch(url[, data[, config]])

4. 請求的響應結構

,

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

使用then時，你將接收下面這樣的響應：

axios.get('

/user/12345')
.then(function(response) );

在使用catch時，響應可以通過error物件可被使用

axios.post('

/user
', )
.catch
(function (error) );

5. 使用例項

el1: get請求

axios.get('

/user', 
}).then(function (response) )
.catch
(function (error) );

el2: post請求

axios.post('

/user
', )
.then(function (response) )
.catch
(function (error) );

el3: 執行多個併發請求

function getuseraccount() 

function getuserpermissions() 
axios.all([getuseraccount(), getuserpermissions()])
.then(axios.spread(function (acct, perms) ));

vue使用Axios做ajax請求

vue使用axios做ajax請求 vue2.0之後，就不再對vue resource更新，而是推薦使用axios 安裝 axios npm install axios 或 bower install axios 2.在要使用的檔案中引入axios import axios from axios 3...

VUE中使用axios做ajax請求

vue2.0之後，就不再對vue resource更新，而是推薦使用axios 1.安裝 axios npm install axios或 bower install axios2.在要使用的檔案中引入axios import axios from axios 3.使用axios做請求 可以通過向a...

vue 使用axios傳送ajax請求

1 首先匯入兩個包，乙個是vue的包，乙個是axios的包 script script 資料的雙向繫結 input v model inputdata type text 事件繫結 input click searchdata type button value 搜尋 列表渲染 for ser in...