class构造函数实现接口数据整合

最新推荐文章于 2023-09-19 09:38:05 发布

imsopoor

最新推荐文章于 2023-09-19 09:38:05 发布

阅读量202

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/imsopoor/article/details/120037499

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文介绍了在项目接口中遇到的数据分布不集中的问题，以及如何通过定义类和构造函数来更有效地组织和提取所需数据。具体做法是在`GoodsInfo`类中存储商品信息，如标题、描述、价格等，并在组件内部通过构造函数将接口返回的`itemInfo`、`columns`和`shopInfo.services`整合到`goodsInfo`对象中，提高了数据管理的清晰性和效率。

摘要由CSDN通过智能技术生成

一般项目接口中很有可能数据分布很不集中，经常出现想要的数据可能在不同对象内。
例如如果要取columns内的数据，以及itemInfo内的部分数据…
在这里插入图片描述
按我之前拿数据方法，这样的话就是定义一个对象存放在data内，然后会把columns和itemInfo全部存放在对象内。
今天学习到将所需的数据存入class内，通过带参数的构造函数来实现。

// 将商品基本信息过滤到类中
export class GoodsInfo {
  constructor(itemInfo, columns, services) {
    this.title = itemInfo.title;
    this.desc = itemInfo.desc;
    this.newPrice = itemInfo.price;
    this.oldPrice = itemInfo.oldPrice;
    this.realPrice = itemInfo.lowNowPrice;
    this.discount = itemInfo.discountDesc;
    this.columns = columns;
    this.services = services;
  }

然后在要用到数据的组件内导入
再使用

data(){
	return {
		// 接收商品基本信息
      goodsInfo: [],
	}
}

  methods: {
    // 请求商品数据
    getDetail(iid) {
      getDetail(iid).then(({ data: { result } }) => {
        console.log(result);
        // 将商品进本信息整合进goodsInfo
        this.goodsInfo = new GoodsInfo(
          result.itemInfo,
          result.columns,
          result.shopInfo.services
        );
      });
    },
  },