Vue-快餐收银系统-pos.vue2

Axios从远程读取数据

 

按照教程一步步来是没有问题的，但是有时候我自己是自寻烦恼，想着接受一个后台数据是这样，那么两个或者多个要怎么解决的呢？

 

我从博客园找到了答案。

 

axios.all([

    axios.get('https://api.github.com/xxx/1'),

    axios.get('https://api.github.com/xxx/2')

  ])

  .then(axios.spread(function (userResp, reposResp) {

    // 上面两个请求都完成后，才执行这个回调方法

    console.log('User', userResp.data);

    console.log('Repositories', reposResp.data);

  }));

那么结合我的实际，要把oftenGoods和typeGoods都打印出来，是有一点问题的，打印数据是有，但是传入数值不行，据群里的小伙伴说要绑定它或者弄个箭头函数，啊哈哈，其实我根本不知道怎么弄。经过小哥哥的指点，改写了代码，从坑里跳出来了。上代码：

created(){
      axios.all([
        axios.get('http://jspang.com/DemoApi/oftenGoods.php'),
        axios.get('http://jspang.com/DemoApi/typeGoods.php')   
      ]) 
      .then(axios.spread(function (a,b){
          console.log('oftenGoods',a.data);
          console.log('typeGoods',b.data);
          this.oftenGoods=a.data;
          this.type0Goods=b.data[0];
          this.type1Goods=b.data[1];
          this.type2Goods=b.data[2];
          this.type3Goods=b.data[3];
      }.bind(this))) 
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
  }.bind(this))) 
      .catch(error=>{
          console.log(error);
          alert('网络错误，不能访问');
      })
  }

另外说下，a,b是函数的变量，我犯了个错误，直接把参数写成数组名称了，结果出不来，尴尬了。继续学习，继续加油