axios 是一個基于 Promise 的 HTTP 請求庫,可以用于瀏覽器和 Node.js 中發送 XMLHttpRequest 和 http 請求,支持請求的取消、攔截、請求和響應數據的轉換等功能。在 Vue 項目中,可以使用 axios 進行網絡請求,獲取數據。在引入 axios 時可以對其進行設置從而方便統一管理請求和處理請求返回的數據。
下面是引入 axios 并設置 baseURL,headers 等常用配置的實例代碼:
import axios from 'axios' const http = axios.create({ baseURL: 'http://localhost:3000/', timeout: 5000, headers: { 'Content-Type': 'application/json;charset=UTF-8' } }) export default http
上面的代碼中我們使用了 axios.create 創建了一個 axios 實例,并配置了 baseURL 和 headers,可以看到請求的 baseURL 是 'http://localhost:3000/',timeout 為 5000(即 5s),headers 設置了請求頭的 Content-Type 為 json 類型。
在 Vue 項目中,我們可以將 axios 實例引入到我們的 Vue 實例中,然后在組件中使用,這樣方便我們管理請求和處理請求返回的數據。下面是引入 axios 實例的代碼:
import Vue from 'vue' import http from './http' Vue.prototype.$http = http
上面的代碼中我們將 axios 實例命名為 http,然后在 Vue 原型上定義了 $http 屬性,將 http 實例綁定到 Vue 實例上,方便在組件中使用。我們可以在組件中通過 this.$http 方法來使用 http 實例進行網絡請求,如下所示:
export default { name: 'ExampleComponent', mounted() { this.$http.get('/api/example').then(res =>{ console.log(res.data) }).catch(error =>{ console.error(error) }) } }
在上面的代碼中,我們通過 this.$http.get 方法發送了一個 GET 請求,請求的路徑為 '/api/example',請求成功后,打印出了返回的數據,請求失敗則打印出錯誤信息。
除了使用 this.$http 方法進行請求外,我們還可以在 http 實例上定義攔截器,來統一處理請求和響應,如下所示:
http.interceptors.request.use(config =>{ // do something before request is sent return config }, error =>{ // do something with request error return Promise.reject(error) }) http.interceptors.response.use(response =>{ // do something with response data return response }, error =>{ // do something with response error return Promise.reject(error) })
在上面的代碼中,我們定義了兩個攔截器,一個是請求攔截器,一個是響應攔截器。在請求攔截器中,我們可以對請求進行處理,例如添加 token 頭部等,在響應攔截器中,我們可以對響應進行處理,例如統一處理錯誤信息,對響應進行格式化等等。
總之,通過引入 axios 并進行配置和定義攔截器,對 Vue 項目進行統一管理網絡請求并處理返回數據是非常方便和實用的。