老师帮忙看下

就亚洲不能点，一点就报错

main/index.js
import './main.css';
import Tab from '../tab';
import Content from '../content';
import 'components/loading';
import {set, get} from 'utils/sessionStorage';
const tabEl=document.querySelector('.tab');
const tab=new Tab(tabEl);
// tab.setActiveltem();
const content=new Content(document.getElementById('destination-content'));
// tab.to(1).then(data=>{
//     content.set(data);
// });
const itemEls=tabEl.querySelectorAll('.tab-item');

// 事件代理（原理：利用事件冒泡机制）
tabEl.addEventListener('click',function(ev){
    // console.log(ev.target);
    // contains是否包含
    const itemEl = ev.target;
    if(itemEl.classList.contains('tab-item')){
        const index=itemEl.dataset.id-1;
        // 本地存储  临时存储 (缓存)
    const storageName = `destination_content_${index}`;
      const storageContent = get(storageName);
        if(storageContent){
            tab.setActiveltem(index);
            content.set(storageContent);
        }else{
            const tabPromise=tab.to(index);

            content.setLoading();

            tabPromise.then(data=>{
                content.set(data);
                 set(storageName, data);
            });

        }

    }
},false);
itemEls[0].click();

session那个文件是复制老师的

qq_Unique彼岸花丶花海_0 2021-05-31

源自：“仿穷游”商城webapp 4-6 终止请求和使用本地存储

收起

1回答

好帮手慕星星回答被采纳获得+3积分 2021-05-31 11:29:42

同学你好，老师测试代码没问题

建议将这几个文件中的代码全部粘贴上来

老师替换测试下，看看是不是这几个的问题。

另外建议提交问题遇到审核时，不要再次提交，老师们可以看到，避免重复。

祝学习愉快！

收起回答

qq_Unique彼岸花丶花海_0 提问者 #1

Tab/index.js
import './tab.css';
import { getData, getDelayedData } from 'api/getData';
// https://www.imooc.com/api/mall-wepApp/destination/content
//发送请求     数据结构是[{URL,TEXT}]
import { URL, TAB_ITEM, TAB_ITEM_A } from './config';
class Tab {
    // el指选项卡
    constructor(el) {
        this.itemEls = el.querySelectorAll(TAB_ITEM);

    }
    setActiveltem(index) {
        for (const itemEl of this.itemEls) {
            itemEl.classList.remove(TAB_ITEM_A);
        }
        this.itemEls[index].classList.add(TAB_ITEM_A);
    }
    to(index) {
        //取消上次请求
        //为什么取消 因为如果网络环境卡 然后快速切换的话会出BUG 
        if (this.dataPromise && this.dataPromise.xhr) {
            this.dataPromise.xhr.abort();
        }


        this.setActiveltem(index);
        this.dataPromise = getData(`${URL}/${this.itemEls[index].dataset.id}`);
        //dataset.id 获取id
        return this.dataPromise;

    }
}
export default Tab;

Content/index.js
import './content.css';
import render from './content.art';
import renderLoading from 'components/loading/loading.art';
class Content {
  //el指父类
    constructor(el) {
      this.el = el;
    }

    set(data) {
      this.el.innerHTML = render({
        contents: data
      });
    }

    setLoading() {
      this.el.innerHTML = renderLoading();
    }
  }

  export default Content;

session
const storage = window.sessionStorage;

// 设置
const set = (key, value) => {
  storage.setItem(key, JSON.stringify(value));
};

// 获取
const get = key => {
  return JSON.parse(storage.getItem(key));
};

// 删除
const remove = key => {
  storage.removeItem(key);
};

// 清空
const clear = () => {
  storage.clear();
};

export { set, get, remove, clear };