2. 程式人生 > 程式設計 >VUE中使用HTTP庫Axios方法詳解

VUE中使用HTTP庫Axios方法詳解

阿新 • • 發佈：2020-02-06

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中

安裝Axios模組

在Vue中使用，最好安裝兩個模組axios 和vue-axios

$npm install axios vue-axios --save

然後引用並使用模組

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios,Axios)

在元件中通過如下方式進行使用

this.$http[method]()

Axios模組特性

1、可以從瀏覽器中建立XHR物件

2、可以從nodeJS中建立HTTP請求

3、支援Promise API 

4、可以攔截請求和響應

5、可以轉換請求資料和響應資料

6、可以取消請求

7、可以自動轉換JSON資料

8、客戶端支援防禦XSRF

Vue下使用使用Axios

下面是一些簡單的請求例項

get請求

僅僅向後端請求資料

axios.get('index.php')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

通過URL向後端傳送資料，要使用params屬性，params屬性包含即將與請求一起傳送的資料

執行下列程式碼後，請求URL變更為index.php?id=12345&text=%E5%B0%8F%E7%81%AB%E6%9F%B4

axios.get('index.php',{
 params:{
  id:12345,text:'jb51'
 }
}).then((response)=>{
 console.log(response)
}).catch((error)=>{
 console.log(error)
})

當然，也可以把資料直接寫到URL中

// 為給定 ID 的 user 建立請求
axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });

post請求

一般來說，post請求更多的是要提交資料，params屬性裡的資料會出現在請求主體中

[注意]如果是axios.create()方法中的params屬性，則其裡面的資料會出現在URL引數中

但實際上，post方法不需要使用params屬性，它的第二個引數就是要傳送的資料

axios.post('index.php',{
 id:12345,text:'jb51'
}).then((response)=>{
 console.log(response)
}).catch((error)=>{
 console.log(error)
})

多併發請求

function getUserAccount() {
 return axios.get('/user/12345');
}
function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),getUserPermissions()])
 .then(axios.spread(function (acct,perms) {
  // acct為第一個請求的結果，perms為第二個請求的結果
 }));

Axios中的API

axios()

可以通過向 axios 傳遞相關配置來建立請求

axios(config)
// 傳送 POST 請求
axios({
 method: 'post',url: '/user/12345',data: {
  firstName: 'Fred',lastName: 'Flintstone'
 }
});
axios(url[,config])
// 傳送 GET 請求（預設的方法）
axios('/user/12345');

別名

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

axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,config]])
axios.patch(url[,config]])

[注意]在使用別名方法時， url、method、data 這些屬性都不必在配置中指定

併發

處理併發請求的助手函式

axios.all(iterable)
axios.spread(callback)

例項方法

建立例項

可以使用自定義配置新建一個 axios 例項

axios.create([config])
var instance = axios.create({
 baseURL: 'https://www.jb51.net/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'}
});

例項方法

以下是可用的例項方法。指定的配置將與例項的配置合併

axios#request(config)
axios#get(url[,config])
axios#delete(url[,config])
axios#head(url[,config])
axios#post(url[,config]])
axios#put(url[,config]])
axios#patch(url[,config]])

請求配置

這些是建立請求時可以用的配置選項。只有 url 是必需的。如果沒有指定 method，請求將預設使用 get 方法

