实战技巧（后续持续补充）

项目中的遇到的问题

问题

两个数组A=[],B=[]每个数组长度不确定A内的每个元素需要向B内的每个元素发送一次请求每个请求必须等待上个请求执行完毕后再执行
最后执行完毕提示操作成功
第一个请求使用输入的评论之后的使用随机生成的评论

Vue重构项目之实战技巧篇

思考

处理同步/异步问题async/await肯定是首选没毛病

双重for循环应该可行？promise.all/promise.race应该可行？还是async/await

想起来可能简单，你可以动手试试能否给出你想象中的答案！！！

实践

如果是使用jq的$.ajax那么就很容易了 $.ajax有个配置项叫做async可以理解为请求锁

async 默认是 true，即为异步方式， $. a j a x 执行后，会继续执行 a j a x 后面的脚本，直到服务器端返回数据后，触发 .ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发$ .ajax执行后，会继续执行ajax后面的脚本，直到服务器端返回数据后，触发.ajax里的success方法，这时候执行的是两个线程。
async 设置为 false，则所有的请求均为同步请求，在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

var temp;
$.ajax({
  async: false,
  type : "post",
  url : defaultpostdata.url,
  datatype : 'json'，
  success : function(data) {
     temp=data;
  }
});
alert(temp);

这个ajax请求为同步请求，在没有返回值之前，alert(temp)是不会执行的。

如果async设置为：true，则不会等待ajax请求返回的结果，会直接执行ajax后面的语句

然而这次重构我抛弃了jq,必须另寻出路。

// 比方说A=[{userId:a1},{userId:a2},{userId:a3}] B=[{id:b1},{id:b2},{id:b3}]
// A里面的每个元素需要逐个像B里面的元素发送请求
// this.dialogOtherData.data相当于A   this.choseList相当于B
var comment = [
  '拍的真好看', '666', '哪里人', '呵呵', '私聊我', '有人啊', '有的', '找个人一起啊', '来了老弟!'...
]
async handelLoop() {
  var total = this.dialogOtherData.data.length * this.choseList.length
  for (let i = 0; i < this.dialogOtherData.data.length; i++) {
    var commentData = {}
    commentData.userId = this.dialogOtherData.data[i].userId
    await this.getData(commentData, i, total)
  }
}
async getData(commentData, i, total) {
  var random = Math.random()
  for (let j = 0; j < this.choseList.length; j++) {
    if (this.dialogOtherData.title === '评论') {
      commentData.dynamicId = this.choseList[j].id
      commentData.type = 1
      if (i === 0) {
        commentData.content = this.inputVal
      } else {
        var two = j * Math.random().toString().substr(3, 1)
        commentData.content = comment[+random.toString().substr(2, 2) + (+two)]
      }
      await dynamicOperation(commentData).then(res => {
        if (res.succeed) {
          if ((i + 1) * (j + 1) === total) {
            this.close()
            this.$message.success('操作成功')
          }
        }
      })
    }
  }
}

Vue里为什么axios无法请求三方API

request.js里不要这么写axios.defaults.withCredentials = true // 让ajax携带cookie 其他接口需要就配置在service里,不要全局默认就Ok了不需要配置代理什么的就能搞定

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API2, // url = base url + request url
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

判断两数组是否相同

// 判断数组是否相同
scalarArrayEquals(array1, array2) {
  return array1.length === array2.length && array1.every(function(v, i) { return v === array2[i] })
}

element表格提示显示过长问题

在公共样式里面设置index.css一下

// 表格过长显示问题
.el-tooltip__popper {
  max-width: 400px;
  line-height: 180%;
}

省心小插件

1.element-china-area-data

简介

element-china-area-data地址几行代码实现省市区三级联动

Vue重构项目之实战技巧篇

安装

npm install element-china-area-data -S

使用

import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'

服务端用法：

const { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } = require('element-china-area-data/dist/app.commonjs')

provinceAndCityData是省市二级联动数据（不带“全部”选项）
regionData是省市区三级联动数据（不带“全部”选项）
provinceAndCityDataPlus是省市区三级联动数据（带“全部”选项）
regionDataPlus是省市区三级联动数据（带“全部”选项）
"全部"选项绑定的value是空字符串""
CodeToText是个大对象，属性是区域码，属性值是汉字用法例如：CodeToText['110000']输出北京市
TextToCode是个大对象，属性是汉字，属性值是区域码用法例如：TextToCode['北京市'].code输出110000,TextToCode['北京市']['市辖区'].code输出110100,TextToCode['北京市']['市辖区']['朝阳区'].code输出110105

<template>
  <div id="app">
    <el-cascader
      size="large"
      :options="options"
      v-model="selectedOptions"
      @change="handleChange">
    </el-cascader>
  </div>
</template>
 
<script>
  import { regionData } from 'element-china-area-data'
  export default {
    data () {
      return {
        options: regionData,
        selectedOptions: []
      }
    },
 
    methods: {
      handleChange (value) {
        console.log(value)
      }
    }
  }
</script>

2.viewerjs

简介

git地址一款功能强大配置简单的图片预览插件

Vue重构项目之实战技巧篇

安装

npm install v-viewer --save

使用

main.js内引用并注册调用

//main.js
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'

Vue.use(Viewer);
//zIndex默认是2015
Viewer.setDefaults({
  Options: { 'zIndex': 2099,"inline": true, "button": true, "navbar": true, "title": true, "toolbar": true, "tooltip": true, "movable": true, "zoomable": true, "rotatable": true, "scalable": true, "transition": true, "fullscreen": true, "keyboard": true, "url": "data-source" }
});

代码中使用xxx.vue

<template>
    <div class="content">
        <h1>Viewer图片预览插件</h1>
        <viewer :images="imgs">
            <img v-for="src in imgs" :src="src.url" :key="src.title">
        </viewer>
   </div>
</template>
<script>
export default {
  data () {
    return {
      imgs: [
       {
          url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg',
          title: '图片1'
        },
        {
          url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg',
          title: '图片2'
        }
      ]
    }
  },
}
</script>