一、Vue使用axios封装
在Vue中使用axios发送请求时，我们可以将其进行封装，以便于更好地管理代码和请求。下面是一个简单的封装例子：
import axios from 'axios'
// 配置axios
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 15000, // 请求超时时间
withCredentials: true // 允许携带cookie
})
// 添加请求拦截器
service.interceptors.request.use(
config => {
// 在请求发送之前做一些处理
// 如添加token等
return config
},
error => {
// 处理请求错误
Promise.reject(error)
}
)
// 添加响应拦截器
service.interceptors.response.use(
response => {
// 在响应数据之前处理
return response.data
},
error => {
// 处理响应错误
return Promise.reject(error)
}
)
export default service
通过对axios进行封装，我们可以配置一些常用的参数，如请求超时时间、携带cookie、添加请求头等。同时，我们也可以添加请求和响应拦截器，在请求、响应前后，做一些常用的处理，如添加token等。
二、Vue使用axios时出现500错误
在Vue中使用axios请求数据时，有时会出现500错误。这个问题通常是由服务端响应错误引起的，可以通过查看控制台中的错误信息获得相应的提示。我们可以通过以下方法来捕捉这个错误：
axios.get('/api/test')
.then(res => {
// 处理响应数据
})
.catch(err => {
console.error('500错误', err)
})
如果出现500错误，控制台将会输出相关错误信息，我们可以根据信息进行定位和解决。
三、Vue使用axios解决跨域
Vue在使用axios时，由于浏览器的同源策略，会出现跨域的问题。我们可以通过配置代理来解决这个问题，减少服务端的压力。下面是配置代理的方法：
// vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
我们在配置文件中加入了一个代理，将所有以/api开头的请求转发到http://localhost:3000服务器上，然后再通过pathRewrite将请求多余的/api去掉。
四、Vue使用axios请求数据
在Vue中，通过axios发送请求获取数据是常见的操作。下面是一个发送GET请求的例子：
axios.get('/api/data')
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
我们可以通过axios的get方法来发送GET请求，并通过then和catch方法处理响应数据和错误。在响应数据中，我们可以通过res.data来获取返回的实际数据。
五、Vue使用axios发送请求
除了GET请求，我们还可以通过axios发送POST、PUT、DELETE等请求。下面是一个发送POST请求的例子：
axios.post('/api/data', {
name: 'test',
age: 18
})
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
我们可以通过axios的post方法来发送POST请求，并通过then和catch方法处理响应数据和错误。在发送请求时，我们也可以通过参数的形式向后端发送数据，如上面例子中的{ name: 'test', age: 18 }。
六、Vue使用axios异步刷新数据
在Vue中，异步刷新数据是经常使用axios的地方。下面是一个通过axios异步刷新数据的例子：
data() {
return {
dataList: []
}
},
created() {
axios.get('/api/data')
.then(res => {
this.dataList = res.data
})
.catch(err => {
console.error(err)
})
}
我们可以在Vue的created钩子函数中使用axios来异步刷新数据，并把获取到的数据赋值给Vue的data中的变量dataList。这样，我们就可以在页面中渲染获取到的数据。
七、Vue使用axios调用后端接口
在Vue中，使用axios调用后端接口是非常常见的，下面是一个简单的例子：
const api = {
getData: () => axios.get('/api/data')
}
export default api
我们可以通过封装api的方式，在Vue中统一管理axios的请求方法。如上面的代码，我们封装了一个名为getData的方法，用于获取/api/data接口的数据，并把它export出去。在Vue中，我们可以直接通过api来调用getData方法：
import api from './api'
created() {
api.getData()
.then(res => {
console.log(res.data)
})
.catch(err => {
console.error(err)
})
}
通过封装api，我们可以在Vue中更好地管理各个接口的请求方法和参数，使代码更加清晰明了。
八、Vue使用Vuex管理axios请求数据
在Vue中，我们可以通过Vuex管理项目中的状态，包括axios请求的数据等。下面是一个简单的例子：
// store.js
import axios from 'axios'
const state = {
dataList: []
}
const mutations = {
SET_DATA_LIST: (state, dataList) => {
state.dataList = dataList
}
}
const actions = {
getDataList({ commit }) {
return new Promise((resolve, reject) => {
axios.get('/api/data')
.then(res => {
commit('SET_DATA_LIST', res.data)
resolve()
})
.catch(err => {
reject(err)
})
})
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
在上面的代码中，我们在Vuex中定义了一个名为dataList的状态，它的初始值为一个空数组。在mutations中，我们定义了修改dataList的方法，在actions中，我们定义了获取数据的异步方法，通过axios获取数据后，调用mutations中的方法更新Vuex中的数据。在我们的组件中，我们可以通过Vuex的mapActions来调用actions中的方法：
import { mapActions } from 'vuex'
export default {
name: 'DataList',
computed: {
...mapState({
dataList: state => state.data.dataList
})
},
methods: {
...mapActions(['getDataList'])
},
created() {
this.getDataList()
}
}
通过使用Vuex来管理axios请求数据，可以使我们的代码更加规范化和清晰，同时也方便对项目中的状态进行控制和修改。
