Vue项目学习（一）

vue的异步操作

tip：在vue的使用中，发送请求后，.then()操作是异步进行的。其实不是vue才有，这个问题应该是JS的异步问题。

这次通过一个接口请求后，获得相应的**“商品列表”并展示，但是，在展示之前，想要再次去查询该商品列表里的商品，是否已有“采购记录”。这时候需要将“商品列表”中的“商品编号”去查询相应的“采购记录”并操作数组。也就是在第一个查询.then()里，在次去进行查询。这时候就有了异步。.then()之后获取不到第二次查询后进行“添加新元素操作”的值，并进行是否可以删除商品**的操作（有采购记录的商品，禁止删除，按钮不可点击）。

其实该需求在后端接口优化返回给前端vue直接访问获取就行，正好不想改后端，就试了一下vue中两次访问并进行元素添加效果。

后端

有两个接口：

• 商品列表接口（商品id、商品编号、商品详细信息等）
• 采购记录（采购记录id、采购合同名称、商品编号、采购记录其他信息等）

前端

想要实现的是在渲染该**“商品列表”页面时，能知道商品是否已有“采购记录”，如果有了，就禁止“删除”该商品，如果没有，就可以删除**

考虑和尝试之后，使用async和await解决异步问题，在方法和**.then()里使用async**，在需要进行同步操作的地方使用await，表示需要等待await后面的执行完成。可以参考Vue中使用async/await解决异步请求问题 - Judicious - 博客园 (cnblogs.com)了解解释。

直接上代码了

// 方法使用async
async getshoplist(page, size, desc, search) {
  this.loading=true
  // 查询商品
  commodity({
    page: page,
    size: size,
    sort: desc,
    chineseName: search,
    // then里使用async
  }).then(async (res) => {
    this.loading = false
    let temp = res.content;
    // 查询是否有采购记录
    for (let i = 0; i < temp.length; i++) {
      // 需要执行同步完成的地方使用await
      await queryPurchaseContract({
        commodityNumber: temp[i].commodityNumber,
      }).then(async (res) => {
        // 添加新属性
        if (res.length != 0) {
          //有采购记录
          temp[i].haveContract = 1;
          //无采购记录
        } else {
          temp[i].haveContract = 0;
        }
      });
    }
    // 如果不使用async和await，这里的temp中会没有haveContract的值
    this.dataList = temp;

    this.total = res.totalElements;
  });
},

在不使用async和await的时候，这个里面会异步，外面的this.dataList = temp;会一起执行，这样就造成在渲染的时候，无法得到haveContract 的值。

.then(async (res) => {
     // 添加新属性
     if (res.length != 0) { 
         temp[i].haveContract = 1;
         //无采购记录
     } else {
         temp[i].haveContract = 0;
     }
 });

进行判断:disabled="scope.row.haveContract==1"

<el-table-column label="操作" width="150px" align="center" fixed="right">
  <template slot-scope="scope">
    <el-button type="primary" @click="bianji(scope.row)">编辑</el-button>
    <el-button type="danger" @click="remove(scope.row.commodityId)" :disabled="scope.row.haveContract==1">删除</el-button>
  </template>
</el-table-column>

————————————————————— 作为初学者，很多前端的知识都没有掌握，见谅，如有错误请指出，以期进步，感谢！。后续有新的学习，继续补充上来。