Vue项目中引入Axios实现方式

npm install axios
# 或者
yarn add axios

<script>
import axios from 'axios';

export default {
  data() {
    return {
      info: null
    };
  },
  mounted() {
    axios.get('https://api.example.com/data')
      .then(response => {
        this.info = response.data;
      })
      .catch(error => {
        console.error("There was an error!", error);
      });
  }
};
</script>

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

// 将 axios 绑定到 Vue 原型上，方便全局使用
Vue.prototype.$axios = axios;

// 配置 axios 默认的根路径
axios.defaults.baseURL = 'https://api.example.com';

// 可以在此处配置请求头、超时等
axios.defaults.headers.common['Authorization'] = 'Bearer token';
axios.defaults.timeout = 10000;

new Vue({
  render: h => h(App),
}).$mount('#app');

# .env 文件中设置
VUE_APP_API_URL=https://api.example.com

axios.defaults.baseURL = process.env.VUE_APP_API_URL;

// 添加请求拦截器
axios.interceptors.request.use(config => {
  // 在请求发送之前做一些事情，比如添加 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  // 处理请求错误
  return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(response => {
  // 对响应数据做处理
  return response;
}, error => {
  // 处理响应错误
  if (error.response) {
    // 根据响应状态码进行错误处理
    switch (error.response.status) {
      case 401:
        console.error('Unauthorized access, redirecting to login');
        // 可以在此处跳转到登录页或其他处理逻辑
        break;
      case 404:
        console.error('Resource not found');
        break;
      default:
        console.error('An unexpected error occurred');
    }
  } else {
    console.error('Network error, please try again later');
  }
  return Promise.reject(error);
});

import axios from 'axios';

// 创建 axios 实例
const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_URL,
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 在 Vue 组件中使用
export default {
  methods: {
    fetchData() {
      apiClient.get('/endpoint')
        .then(response => {
          console.log(response.data);
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
};