【超好用请求封装】—— umirequest配置通用请求处理

前言：目前没有发现有vue项目中使用umi-request的例子，用这个请求库的多为react项目，umi本身和dva也都是react周边的工具。

---

• utils/request.js：配置通用请求中的异常处理和默认参数

/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import { extend } from 'umi-request';
import { notification } from 'antd';

// import { history } from 'umi';

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};
/**
 * 异常处理程序
 */

const errorHandler = (error) => {
  const { response } = error;

  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const { status, url } = response;
    notification.error({
      message: `请求错误 ${status}: ${url}`,
      description: errorText,
    });
  } else if (!response) {
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }

  return response;
};
/**
 * 配置request请求时的默认参数
 */
const request = extend({
  errorHandler,
  // 默认错误处理
  crossOrigin: true, // 开启CORS跨域
  // 默认错误处理
  // credentials: 'include', // 默认请求是否带上cookie
});
// 中间件，对请求前添加 userId token 的基础参数
request.interceptors.request.use((url, options) => {
  const newOptions = { ...options };
  if (!(newOptions.data instanceof FormData)) {
    newOptions.data = {
      ...newOptions.data,
      userId: '00000001',
      token: 'adsadsafcdscd',
    };
  } else {
    newOptions.data.append('userId', '1');
    newOptions.data.append('token', 'adsadsafcdscd');
  }
  return {
    url: `${url}`,
    options: { ...newOptions },
  };
});

export default request;

• services/url.js：设置url常量，配置请求固定前缀

let baseIp;
if (!window.location.origin) {
  // 兼容IE，IE11版本下location.origin为undefined
  window.location.origin = `${window.location.protocol}//${window.location.hostname}${
    window.location.port ? `:${window.location.port}` : ''
  }`;
} else {
  baseIp = window.location.origin;
  // baseIp = 'http://115.160.91.209:8071';
}
const IP = `${baseIp}/zjh`; // 有项目引用
// const ipPort = '192.168.31.114:9010'; // ip+port

/**
 * 运维监控大屏
 */
const MACHINESTATE = `${IP}/operational/machineState`; // 运维监控机器数情况接口

const LOGIN = `${IP}/users/login`; // 登录
const CURRENTUSER = `${IP}/users/currentUser`; // 登录

export {
  LOGIN,
  CURRENTUSER,
  MACHINESTATE
};

• services/oprational.js、login.js：使用封装好的request方法设置功能模块的接口　　

import request from '@/utils/request';
import {
  MACHINESTATE,
} from './url';

// 运维监控机器数情况接口
export async function getMachineState(params) {
  return request(MACHINESTATE, {
    method: 'POST',
    data: params,
  });
}

import request from '@/utils/request';
import {LOGIN} from './url'
export async function fakeAccountLogin(params) {
  return request(LOGIN, {
    method: 'POST',
    data: params,
  });
}
export async function getFakeCaptcha(mobile) {
  return request(`/api/login/captcha?mobile=${mobile}`);
}

---

注：转载请注明出处