vue axios请求

在 Vue.js 中使用 Axios 发送 HTTP 请求，可以按照以下步骤进行：

1. 安装 Axios

可以使用 npm 或 yarn 安装 Axios。

npm install axios

或者

yarn add axios

2. 在 Vue 组件中引入 Axios

在需要使用 Axios 的组件中，可以通过以下方式引入 Axios：

import axios from 'axios';

3. 发送请求

使用 Axios 发送请求时，可以通过以下方式进行：

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

以上代码是一个 GET 请求示例，其中 `/api/user` 是请求的 URL。Axios 还支持 POST、PUT、DELETE 等请求方法。

4. 使用 Axios 的拦截器

Axios 提供了拦截器，可以在发送请求或响应返回时进行一些处理。例如，可以在请求头中添加 token，或在响应中统一处理错误信息。

// 在请求发送前添加 token 到请求头
axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

// 在响应中统一处理错误信息
axios.interceptors.response.use(response => {
  return response;
}, error => {
  if (error.response.status === 401) {
    // 跳转到登录页面
    router.push('/login');
  } else {
    // 统一处理其他错误信息
    console.log(error);
  }
});

以上代码是一个拦截器示例，其中请求发送前会从 localStorage 中获取 token 并添加到请求头中，响应返回时会统一处理错误信息。