【超好用請求封裝】—— umi-request配置通用請求處理

前言：目前沒有發現有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}`);
}

---

注：轉載請注明出處