位置：文档库 > JavaScript > vue利用axios来完成数据的交互

vue利用axios来完成数据的交互

VortexSage 上传于 2025-05-02 20:41

《Vue利用axios来完成数据的交互》

在前端开发中，数据交互是构建动态应用的核心环节。Vue.js作为流行的前端框架，通过其响应式特性和组件化设计简化了用户界面的开发，而axios作为基于Promise的HTTP客户端，则提供了简洁且强大的API来处理与后端服务器的数据通信。本文将深入探讨如何在Vue项目中集成axios，实现高效的数据获取、提交和错误处理，覆盖从基础配置到高级用法的全流程。

一、axios的核心优势

axios之所以成为Vue生态中数据交互的首选工具，主要归功于其以下特性：

1. **基于Promise的异步处理**：通过链式调用`.then()`和`.catch()`，避免了回调地狱，代码更清晰。

2. **浏览器与Node.js双环境支持**：既可在浏览器中通过XMLHttpRequest发送请求，也可在Node.js中通过http库发送。

3. **请求/响应拦截器**：全局拦截请求或响应，统一处理认证、日志或错误。

4. **自动转换数据**：自动将请求数据序列化为JSON，响应数据解析为JavaScript对象。

5. **取消请求**：支持通过CancelToken取消正在进行的请求，避免资源浪费。

6. **客户端防御XSRF**：内置对跨站请求伪造的保护机制。

二、在Vue项目中安装与配置axios

1. 安装axios

通过npm或yarn安装axios：

npm install axios
# 或
yarn add axios

2. 基础配置

在Vue项目中，通常会在`src`目录下创建`utils/request.js`文件，封装axios的通用配置：

import axios from 'axios'

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 基础URL，从环境变量获取
  timeout: 5000, // 请求超时时间
  headers: { 'Content-Type': 'application/json' } // 默认请求头
})

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求前做些什么，例如添加token
    const token = localStorage.getItem('token')
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  },
  error => {
    // 对请求错误做些什么
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做点什么
    const res = response.data
    if (res.code !== 200) {
      // 处理业务错误，例如登录过期
      console.error('业务错误:', res.message)
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    // 对响应错误做点什么
    console.log('响应错误:', error.message)
    return Promise.reject(error)
  }
)

export default service

3. 在Vue组件中使用

在组件中引入封装好的axios实例，发起请求：

import request from '@/utils/request'

export default {
  data() {
    return {
      users: [],
      loading: false
    }
  },
  methods: {
    fetchUsers() {
      this.loading = true
      request({
        url: '/users',
        method: 'get'
      }).then(response => {
        this.users = response.data
      }).catch(error => {
        console.error('获取用户失败:', error)
      }).finally(() => {
        this.loading = false
      })
    }
  },
  created() {
    this.fetchUsers()
  }
}

三、axios在Vue中的常见用法

1. 发送GET请求

GET请求通常用于获取数据，可通过params传递查询参数：

request({
  url: '/users',
  method: 'get',
  params: {
    page: 1,
    limit: 10
  }
}).then(response => {
  console.log(response.data)
})

或使用简写形式：

request.get('/users', {
  params: { page: 1, limit: 10 }
}).then(response => {
  console.log(response.data)
})

2. 发送POST请求

POST请求用于提交数据，data属性指定请求体：

request({
  url: '/users',
  method: 'post',
  data: {
    name: 'John',
    age: 30
  }
}).then(response => {
  console.log('创建成功:', response.data)
})

简写形式：

request.post('/users', {
  name: 'John',
  age: 30
}).then(response => {
  console.log('创建成功:', response.data)
})

3. 并发请求

使用`axios.all`和`axios.spread`处理多个并发请求：

import axios from 'axios'

function getUser(id) {
  return axios.get(`/users/${id}`)
}

function getPermissions(id) {
  return axios.get(`/users/${id}/permissions`)
}

axios.all([getUser(1), getPermissions(1)])
  .then(axios.spread((userRes, permRes) => {
    console.log('用户信息:', userRes.data)
    console.log('权限信息:', permRes.data)
  }))

