前端笔记-Vue cli中使用axios后JavaScript变量传输给vue变量要注意的地方

目录

 

 

axios.all中的注意事项

为什么要采用全局的JavaScript变量给vue变量

---

 

 

axios.all中的注意事项

如下的请求：

methods:{

      getData(){

        axios.all([

          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          })),
          axios.post('/xxxxxxxxxx', qs.stringify({
            "xxxxxxxxxx": "xxxxxxxxxx",
            "xxxxxxxxxx": "xxxxxxxxxx"
          }))  
        ]).then(axios.spread(function (v1, v2, v3, v4, v5, v6, v7, v8){

          tempArray.length = 0;
          tempArray.push(v1.xxxxxxxxxx);
          tempArray.push(v2.xxxxxxxxxx);
          ......
          ......
        }))

         this.xxxxx= tempArray;
      }

这里要注意的地方！在then后不能采用this.vue中的变量，不然会报这样的错误！

vue cli Cannot read property 'xxxx' of null

所以得用一个JavaScript变量去接收，但是这个接收也有个坑，再下面将会说明！

 

为什么要采用全局的JavaScript变量给vue变量

代码和上面的一样！增加如下的声明：

这里最好是在这个页面的全局下写一个let tempArray = [];

如果在局部写，那么当刷新得到的数据，将会闪烁

闪烁

闪烁

闪烁