web开发网络请求到数据的整合办法

开发中向服务器请求到的数据是特别复杂的，需要从中抽离出需要展示的数据进行展示个和交互。

思路：

先将请求到的复杂数据传递到一个类A中，从类A里抽离出需要的数据。需要展示数据的地方，面向类A开发，类A关心数据抽离问题，不关心如何展示，只管提供所需要的数据。

页面关心展示数据问题，不关心数据问题，只管和类A要数据。

实现：

目录结构：

src  > network > request.js 

　　　　　　   > detail.js

　　> detail.vue

detail.vue向detail.js要需要展示的数据，detail.js请求数据，并从复杂数据中抽离出detail.vue所需要的数据。

代码：

<template>
  <div id= "detail">
              // 展示数据

  </div>
</template>

<script>

import {getDetail, Goods,Shop,GoodsParam,getRecommend} from 'network/detail'

export default {
  name: "Detail",
  
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop:{},
      detailInfo:{},
      paramInfo:{},
      commentInfo:{},
      recommends: [],
       itemImgListener:null,
    }
  },
    
  created() {
    // 1. 保存传入的iid
    console.log("bb",this.$route.params)
    this.iid = this.$route.params.iid

    // 2.根据iid请求详情数据
    getDetail(this.iid).then(res => {
      console.log(res)
          // 1. 轮播图数据
          const data = res.result;
      this.topImages = data.itemInfo.topImages
          // 2.获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services)
    
      // 3. 创建店铺信息的对象
      this.shop = new Shop(data.shopInfo)  
      
      // 4. 保存商品的详情数据
      this.detailInfo = data.detailInfo;

      //5. 获取参数信息
      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule)

      // 6. 获取评论信息
      if (data.rate.cRate !== 0){
        this.commentInfo = data.rate.list[0]
      }

      // 7.请求推荐数据
      getRecommend().then(res => {
        console.log('详细页面的商品推荐数据',res)
        this.recommends = res.data.list
      })
  },
</script>

detail.vue

import axios from "axios"

// 推荐写法，因为axios返回的就是promise对象，没必要在封装一次promise
// 如果换axios框架，只需本页去掉axios相关，导入最新框架，return new Promise（）就可以，其他文件依旧正常使用
export function request(config) {
    const instance = axios.create({
      // baseURL: 'http://123.207.32.32:8000/api/hy',
      baseURL: 'http://106.54.54.237:8000/api/hy',
      timeout: 5000
    });

    
    //  2.2  响应拦截
    instance.interceptors.response.use(res =>{
      // console.log('响应拦截');
      // console.log(res.data);
      return res.data
    },err =>{
      console.log('拦截服务器响应错误')
      console.log(err)
    })

    // 发送网络请求
    return instance(config)
}

request.js

import {request} from './request'

export function getDetail(iid){
  return request({
    url: "/detail",
    params: {
      iid
    }
  })
} 

export class Goods{
  constructor(itemInfo, columns, services){
    this.title = itemInfo.title;
    this.desc = itemInfo.desc;
    this.newPrice = itemInfo.price;
    this.oldPrice = itemInfo.oldPrice;
    this.discount = itemInfo.discountDesc;
    this.columns = columns;
    this.services = services;
    this.realPrice = itemInfo.lowNowPrice;
  }
}

export class Shop{
  constructor(shopInfo){
    this.logo = shopInfo.shopLogo;
    this.name = shopInfo.name;
    this.fans = shopInfo.cFans;
    this.sells = shopInfo.cSell;
    this.score = shopInfo.score;
    this.goodsCount = shopInfo.cGoods;
  }
}

export class GoodsParam {
  constructor(info, rule) {
    // 注: images可能没有值(某些商品有值, 某些没有值)
    this.image = info.images ? info.images[0] : '';
    this.infos = info.set;
    this.sizes = rule.tables;
  }
}

export function getRecommend(){
  return request({
    url: '/recommend'
  })
}

detail.js