vue2封装request

### Vue2 中封装 Axios 请求

#### 创建请求封装模块

在 `src` 目录下新建 `utils` 文件夹，在其中创建名为 `request.js` 的文件。此文件用于封装 Axios 实例并设置默认参数。

// src/utils/request.js
import axios from 'axios';

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // api base_url
  timeout: 5000 // 请求超时时间
});

// 请求拦截器
service.interceptors.request.use(
  config => {
    // 在发送请求之前做些什么
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  response => {
    const res = response.data;
    // 如果返回的状态码不是200，则认为是失败的
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error'
      });
      return Promise.reject(new Error(res.message || 'Error'));
    } else {
      return res;
    }
  },
  error => {
    console.log('err' + error); // 输出错误日志到控制台
    Message({
      message: error.message,
      type: 'error'
    });
    return Promise.reject(error);
  }
);

export default service;

上述代码展示了如何导入 Axios 并配置基本选项，如基础 URL 和超时时间[^2]。还设置了请求和响应拦截器来处理全局逻辑，比如统一显示消息提示框或记录错误信息。

#### 使用封装后的 Request 模块

可以在组件或其他地方通过如下方式调用：

// 组件内使用
import request from '@/utils/request';

export default {
  name: "ExampleComponent",
  methods: {
    fetchData() {
      request.get('/api/data')
        .then(response => {
          this.items = response.result;
        })
        .catch(err => {
          console.error("获取数据失败", err);
        });
    }
  }
};

这里展示了一个简单的 GET 请求例子，实际应用中可以根据需求调整方法名和其他细节[^3]。