色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue axios如何配置

傅智翔1年前8瀏覽0評論

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進行網絡請求的基本配置,我們可以根據實際需求進行更多的配置和使用方式。