Vue使用axios详解

一、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请求数据，可以使我们的代码更加规范化和清晰，同时也方便对项目中的状态进行控制和修改。