当前位置：首页 > VUE

vue实现axio请求

2026-01-17 04:57:19VUE

安装 Axios

在 Vue 项目中安装 Axios，可以通过 npm 或 yarn 进行安装。打开终端并运行以下命令：

npm install axios

或

yarn add axios

引入 Axios

在需要使用 Axios 的组件或文件中，引入 Axios：

import axios from 'axios';

发起 GET 请求

使用 Axios 发起 GET 请求获取数据：

axios.get('https://api.example.com/data')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

发起 POST 请求

使用 Axios 发起 POST 请求发送数据：

axios.post('https://api.example.com/data', { key: 'value' })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

全局配置 Axios

可以在项目的入口文件（如 main.js）中配置 Axios 的全局默认值：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

封装 Axios 实例

为了更好地管理请求，可以封装一个 Axios 实例：

const api = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: { 'X-Custom-Header': 'foobar' }
});

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

拦截请求和响应

可以使用拦截器在请求或响应被处理前做一些操作：

axios.interceptors.request.use(
  config => {
    console.log('Request sent');
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

axios.interceptors.response.use(
  response => {
    console.log('Response received');
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

处理并发请求

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

axios.all([
  axios.get('https://api.example.com/data1'),
  axios.get('https://api.example.com/data2')
])
.then(axios.spread((response1, response2) => {
  console.log(response1.data, response2.data);
}))
.catch(error => {
  console.error(error);
});

取消请求

可以使用 CancelToken 取消请求：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://api.example.com/data', {
  cancelToken: source.token
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  if (axios.isCancel(error)) {
    console.log('Request canceled', error.message);
  } else {
    console.error(error);
  }
});

source.cancel('Operation canceled by the user.');

vue实现axio请求