react+umi发送请求request初始配置及使用

我们用的是umi+react ,自带了封装好的request,使用起来很方便,只需要简单设置下就可以.

1.设置

// 请求token
const getToken = async (url, forceLogin) => {
  const token = localStorage.getItem(`tokens`);
  if (!token || forceLogin) {
    if (REACT_ENV !== "production") {
      // 开发环境，自动登录
      const userInfo: LoginParamsType = {
        username: "用户名",
        password: "密码"
       
      }

      // 如果首次没有token或者登录失效且不是登录接口，那么就请求登录接口
      if (url && url.indexOf(/sso/auth/token) == -1 && !num) {
        num++;
        const response = await fakeAccountLogin(userInfo);
        const { code, data, msg } = response || {}
        if (code == 0) {
          localStorage.clear()
          localStorage.setItem(`dh-authority`, JSON.stringify(data));
          window.location.reload();
        }
      }
    } else {
      // 生产环境登录失效跳转到登录页面,由于是嵌套项目,需要通过top.window.postMessage跳转
      top.window.postMessage(
        {
          url: `/user/login`,
        },
        location.origin
      );
    }
  }

}

export const request: RequestConfig = {
  errorHandler: (error: any) => {
    const { response, data } = error;
    if (response && response.status) {
      if (!hasTokenError) {
        if (response.status === 401) {
          hasTokenError = true;
          getToken(response.url, true)
        }
        message.destroy()
        message.error(Service Unavailable)
      }
      return response
    }
    if (!response && !data) {
      message.error(出错啦...)
    } else if (data) {
      message.error(data?.errMsg || data?.msg)
    }
  },
  requestInterceptors: [requestInterceptor],
  responseInterceptors: [responseInterceptors]
};

const requestInterceptor = async (url, options) => {
  hasTokenError = false
  getToken(url, false);

  const tokens = getAuthority(tokens) || 
  if (tokens) {
    const headers = {
      token: tokens?.accessToken,
      Content-Type: application/json,
      Accept: application/json,
    }
    return {
      url: url,
      options: { ...options, headers: headers },
    }
  } else {
   message.error(出错啦!)
  }
};

const responseInterceptors = async (response: Response, options: RequestOptionsInit) => {
  let result
  
  if (options.responseType === blob) {
    return response
  }
  const data = await response.clone().json()
  result = response
  if (response.ok && data?.code !== 0 && data?.code !== 0 && options.url !== /api/else/check_stock) {
    result = response
    message.error(data.errMsg || data.msg || data.message)
    // 统一处理报错
  }
  return result
}

2.使用

import { ENV_URL } from @/utils/env;
let url = /api/
import { request } from umi;

export async function getStocks(params?: any): Promise<any> {
  return request(`${url}research/stock/stock_list`, {
    method: post,
    data: params,
  })
}

export async function getInfo(params: any): Promise<any> {
  return request(`${url}credit/company/baseInfo`, {
    method: get,
    params,
  });
}