{
 // `url` 是用於請求的伺服器 URL
 url: '/user',// `method` 是建立請求時使用的方法
 method: 'get',// 預設是 get
 // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。它可以通過設定一個 `baseURL` 便於為 axios 例項的方法傳遞相對 URL
 baseURL: 'https://some-domain.com/api/',// `transformRequest` 允許在向伺服器傳送前，修改請求資料，只能用在 'PUT','POST' 和 'PATCH' 這幾個請求方法。後面陣列中的函式必須返回一個字串，或 ArrayBuffer，或 Stream
 transformRequest: [function (data) {
  // 對 data 進行任意轉換處理
  return data;
 }],// `transformResponse` 在傳遞給 then/catch 前，允許修改響應資料
 transformResponse: [function (data) {
  // 對 data 進行任意轉換處理
  return data;
 }],// `headers` 是即將被髮送的自定義請求頭
 headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即將與請求一起傳送的 URL 引數，必須是一個無格式物件(plain object)或 URLSearchParams 物件
 params: {
  ID: 12345
 },// `paramsSerializer` 是一個負責 `params` 序列化的函式(e.g. https://www.jb51.com/package/qs,http://api.jb51.com/jquery.param/)
 paramsSerializer: function(params) {
  return Qs.stringify(params,{arrayFormat: 'brackets'})
 },// `data` 是作為請求主體被髮送的資料，只適用於這些請求方法 'PUT','POST',和 'PATCH'
 // 在沒有設定 `transformRequest` 時，必須是以下型別之一：string,plain object,ArrayBuffer,ArrayBufferView,URLSearchParam，瀏覽器專屬：FormData,File,Blob，Node 專屬： Stream
 data: {
  firstName: 'Fred'
 },// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)，如果請求花費了超過 `timeout` 的時間，請求將被中斷
 timeout: 1000,// `withCredentials` 表示跨域請求時是否需要使用憑證
 withCredentials: false,// 預設的
 // `adapter` 允許自定義處理請求，以使測試更輕鬆，返回一個 promise 並應用一個有效的響應 (查閱 [response docs](#response-api)).
 adapter: function (config) {
  /* ... */
 },// `auth` 表示應該使用 HTTP 基礎驗證，並提供憑據，這將設定一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設定的自定義 `Authorization`頭
 auth: {
  username: 'janedoe',password: 's00pers3cret'
 },// `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` 允許為下載處理進度事件
 onDownloadProgress: function (progressEvent) {
  // 對原生進度事件的處理
 },// `maxContentLength` 定義允許的響應內容的最大尺寸
 maxContentLength: 2000,// `validateStatus` 定義對於給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設定為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejecte
 validateStatus: function (status) {
  return status >= 200 && status < 300; // 預設的
 },// `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目，如果設定為0，將不會 follow 任何重定向
 maxRedirects: 5,// 預設的
 // `httpAgent` 和 `httpsAgent` 分別在 node.js 中用於定義在執行 http 和 https 時使用的自定義代理。`keepAlive` 預設沒有啟用
 httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// 'proxy' 定義代理伺服器的主機名稱和埠，`auth` 表示 HTTP 基礎驗證應當用於連線代理，並提供憑據。這將會設定一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設定的自定義 `Proxy-Authorization` 頭。
 proxy: {
  host: '127.0.0.1',port: 9000,auth: : {
   username: 'mikeymike',password: 'rapunz3l'
  }
 },// `cancelToken` 指定用於取消請求的 cancel token
 cancelToken: new CancelToken(function (cancel) {
 })
}

下面是一個例項

let HTTP = axios.create({
 baseURL: 'http://localhost/',timeout:1000,headers:{
  'author':'xiaohuochai'
 }
})
HTTP.post('index.php',text:'jb51'
}).then((response)=>{
 console.log(response)
}).catch((error)=>{
 console.log(error)
})

結果如下

VUE中使用HTTP庫Axios方法詳解

響應結構

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

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

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

 .then(function(response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
 });

配置預設值

可以指定將被用在各個請求的配置預設值

全域性的axios預設值

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

自定義例項預設值

// 建立例項時設定配置的預設值
var instance = axios.create({
 baseURL: 'https://www.jb51.com'
});
// 在例項已建立後修改預設值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

配置優先順序

配置會以一個優先順序進行合併。這個順序是：在 lib/defaults.js 找到的庫的預設值，然後是例項的 defaults 屬性，最後是請求的 config 引數。後者將優先於前者

// 使用由庫提供的配置的預設值來建立例項
// 此時超時配置的預設值是 `0`
var instance = axios.create();
// 覆寫庫的超時預設值
// 現在，在超時前，所有請求都會等待 2.5 秒
instance.defaults.timeout = 2500;
// 為已知需要花費很長時間的請求覆寫超時設定
instance.get('/longRequest',{
 timeout: 5000
});

攔截器

在請求或響應被 then 或 catch 處理前攔截它們

// 新增請求攔截器
axios.interceptors.request.use(function (config) {
  // 在傳送請求之前做些什麼
  return config;
 },function (error) {
  // 對請求錯誤做些什麼
  return Promise.reject(error);
 });
// 新增響應攔截器
axios.interceptors.response.use(function (response) {
  // 對響應資料做點什麼
  return response;
 },function (error) {
  // 對響應錯誤做點什麼
  return Promise.reject(error);
 });

如果想在稍後移除攔截器，可以這樣：

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

可以為自定義 axios 例項新增攔截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

錯誤處理

axios.get('/user/12345')
 .catch(function (error) {
  if (error.response) {
   // 請求已發出，但伺服器響應的狀態碼不在 2xx 範圍內
   console.log(error.response.data);
   console.log(error.response.status);
   console.log(error.response.headers);
  } else {
   // Something happened in setting up the request that triggered an Error
   console.log('Error',error.message);
  }
  console.log(error.config);
 });

可以使用 validateStatus 配置選項定義一個自定義 HTTP 狀態碼的錯誤範圍

axios.get('/user/12345',{
 validateStatus: function (status) {
  return status < 500; // 狀態碼在大於或等於500時才會 reject
 }
})

取消

可以使用 CancelToken.source 工廠方法建立 cancel token，像這樣：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();
axios.get('/user/12345',{
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled',thrown.message);
 } else {
  // 處理錯誤
 }
});
// 取消請求（message 引數是可選的）
source.cancel('Operation canceled by the user.');

還可以通過傳遞一個 executor 函式到 CancelToken 的建構函式來建立 cancel token

var CancelToken = axios.CancelToken;
var cancel;
axios.get('/user/12345',{
 cancelToken: new CancelToken(function executor(c) {
  // executor 函式接收一個 cancel 函式作為引數
  cancel = c;
 })
});
// 取消請求
cancel();

