Vue使用axios详解

发布时间：2023-05-18

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

推荐文章