vue前台 (三)优化三级分类请求次数(发送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
})
}