Vue如何集成第三方库？以axios为例该如何封装？

axios

npm install axios

src/utils

request.js

import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL, // 设置基础路径
  timeout: 5000, // 超时时间
});

export default service;

request.js

// 请求拦截器
service.interceptors.request.use(
  config => {
    const token = localStorage.getItem('token');
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    if (res.code !== 200) {
      // 可以在这里统一提示错误信息
      console.error(res.message || 'Error');
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.error('网络异常', error);
    return Promise.reject(error);
  }
);

import request from '@/utils/request';

export default {
  methods: {
    async fetchData() {
      try {
        const res = await request.get('/api/some-data');
        console.log(res);
      } catch (error) {
        console.error('请求失败', error);
      }
    },
  },
};

const res = await request.post('/api/submit', { name: 'test' });

vue.config.js

.env

.env.development

VUE_APP_API_BASE_URL = "https://dev-api.example.com"

.env.production

VUE_APP_API_BASE_URL = "https://api.example.com"