实例与方法

数据共享

小程序页面间共享数据的方法：cookie、后台传递、闭包、全局变量；vue中还有vuex、根实例数据。闭包的使用方法如下：

let cache = {}
let cacheSettingApi = (apiName, refresh = false) => {
  if (apiName in cache && !refresh) {
    return cache[apiName]
  }
  cache[apiName] = settingApi[apiName]()
  return cache[apiName]
}
module.exports = cacheSettingApi

以上cache就可以在页面间共享使用。

对象合并

对象合并Object.assign(newObj,user,page);；合并是将后面的对象合并到第一个里面，属性相同的话后面的覆盖前面的，合并后后面的对象不变，第一个对象的值会发生改变，实际上就是修改第一个对象的值。

token统一验证

对于token校验失败跳转登录页面的实现方式是：token校验失败后，后端返回统一错误码，前端通过响应拦截、路由守卫、接口封装等方式统一处理该错误场景，然后跳转到登录页面。

请求之前和请求之后的拦截处理代码-主要在于token失效之后取消剩余请求部分

import axios from 'axios'
import {baseURL} from '../config/index'

let instance = axios.create({
  baseURL: baseURL,
  withCredentials: true
})
let CancelToken = axios.CancelToken
let cancelList = []
let cancelPending = () => {
  for (let i in cancelList) {
    cancelList[i].cancel()
  }
  cancelList = []
}
let cancelDuplicatePending = (config) => {
  for(let p in cancelList){
    if(cancelList[p].url === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
      cancelList[p].cancel(); //执行取消操作
      cancelList.splice(p, 1); //把这条记录从数组中移除
    }
  }
}
instance.interceptors.request.use(config => {
  cancelDuplicatePending(config)
  config.cancelToken = new CancelToken(c => {
    cancelList.push({
      url: config.url + '&' + config.method,
      cancel: c
    })
  })
  if (sessionStorage.getItem('token')) {
    config.headers.Authorization = `Bearer ${sessionStorage.getItem('token')}`
  }
  return config
}, err => {
  return Promise.reject(err)
})
instance.interceptors.response.use(res => {
  let data = res.data
  if (data.code !== 200 && data.code !== 0) {
    return Promise.reject(res.data)
  } else {
    return res
  }
}, err => {
  if (err.response.status === 500) {
    cancelPending()
  } else if (err.response.status === 401 || err.response.status === 422) {
    cancelPending()
    sessionStorage.clear()
  }
  return Promise.reject(err.response)
})
export default instance

与或非优先级

！> && > ||

获取dom元素的位置信息getBoundingClientRect

getBoundingClientRect 获取信息内容

{
    width: 1000
    height: 148
    left: 200
    right: 1200
    top: 153
    bottom: 301
    x: 200
    y: 153
}

普通js使用方式很简单 document.getElementById("myId").getBoundingClientRect()
vue中有两种使用方式，$refs 和 event.target

let myDiv = this.$refs.p_1  // 赋值给了普通变量
myDiv[0].getBoundingClientRect()

let div = event.target; // 这里就是获取到的dom元素
div.getBoundingClientRect()