axios拦截器 封装 及 模块化

axiox 封装

 // 文件: api.js
/* 
	该文件是对axios的二次封装，目的：让整个项目发送ajax请求时，通用的配置不用一遍一遍重复编写了
*/
import axios from 'axios'
//引入NProgress做进度条
import NProgress from 'nprogress'
//引入NProgress的样式
import 'nprogress/nprogress.css'
import store from '@/store'
import {Message} from 'element-ui'

//创建一个axios实例对象，以后整个项目都用这个实例发请求
const ajax = axios.create({
  baseURL: '/api', //请求基本路径
  timeout: 9000, //超时时间
});

//请求拦截器
ajax.interceptors.request.use((config)=>{
	//进度条开始走
	NProgress.start()
	//从vuex中获取userTempId，userToken
	const {userTempId,userToken} = store.state.user
	//请求头中加入用户临时标识（用户临时标识一定有，为啥？有就用，没有也会造一个）
	config.headers.userTempId = userTempId
	//有token则携带，没有呢？—— 那就不携带了，因为我们的系统没有token也可以搜索、看详情、去购物车
	if(userToken) config.headers.token = userToken
	//返回配置信息（必须要做）
	return config
})

//响应拦截器
ajax.interceptors.response.use(
	//能进入到这个回调代表响应成功了
	response => {
		//进度条停止
		NProgress.done();
		//把服务器返回的真正数据交出去
		return response.data
	},
	//能进入到这个回调代表响应失败了
	error => { 
		//统一提示错误
		Message.error(error.message);
		//进度条停止
		NProgress.done();
		//返回失败的Promsie实例
		return new Promise(()=>{})
	}
)

export default ajax

接口模块化 及模拟数据 模拟数据主页有详细教程

  // 文件: index.js
/* 
	1.该文件是对整个项目中所有的ajax请求进行，统一管理
	2.该文件中会编写一个一个的函数，项目有几个接口，那么就写几个函数
	3.这么做的优势在于：后期若接口的变更，可以更好的管理
*/
import ajax from './ajax'
import mockAjax from './mockAjax'  //模拟数据  主页有详细教程

//请求三级分类列表
export const reqCategoryList = ()=> ajax.get('/product/getBaseCategoryList')
//请求banner数据（Home顶部的轮播区域）
export const reqBannerList = ()=> mockAjax.get('/banner')

//测试接口  前提在main.js 中引入 import '../src/api';

reqCategoryList().then((res) => {
	console.log(res, '测试接口');
});