4. 取消请求

通过CancelToken取消请求，避免组件卸载后仍执行回调：

export default {
  data() {
    return {
      cancelTokenSource: null
    }
  },
  methods: {
    fetchData() {
      // 取消之前的请求（如果有）
      if (this.cancelTokenSource) {
        this.cancelTokenSource.cancel('操作被用户取消')
      }
      this.cancelTokenSource = axios.CancelToken.source()

      request({
        url: '/data',
        method: 'get',
        cancelToken: this.cancelTokenSource.token
      }).then(response => {
        console.log(response.data)
      }).catch(thrown => {
        if (axios.isCancel(thrown)) {
          console.log('请求已取消:', thrown.message)
        } else {
          console.error('请求错误:', thrown)
        }
      })
    }
  },
  beforeDestroy() {
    // 组件销毁时取消请求
    if (this.cancelTokenSource) {
      this.cancelTokenSource.cancel('组件销毁，取消请求')
    }
  }
}

四、Vue与axios的高级集成

1. 结合Vuex管理全局状态

在Vuex中封装axios请求，实现全局数据管理：

// store/modules/user.js
import request from '@/utils/request'

const state = {
  users: [],
  loading: false
}

const mutations = {
  SET_USERS(state, users) {
    state.users = users
  },
  SET_LOADING(state, loading) {
    state.loading = loading
  }
}

const actions = {
  fetchUsers({ commit }) {
    commit('SET_LOADING', true)
    return new Promise((resolve, reject) => {
      request.get('/users')
        .then(response => {
          commit('SET_USERS', response.data)
          commit('SET_LOADING', false)
          resolve(response.data)
        })
        .catch(error => {
          commit('SET_LOADING', false)
          reject(error)
        })
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

在组件中使用：

export default {
  computed: {
    ...mapState('user', ['users', 'loading'])
  },
  methods: {
    ...mapActions('user', ['fetchUsers'])
  },
  created() {
    this.fetchUsers()
  }
}

2. 封装自定义Hook（Vue 3 Composition API）

在Vue 3中，可使用Composition API封装axios逻辑：

// hooks/useRequest.js
import { ref } from 'vue'
import request from '@/utils/request'

export function useRequest(url, method = 'get', initialData = null) {
  const data = ref(initialData)
  const loading = ref(false)
  const error = ref(null)

  const fetchData = async (params = {}, requestData = {}) => {
    loading.value = true
    error.value = null
    try {
      const response = await request({
        url,
        method,
        params,
        data: method !== 'get' ? requestData : undefined
      })
      data.value = response.data
    } catch (err) {
      error.value = err
    } finally {
      loading.value = false
    }
  }

  return {
    data,
    loading,
    error,
    fetchData
  }
}

在组件中使用：

import { useRequest } from '@/hooks/useRequest'

export default {
  setup() {
    const { data: users, loading, fetchData } = useRequest('/users', 'get', [])

    fetchData()

    return {
      users,
      loading
    }
  }
}

五、错误处理与最佳实践

1. 统一错误处理

在axios拦截器中统一处理错误，避免重复代码：

// 在request.js中
service.interceptors.response.use(
  response => response,
  error => {
    if (error.response) {
      // 服务器返回了错误状态码
      switch (error.response.status) {
        case 401:
          // 处理未授权
          break
        case 404:
          // 处理资源不存在
          break
        case 500:
          // 处理服务器错误
          break
        default:
          console.error('未知错误:', error.response.data)
      }
    } else if (error.request) {
      // 请求已发出但没有收到响应
      console.error('无响应:', error.request)
    } else {
      // 设置请求时出错
      console.error('请求错误:', error.message)
    }
    return Promise.reject(error)
  }
)

2. 请求重试机制

实现自动重试失败的请求：

function retryRequest(config, retries = 3) {
  return new Promise((resolve, reject) => {
    const request = () => {
      axios(config)
        .then(resolve)
        .catch(error => {
          if (retries