ajax请求最多次数,优化三级分类请求次数（发送ajax次数）

//对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

})

}