优化三级分类请求次数(发送ajax次数)

Posted 全情海洋

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了优化三级分类请求次数(发送ajax次数)相关的知识,希望对你有一定的参考价值。

js部分, app.vue

 //本来我们请求三级分类列表的功能是在TypeNav里面去做的,TypeNav组件又在 /home 路径下,加载TypeNav后,自动会发送ajax请求,

//而当从 /home 路由切换到 /serach 路径后,因为 /serach 路径 也有 TypeNav组件,加载TypeNav组件后,又会自动发送ajax请求,
这个请求会触发两次,而数据又是一样的,所以造成浪费(效率低下),  // 因此我们可以优化在app总组件当中去发请求
 
  mounted() {
    this.getCategoryList();
  },
  methods:{
    getCategoryList(){
      this.$store.dispatch(‘getCategoryList‘)
    }
  }
 
vuex,发送ajax部分,并且存储数据部分
 
1.ajax二次封装部分,ajax.js
//对axios的二次封装
// 配置基础路径和超时限制
// 添加进度条信息  nprogress
// 返回的响应不再需要从data属性当中拿数据,而是响应就是我们要的数据
// 统一处理请求错误, 具体请求也可以选择处理或不处理
import axios from ‘axios‘
import NProgress from ‘nprogress‘
import ‘nprogress/nprogress.css‘


const service = axios.create({
  baseURL: ‘/api‘,  // 配置基础路径
  timeout: 20000,  //和超时限制
});


//请求拦截器
//请求拦截器内部一般不会处理错误的信息
service.interceptors.request.use(config => {
  //config是发送请求的配置对象,必须处理完返回这个配置对象
  //开启我们的进度条
  NProgress.start()
  return config
});
// 响应拦截器
service.interceptors.response.use(
  response => {
    //停止进度条
    NProgress.done()
    //返回响应的时候,直接返回响应的data
    return response.data
  },
  error => {

    NProgress.done()

    alert(‘请求出错‘ + error.message || ‘未知错误‘)
    //以后不允许用户继续处理: 中断promise链
    return new Promise(() => {}) //返回pending状态的promise 中断
    //以后它允许用户继续对错误进行处理
    // return Promise.reject(error)
  }
);


export default service

2.接口请求函数文件 index.js

//这个文件是项目的接口请求函数文件
//给每个接口发请求,我们都把它封装成一个函数,到时需要请求拿数据的时候,就去调用对应的接口函数就完了
import Ajax from ‘@/ajax/Ajax‘
// 请求获取三级分类列表数据
// get   /api/product/getBaseCategoryList   参数:无

export const reqCategoryList = () => Ajax({
  url:‘/product/getBaseCategoryList‘,
  method:‘GET‘
})

3.vuex,发送ajax请求部分  home.js

import {reqCategoryList} from ‘@/api‘

const state = {
  categoryList : []
}
const mutations = {
  //直接修改数据
  RECEIVECATEGORYLIST(state,categoryList){
    state.categoryList = categoryList
  }
}

const actions = {
  //异步请求数据
  //async 和 await的用法
  async getCategoryList({commit}){
    const result = await reqCategoryList()
    if(result.code === 200){
      commit(‘RECEIVECATEGORYLIST‘,result.data)
    }
  }
  
}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

 

4.TypeNav组件获取响应数据部分   typeNav.vue

import { mapState } from "vuex";

 computed: {
    // categoryList(){
    //   return this.$store.state.categoryList
    // }

    // ...mapState([‘categoryList‘])

    //上面两种写法是一回事,mapState映射的时候默认映射的就是总的store的state内部的数据
    //如果使用了vuex模块化开发,那么数组的形式就无法使用了

    // 普通写法
    // categoryList(){
    //   return this.$store.state.home.categoryList
    // }
    
    ...mapState({
      categoryList: state => state.home.categoryList
    })
  }

 

 

 

以上是关于优化三级分类请求次数(发送ajax次数)的主要内容,如果未能解决你的问题,请参考以下文章

性能优化的方法

常见的一些性能优化的小方法

如何测量代码片段的调用次数和经过时间

HTTP复习

HTTP复习

ajax多次请求,只执行最后一次的方法