前端日常踩坑随记

• 20210512   ?. 和 ??的用法

　　这种写法在判断空值时，很好用 

1. ?. 

let res = obj?.data?.list

// 等价 

let res = obj && obj.data && obj.data.list

2. ??  相当于设置默认值

console.log(1 ?? "xx") //1
console.log(0 ?? "xx") //0
console.log(null ?? "xx") //xx
console.log(undefined ?? "xx") //xx
console.log(-1 ?? "xx") //-1
console.log("" ?? "xx") 

•  20210527 async await 处理异常的写法，挺好用的

// 处理异常信息
const awaitWrap = (promise) => {
   return promise.then((res) => [null, res]).catch((err) => [err, null]);
};
const [err, res] = await awaitWrap(save(params));

 3. 方法中返回一个promise时，调用的时候要用try catch包裹下，不然方法返回错误时，会报错  Error in v-on handler (Promise/async): "false" 

validateMechod() {
    const _this = this;
    return new Promise(function (resolve, reject) {
       _this.$refs.form.validate((valid) => {
        if (!valid) {
          reject(false);
        } else {
          resolve(_this.form);
        }
      });
    });
} 
   // try{
　　//　　this.validateMechod()

　　//} catch(error){
　　//　　console.error(error)
   //}

 　　4.el-tree 懒加载更新当前节点数据，配合 default-expanded-keys属性，实现效果

<!--tree部分-->
<el-tree
      ref="tree"
      :props="props"
      :load="loadNode"
      :check-on-click-node="true"
      :expand-on-click-node="false"
      :default-expanded-keys="expandedKeys"
      node-key="id"
      lazy
      highlight-current
      @node-click="handleNodeClick"
      @check-change="handleCheckChange"
    >
    </el-tree>


/**
 * 刷新当前节点
 * pid: 当前节点的父级唯一标识节点
 */
refreshTreeNode(pid) {
  let node = this.$refs.tree.getNode(pid)
  if (node) {
    node.loaded = false
    node.expand() // 主动调用展开节点方法，重新查询该节点下的所有子节点
  }
}

 // 保持当前节点展开
 async keepNodeExpand() {
   currentExpandKeys = this.$refs['orgTreeRef'].getCurrentKey()
   this.$nextTick(()=>{
      this.expandedKeys = [currentExpandKeys]
    })
 },


    

 5. umi 框架搭建的react项目，在.umirc.ts 文件中，配置代理时，因为代理的地址，证书不安全，导致一直代理不成功，最后才发现，还需要设置 secure 属性为false，不校验证书才可以。

import { defineConfig } from '@umijs/max';

export default defineConfig （{
  proxy: {
    '/api': {
      'target': 'https://www.tests123.com/',
      'secure': false, // 安全校验
      'changeOrigin': true,
      'pathRewrite': { '^/api' : '' },
    },
  },
}）    

6. 最近发现有个vue项目，接口要鉴权，加gateway网关前缀改造，过程中出现一个问题，axios 请求处于 cancel 状态，然后浏览器总是不停的刷新。postman调用接口，是正常的，取消了网关前缀也是正常的。前后端排查了很久，最后发现是加了网关后请求地址，跟后端的对不上导致的。

顺便记录下，可能导致 axios接口，不停cancel，页面不停刷新 的原因：

1. 网络连接不稳定或中断：请确保您的设备已连接到互联网，并且网络连接稳定。您可以尝试使用其他网络连接来测试是否存在网络问题。

2. 请求 URL 不正确：请检查您的请求 URL 是否正确，包括协议、域名和路径等。如果 URL 不正确，则 Axios 将无法访问该资源。

3. 请求头不正确：请确保您的请求头包含正确的信息，例如 User-Agent、Accept 等。如果请求头不正确，则 Axios 将无法处理请求。

4. 服务器响应错误：如果您的服务器返回了错误的响应，则 Axios 将无法处理请求并返回数据。请检查您的服务器端代码，以确定是否存在任何错误。

5. 拦截器问题：如果您使用了拦截器，可能会阻止 Axios 发送请求。请检查您的拦截器代码，以确定是否存在任何问题。

6. 代码逻辑问题：如果您的代码逻辑有问题，可能会导致请求被多次取消或重新发起。请检查您的代码逻辑，以确定是否存在任何问题。