1. 取消axios請求

• 業(yè)務(wù)場景：單頁應(yīng)用瞻鹏，希望退出當(dāng)前頁的時候盗忱，取消請求
• 官網(wǎng)： 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) 多次上傳同一張圖片按价，且避免重復(fù)點擊觸發(fā)多次相冊

onInputClick(event) {
    // 可二次上傳同一張圖片
    event.target.value = null;
    // 避免連續(xù)點擊時重復(fù)打開相冊
    if (photoLoading) {
      event.preventDefault();
    }
    photoLoading = 1;
    setTimeout(function() {
      photoLoading = 0;
    }, 500);
  }

(2) <input type="file" accept="image/jpg,image/jpeg,image/png"/>點擊上傳圖片，會導(dǎo)致部分安卓設(shè)備黑屏并死機

• 原因：不支持input的accept屬性
• 方案：去除accept屬性<input type="file" />，目前遇到該問題的有： 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 設(shè)置iphonex 底部安全區(qū)域

  $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. 解決瀏覽器不支持跨域請求，控制臺執(zhí)行：

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