[注意] 可以使用同一個 cancel token 取消多個請求

下面是一個例項

let CancelToken = axios.CancelToken;
let source = CancelToken.source();
let HTTP = axios.create({
 baseURL: 'http://localhost/',params:{
  a:123
 },})
HTTP.post('index.php',text:'jb51'
},{
 cancelToken: source.token,}).then((response)=>{
 commit('fnChangeList',{listData:response.data})
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled',thrown.message);
 } else {
  console.log('err');
 }
});
source.cancel('Operation canceled by the user.');

最終在控制檯中打印出如下資訊

Request canceled Operation canceled by the user.

更多關於VUE中使用HTTP庫Axios的文章大家可以點選下面的相關連結

相關推薦

VUE中使用HTTP庫Axios方法詳解

Axios 是一個基於 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中 安裝Axios模組 在Vue中使用，最好安裝兩個模組axios 和vue-axios

Vue 中使用 typescript的方法詳解

什麼是typescript typescript 為 javaScript的超集，這意味著它支援所有都JavaScript都語法。它很像JavaScript都強型別版本，除此之外，它還有一些擴充套件的語法，如interface/module等。 typescript 在編譯期會去掉

Spring5中的WebClient使用方法詳解

前言 Spring5帶來了新的響應式web開發框架WebFlux，同時，也引入了新的HttpClient框架WebClient。WebClient是Spring5中引入的執行 HTTP 請求的非阻塞、反應式客戶端。它對同步和非同步以及流方案都有很好的支援，We

MongoDB中MapReduce的使用方法詳解

前言 玩過Hadoop的小夥伴對MapReduce應該不陌生，MapReduce的強大且靈活，它可以將一個大問題拆分為多個小問題，將各個小問題傳送到不同的機器上去處理，所有的機器都完成計算後，再將計算結果合併為一個完整的解決方

優化Vue中date format的效能詳解

在很多專案中，都需要將長整型的日期格式轉換成其他的日期格式，而在Vue中，我們可以利用自定義相應的 filter 過濾器來進行 date format 的功能。如果直接引入 moment 的方法，在利用 npm run build --report 時，會

Vue中keep-alive元件作用詳解

keep-alive元件的作用，供大家參考 作用：用於保留元件狀態或避免重新渲染（快取的作用）

Vue中qs外掛的使用詳解

之前用Vue+element寫了一個後臺管理系統，在登入時使用axios請求資料傳參時無法正常的獲取資料。之後也是一通百度，發現原因是傳遞引數要將引數序列化。

vue 中的 render 函式作用詳解

render 函式作用 vue渲染函式文件第一遍看的暈暈乎乎的，再看看寫寫終於清晰了。建議配合文件閱讀，本文也是根據文件加上自己的理解。

Go中strings的常用方法詳解

string操作在程式設計中具有極高的頻率，那麼string中有哪些有用的方法呢？ 使用strings直接操作

React中Ref 的使用方法詳解

本文例項講述了React中Ref 的使用方法。分享給大家供大家參考，具體如下： React中Ref 的使用 React v16.6.3

Python中Selenium庫使用教程詳解

selenium介紹 selenium最初是一個自動化測試工具,而爬蟲中使用它主要是為了解決requests無法直接執行JavaScript程式碼的問題 selenium本質是通過驅動瀏覽器，完全模擬瀏覽器的操作，比如跳轉、輸入、點選、下拉等，來

在webstorm中配置less的方法詳解

首先你要有node和npm的環境，沒得話先下載。 https://nodejs.org/en/ 然後下載less cnpm install less -g

JavaScript中arguments的使用方法詳解

前言 js這是一門弱語言，不像其他語言如c，java等，有嚴格的規範， 所以現在也流傳著一種說法，js本來就不是一種語言；

Vue中inheritAttrs的使用例項詳解

今天舉一個例子解釋一下inheritAttrs的使用 先看程式碼 <body> <div id=\"app\" class=\"vueclass\">

vue陣列響應式的方法詳解

技術標籤：# Vue前端學習 vue陣列的方法 push方法，可以做到響應式 可以傳入一個值可以傳入多個值 <script>

Protobuf在Cmake中的正確使用方法詳解

Protobuf是google開發的一個序列化和反序列化的協議庫，我們可以自己設計傳遞資料的格式，通過.proto檔案定義我們的要傳遞的資料格式。例如，在深度學習中常用的ONNX交換模型就是使用.proto編寫的。我們可以通過多種

vue車牌輸入元件使用方法詳解

一個簡單的車牌輸入元件（），供大家參考，具體內容如下 效果圖： vue程式碼：

vue驗證碼元件使用方法詳解

本文例項為大家分享了驗證碼元件使用的具體實現程式碼，供大家參考，具體內容如下

Java 中 equals() 和 hashcode() 方法詳解

hashCode 使用中產生的問題 HashSet 是一個無序、不可重複的集合，程式碼如下：

vue載入天氣元件使用方法詳解

本文例項為大家分享了載入天氣元件的使用方法，供大家參考rnulFHLpA，具體內容如下