fetch判断获取mock或线上数据


import { interceptor, fetch as originFetch, queryString } from '@ali/serve-fetch';
import mockApi from '@/mock';

const parsedParams = queryString.parse(location.search);

const IS_MOCK = location.hostname.includes('localhost') || location.hostname.includes('cloud-ide-router');

async function fetch(url, originConfig: any = {}, ...cfg) {
  if (IS_MOCK) {
    console.log(url, 'mock:', mockApi[url], 9999);
    return mockApi[url];
  };
  let finailUrl = url;
  if (finailUrl) {
    var param = ''
    param += '_input_charset=utf8'
    if (finailUrl.indexOf('?') !== -1) {
      finailUrl += '&' + param;
    } else {
      finailUrl += '?' + param;
    }
  }
  const params = {
    ...originConfig,
    headers: {
      // 'Accept': 'application/json',
      // 'Content-Type': 'application/json',
      ...(originConfig.headers || {})
    }
  };
  if (parsedParams.mockUserId) {
    params.data = {
      ...params.data,
      mockUserId: parsedParams.mockUserId,
    }
  }
  if (parsedParams.testUserId) {
    params.data = {
      ...params.data,
      testUserId: parsedParams.testUserId,
    }
  }
  // let res = await originFetch(finailUrl, params, ...cfg)
  let res = await originFetch('https://pre-zhaoshang.tmall.com/dailyexam/ajax/GetMonthHistory.do?_input_charset=utf8', params, ...cfg)
  try {
    if (typeof res === 'string') res = JSON.parse(res)
  } catch (e) {
  }
  return res;
};

export {
  queryString,
  interceptor,
  fetch,
  IS_MOCK
}

在Vue2中使用ECharts来获取mock数据,通常的做法是通过axios、fetch等HTTP客户端向后端API请求数据,然后将返回的数据传入ECharts实例进行图表的绘制。这里的mock数据可以是模拟的静态数据,也可以是通过前端模拟API返回的数据。下面是一个基本的步骤说明: 1. 安装axios库,如果使用npm或yarn进行项目管理,可以通过相应的命令安装。 2. 在Vue组件中引入axios库,并在组件的methods中定义数据获取的方法。 3. 在该方法中,使用axios向后端API发送请求(对于mock数据,这里可以配置请求到前端模拟的API)。 4. 使用Promise对象处理请求成功或失败的情况,并将数据传递给ECharts实例。 5. 在ECharts实例中使用这些数据配置相应的图表选项,完成图表的绘制。 下面是一个简化的代码示例: ```javascript <template> <div> <div ref="chartContainer" style="width: 600px;height:400px;"></div> </div> </template> <script> import axios from 'axios'; import * as echarts from 'echarts'; export default { mounted() { this.fetchMockData(); }, methods: { fetchMockData() { axios.get('/api/mock-data') // 假设'/api/mock-data'是你后端的mock数据接口或前端模拟接口 .then(response => { const chart = echarts.init(this.$refs.chartContainer); const option = { // ECharts图表的配置项 title: { text: 'Mock Data Chart' }, tooltip: {}, xAxis: { data: response.data.xAxis // 假设返回数据中有一个x轴数据数组 }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: response.data.series // 假设返回数据中有一个图表系列数据数组 }] }; chart.setOption(option); }) .catch(error => { console.error('There was an error fetching the mock data:', error); }); } } }; </script> ``` 在上述代码中,我们首先在Vue组件的`mounted`钩子函数中调用了`fetchMockData`方法,该方法使用axios发送GET请求到后端(或者前端模拟的数据接口),获取数据后使用ECharts进行图表的绘制。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值