问题总结

1. 取消axios请求

• 业务场景：单页应用，希望退出当前页的时候，取消请求
• 官网： https://github.com/axios/axios
• 方法：

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // handle error
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');

You can also create a cancel token by passing an executor function to the CancelToken constructor:

const CancelToken = axios.CancelToken;
let cancel;

axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    // An executor function receives a cancel function as a parameter
    cancel = c;
  })
});

// cancel the request
cancel();

Note: you can cancel several requests with the same cancel token.

2. input type=file 上传图片问题

(1) 多次上传同一张图片，且避免重复点击触发多次相册

onInputClick(event) {
    // 可二次上传同一张图片
    event.target.value = null;
    // 避免连续点击时重复打开相册
    if (photoLoading) {
      event.preventDefault();
    }
    photoLoading = 1;
    setTimeout(function() {
      photoLoading = 0;
    }, 500);
  }

(2) 点击上传图片，会导致部分安卓设备黑屏并死机

• 原因：不支持input的accept属性
• 方案：去除accept属性，目前遇到该问题的有： android 6.0.1

3. 获取元素距离屏幕顶部的高度

var mTop = document.getElementById('fff').offsetTop;
    //减去滚动条的高度
    var sTop =  window.pageYOffset  //用于FF
    || document.documentElement.scrollTop  
    || document.body.scrollTop  
    || 0;
    var result = mTop - sTop;

4. css 设置iphonex 底部安全区域

  $safeArea:34px;
  //iphoneX、iphoneXs
  @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    padding-bottom: $safeArea;
  }
 
  //iphone Xs Max
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {
    padding-bottom: $safeArea;
  }
  
  //iphone XR
  @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {
    padding-bottom: $safeArea;
  }

5. 解决浏览器不支持跨域请求，控制台执行：

open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/your name/MyChromeDevUserData/