当前位置：首页 > VUE

vue实现axio请求

2026-03-09 09:59:08VUE

安装 Axios

在 Vue 项目中安装 Axios，可以通过 npm 或 yarn 进行安装：

npm install axios
# 或
yarn add axios

全局引入 Axios

在 main.js 或 main.ts 中全局引入 Axios，并挂载到 Vue 实例上：

import Vue from 'vue'
import axios from 'axios'

Vue.prototype.$axios = axios

发起 GET 请求

在 Vue 组件中发起 GET 请求：

this.$axios.get('/api/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

发起 POST 请求

在 Vue 组件中发起 POST 请求：

this.$axios.post('/api/data', { key: 'value' })
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

配置请求拦截器

在全局配置请求拦截器，用于添加请求头或处理请求数据：

axios.interceptors.request.use(config => {
  config.headers.Authorization = 'Bearer token'
  return config
}, error => {
  return Promise.reject(error)
})

配置响应拦截器

在全局配置响应拦截器，用于统一处理响应数据或错误：

axios.interceptors.response.use(response => {
  return response.data
}, error => {
  return Promise.reject(error)
})

封装 Axios 实例

封装一个自定义的 Axios 实例，便于统一管理请求配置：

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
})

instance.get('/data')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.error(error)
  })

使用 async/await

在 Vue 组件中使用 async/await 处理异步请求：

vue实现axio请求

async fetchData() {
  try {
    const response = await this.$axios.get('/api/data')
    console.log(response.data)
  } catch (error) {
    console.error(error)
  }
}