Cacher is the code snippet organizer for pro developers

// 1： 动态获取 baseUrl

let baseURL;
if (window.location.host.startsWith('localhost')) {
  baseURL = 'https://dev.utcook.com';
} else {
  baseURL = window.location.origin;
}

// 2: axios 实例、请求拦截、响应拦截

import axios from 'axios';
import configs from '../configs';


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

/****** request拦截器==>对请求参数做处理 ******/
service.interceptors.request.use(config => {
    app.$vux.loading.show({
        text: '数据加载中……'
    });
 
    config.method === 'post'
        ? config.data = qs.stringify({...config.data})
        : config.params = {...config.params};
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
 
    return config;
}, error => {  //请求错误处理
    app.$vux.toast.show({
        type: 'warn',
        text: error
    });
    Promise.reject(error)
});


/****** respone拦截器==>对响应做处理 ******/
service.interceptors.response.use(
    response => {  //成功请求到数据
        app.$vux.loading.hide();
        //这里根据后端提供的数据进行对应的处理
        if (response.data.result === 'TRUE') {
            return response.data;
        } else {
            app.$vux.toast.show({  //常规错误处理
                type: 'warn',
                text: response.data.data.msg
            });
        }
    },
    error => {  //响应错误处理
        console.log('error');
        console.log(error);
        console.log(JSON.stringify(error));
 
        let text = JSON.parse(JSON.stringify(error)).response.status === 404
            ? '404'
            : '网络异常，请重试';
        app.$vux.toast.show({
            type: 'warn',
            text: text
        });
 
        return Promise.reject(error)
    }
);


// 把 axios 实例 export 出去
export default service;


//api.js 接口调用方式
import service from './request'
 
export const getPersonInfo = data => {
    return service({
        url: '/person_pay/getpersoninfo',
        method: 'post',
        data
    })
};


//index.vue 在组件中使用
import {getPersonInfo} from '../axios/api.js'
export default {
    created: async function () {
        const params = {
            card_no: '111'
        };
        let res = await getPersonInfo(params);
        console.log(res);
    }
}

// 3 登出
const logout = () => {
  console.log('登出');
  window.location.href = baseURL + '/logout';
};

// antd 中 Select 下拉菜单，动态加载后台数据，当滚动到底的时候就去请求下一页数据，如果没有新数据了就不再请求

handleSelectScroll = e => {
    e.persist();
    let target = e.target;
    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
      // 如果数据已经全部加载完成了，就不再请求
      if (this.state.productInfo.length !== this.totalProduct) {
        this.params.page += 1;
        iotService.listProductInfo(this.params).then(res => {
          if (res.status === 200 && res.data) {
            let newProductInfo = this.state.productInfo.concat(
              res.data.data.productInfo,
            );
            this.setState({ productInfo: newProductInfo });
          }
        });
      }
    }
  };
  
  <FormItem label="产品" {...formItemLayout}>
                {getFieldDecorator('product', {
                  rules: [
                    {
                      required: true,
                      message: '请选择一款产品',
                    },
                  ],
                })(
                  <Select
                    placeholder="请选择产品"
                    onPopupScroll={this.handleSelectScroll}
                  >
                    {productInfo.length > 0 &&
                      productInfo.map(product => (
                        <Option
                          key={product.productKey}
                          value={product.productKey}
                        >
                          {product.productName}
                        </Option>
                      ))}
                  </Select>,
                )}
              </FormItem>
  
  
  
  
  /**
 * 验证长度和特殊字符
 * 空字符串默认允许通过校验
 * rules: [
 *  {
 *    min: 4，// 最小长度
 *    max: 64, // 最大长度
 *    allowedChars: '*-.', // 允许的特殊字符
 *    lenMsg: '产品名称限制 2-15个字',
 *    charMsg: '产品名称由中文、英文字母、数字和下划线组成',
 *    allowChinese: false, // 如果允许中文，可以不配，不允许中文，指定为 false
 *  }
 * ]
 *
 * @param rule
 * @param value
 * @param callback
 * @returns {*}
 */
export const isStringValid = (rule, value = '', callback) => {
  if (value === '') {
    callback();
  } else {
    let newValue = value;
    if (rule.allowChinese !== false) {
      const chineseReg = /[^\x00-\xff]/g;
      newValue = value.replace(chineseReg, 'aa');
    }
    const min = rule.min;
    const max = rule.max;
    const len = newValue.length;

    const reg = new RegExp(`[A-Za-z0-9${rule.allowedChars}]`, 'g');
    const replacedValue = newValue.replace(reg, '');
    if (replacedValue.length > 0) {
      callback(rule.charMsg);
    } else if (len < min || len > max) {
      callback(rule.lenMsg);
    } else {
      callback();
    }
  }
};

<FormItem label="DeviceName" {...formItemLayout}>
                {getFieldDecorator('deviceName', {
                  rules: [
                    {
                      validator: isStringValid,
                      min: 4,
                      max: 32,
                      allowedChars: '-.@:',
                      allowChinese: false,
                      charMsg:
                        'DeviceName 只能包含英文字母、数字、连字符、下划线、@符号、点号、英文冒号',
                      lenMsg: 'DeviceName长度为4-32个字符',
                    },
                  ],
                })(<Input placeholder="请输入DeviceName" allowClear />)}
              </FormItem>