在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ vue項目中如何在同個頁面多個地方調(diào)用同個接口?

vue項目中如何在同個頁面多個地方調(diào)用同個接口?

自己首先是想到先把接口寫到一個方法里, 然后在別的地方調(diào)用, 但是自己又不知道如何入手
methods: {

/* 把接口寫在方法里 */
getData() {
  this.$http.get(this.$api.dataChart).then(rsp => {
    this.data = rsp.data.data; // tab欄所有圖表數(shù)據(jù)
    console.log("555555", window.data);
  });
},
/* 土壤溫度 */
createChartOne() {
  this.$http
    .get(this.$api.dataChart)
    .then(rsp => {
      console.log(rsp);

      if (rsp.status == 200) {
        window.data = this.data;
        this.resData = rsp.data.data.device_1;
        let key = "土壤溫度_1";
        let xAxisData = this.resData[key].names;
        let seriesData = this.resData[key].values; // 獲取曲線圖的數(shù)據(jù)
        let yMin = Math.min.apply(null, seriesData);
        let yMax = Math.max.apply(null, seriesData);

        var home_echarts = echarts.init(
          document.getElementById("home_echarts")
        );
        var option = {
          grid: {
            left: 60
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#285555"
              }
            }
          },
          yAxis: {
            type: "value",
            min: yMin - 5,
            max: yMax + 5,
            // splitNumber:5,
            // interval:parseInt((yMax- yMin)/5),
            axisLine: {
              show: true,
              lineStyle: {
                color: "#275454"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              lineStyle: {
                color: ["#0a3435"]
              }
            }
          },
          series: [
            {
              data: seriesData,
              type: "line",
              smooth: true
            }
          ]
        };
        var resize = {
          width: 415,
          height: 290
        };
        home_echarts.resize(resize);
        home_echarts.setOption(option);
      } else {
        throw rsp.message;
      }
    })
    .catch(err => {
      console.log("createChartOne有異常", err);
    });
},

/* 土壤濕度 */
createChartTwo() {
  this.$http
    .get(this.$api.dataChart)
    .then(rsp => {
      if (rsp.status == 200) {
        let resData = rsp.data.data.device_1; // 獲取整個tab欄的數(shù)據(jù)
        let key = "土壤濕度_1"; // 獲取其中echarts中的數(shù)據(jù)
        let xAxisData = resData[key].names; // 獲取X軸時間
        let seriesData = resData[key].values; // 獲取曲線圖的數(shù)據(jù)
        let yMin = Math.min.apply(null, seriesData); // 取最小值
        let yMax = Math.max.apply(null, seriesData); // 取最大值

        var home_echarts_speed = echarts.init(
          document.getElementById("home_echarts_speed")
        );
        var speed = {
          grid: {
            left: 60
          },
          xAxis: {
            type: "category",
            data: xAxisData,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: {
              lineStyle: {
                color: "#285555"
              }
            }
          },
          yAxis: {
            type: "value",
            min: yMin - 5,
            max: yMax + 5,
            axisLine: {
              lineStyle: {
                color: "#275454"
              }
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            splitLine: {
              lineStyle: {
                color: ["#0a3435"]
              }
            }
          },
          lineStyle: {
            color: "#0066ff"
          },
          series: [
            {
              data: seriesData,
              type: "line",
              smooth: true
            }
          ]
        };
        var resize = {
          width: 415,
          height: 290
        };
        home_echarts_speed.resize(resize);
        home_echarts_speed.setOption(speed);
      } else {
        throw rsp.message;
      }
    })
    .catch(err => {
      console.log("createChartOne有異常", err);
    });
  }
}
感覺自己的代碼還有很大的優(yōu)化空間
回答
編輯回答
別瞎鬧

大概這樣提取

/* 把接口寫在方法里 */
getData() {
    return this.$http
            .get(this.$api.dataChart)
            .then(rsp => {
                if (rsp.status == 200) {
                    return rsp.data
                } else {
                    throw rsp.message;
                }
            })
            .catch(err => {
                console.log("createChartOne有異常", err);
            });
},
createChart(el, data) {
    //echarts操作
},
createChartOne() {
    this.getChartData().then(data => {
        this.createChart("home_echarts", data);
    });
},
createChartTwo() {
    this.getChartData().then(data => {
        this.createChart("home_echarts_speed", data);
    });
}
2017年11月19日 02:48
編輯回答
陌南塵

提到一個文件里面去,需要的地方引用

2017年6月6日 17:29