vue中使用axios庫進行網絡請求是前端開發中常見的一個操作。axios是一個基于Promise來完成的HTTP庫,可以支持瀏覽器和node.js
在Vue中使用axios需要先進行安裝,可以通過npm命令行進行安裝,在命令行中輸入以下命令:
npm install axios
安裝完成后,就可以在vue項目中使用axios進行網絡請求了,但是我們需要先進行axios的一些配置。
首先,我們需要在Vue的main.js中引入axios:
import axios from 'axios' Vue.prototype.$http = axios
接下來,我們想要給axios進行一些實例配置,如設置請求的根路徑等,我們可以在src文件夾下新建一個axios文件夾,然后新建一個http.js文件進行配置,代碼如下:
import axios from 'axios' const http = axios.create({ baseURL: 'http://localhost:8080/api', // 設置請求的根路徑 timeout: 10000, // 超時時間 headers: { 'Content-Type': 'application/json' // 請求頭設置 } }) export default http
以上是http.js的基本配置,我們可以看到使用了create方法創建了一個axios實例,并將其導出供其他組件使用。其中,baseURL表示的是請求的根路徑,timeout表示請求的超時時間,headers表示請求頭內容。
接下來,我們在vue組件中使用這個http實例進行網絡請求。比如我們要獲取一個用戶列表數據,代碼如下:
import http from '@/axios/http.js' export default { data () { return { userList: [] } }, methods: { getUserList () { http.get('/user/list').then(response =>{ this.userList = response.data }).catch(error =>{ console.log(error) }) } }, created () { this.getUserList() } }
以上代碼中,我們首先通過import引入了http.js中的axios實例,在methods中調用該實例的get方法進行請求操作。請求的路徑是'/user/list',在請求成功后將返回的數據賦值給userList。catch方法用于處理請求失敗的情況。
在Vue中發送post請求可使用http.post方法如下:
http.post('/user/add', { username: '張三', password: '123456' }).then(response =>{ console.log(response.data) }).catch(error =>{ console.log(error) })
以上代碼中,我們需要在第二個參數傳遞一個包含請求參數的對象,該對象中包含了要傳遞的參數數據,請求路徑為'/user/add'。
以上就是Vue中使用axios進行網絡請求的基本配置,我們可以根據實際需求進行更多的配置和使用方式。