react ant-design-pro项目搭建（二）——开发生产环境配置

旧城等待， 2022-11-25 00:38 744阅读 0赞

# react [ant-design-pro][]项目搭建——开发生产环境配置 #

1.在config中创建env.js

做如下配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]

2.找到request.js 修改配置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1][]

对url请求进行拦截处理，代码如下 ：

/**
     * request 网络请求工具
     * 更详细的 api 文档: https://github.com/umijs/umi-request
     */
    import { extend } from 'umi-request';
    import { notification } from 'antd';
    import configs from '../../config/env';
    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,
      // 默认错误处理
      credentials: 'include', // 默认请求是否带上cookie
    });
    
    // request拦截器, 改变url 或 options.
    request.interceptors.request.use(async (url, options) => {
    
     /* let c_token = localStorage.getItem("x-auth-token");
      if (c_token) {
        const headers = {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'x-auth-token': c_token
        };
        return (
          {
            url: url,
            options: { ...options, headers: headers },
          }
        );
      } else {
        const headers = {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
          'x-auth-token': c_token
        };
        return (
          {
            url: url,
            options: { ...options },
          }
        );
      }*/
      if(options.mock){//此处添加了是否为mock请求的判断，是为了开发中可能有的接口还未开发完时，可以使用mock数据，同时不会影响其它接口中的调用
        delete options.mock;
      }else{
        url = configs[process.env.API_ENV].API_SERVER+url;//获取配置api地址
      }
      return (
        {
          url: url,
          options: { ...options },
        }
      );
    
    })
    
    // response拦截器, 处理response
    request.interceptors.response.use((response, options) => {
     // let token = response.headers.get("x-auth-token");
      //if (token) {
      //  localStorage.setItem("x-auth-token", token);
      //}
      return response;
    });
    export default request;

这样开发生产环境就配置好了,下一章讲如何配置接口并在项目中使用

上一章: [react ant-design-pro项目搭建\*（一）——脚手架准备][react ant-design-pro]

下一章：[react ant-design-pro项目搭建（三）——调用接口实现与服务器的交互][react ant-design-pro 1]

[ant-design-pro]: https://www.cnblogs.com/Cindy-Zhang44/p/9298584.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: /images/20221124/4691d498db294cf4b9086cf7f1d6c26a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: /images/20221124/f38fed9974df41a2b3e8a648a5f22a27.png
[react ant-design-pro]: https://blog.csdn.net/SHUIYI_24/article/details/107846363
[react ant-design-pro 1]: https://blog.csdn.net/SHUIYI_24/article/details/107905049