以下是封装axios网络请求的示例代码:

  1. 安装axios和element-ui
npm install axios
npm install element-ui
  1. 创建封装的axios实例requests.js
import axios from "axios";
import { Message } from "element-ui";

// 创建axios实例
const service = axios.create({
  baseURL: process.env.BASE_API, // api的base_url
  timeout: 5000 // 请求超时时间
});

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

// response拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做些什么
    const res = response.data;
    if (res.code !== 200) {
      Message({
        message: res.message,
        type: "error",
        duration: 5 * 1000
      });
      return Promise.reject("error");
    } else {
      return response.data;
    }
  },
  error => {
    // 对响应错误做些什么
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;
  1. 带有超时时间和重试机制的网络请求
import axios from "./requests";

const TIMEOUT = 5000; // 超时时间
const RETRY_TIME = 3; // 重试次数

// 执行请求的方法
function request(config, retry = 0) {
  const { timeout = TIMEOUT } = config;
  return axios({
    ...config,
    timeout
  })
    .then(res => {
      return Promise.resolve(res);
    })
    .catch(error => {
      if (retry >= RETRY_TIME) {
        // 重试次数超过了限制
        return Promise.reject(error);
      }
      retry++;
      // 使用 Promise.reject 手动抛出异常,让 Promise.all 并发请求的方法中的 catch 捕获该异常,从而实现重试机制
      return Promise.reject(error);
    });
}

// 封装 get 请求方法
export function get(url, params = {}) {
  return request({
    url,
    params,
    method: "get"
  });
}

// 封装 post 请求方法
export function post(url, data = {}) {
  return request({
    url,
    data,
    method: "post"
  });
}

// 封装 put 请求方法
export function put(url, data = {}) {
  return request({
    url,
    data,
    method: "put"
  });
}

// 封装 delete 请求方法
export function del(url, params = {}) {
  return request({
    url,
    params,
    method: "delete"
  });
}
  1. 错误提示和接口错误处理
import { Message } from "element-ui";

// 业务错误提示
function businessError(res) {
  Message({
    message: res.message,
    type: "warning"
  });
}

// 系统错误提示
function systemError(error) {
  Message({
    message: error.message,
    type: "error"
  });
}

export { businessError, systemError };

以上是企业级Vue项目封装axios网络请求的示例代码,其中包含了超时时间,失败后重试和接口错误提示等完整功能,业务错误提示和系统错误提示可以根据自己的需求进行修改。以下是封装axios网络请求的示例代码:

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