@[toc]
11.对axios二次封装
安装命令：cnpm install --save axios
在src目录下新建api的文件夹，新建axios.js文件，该文件就是“对axios二次封装”。
XMLHttpRequest、fetch、JQuery、axios
11.1为什么需要进行二次封装axios？
请求拦截器、相应拦截器：
- 请求拦截器，可以在发请求之前可以处理一些业务。
- 相应拦截器，当服务器数据返回以后，可以处理一些事情。
11.2在项目当中经常有API文件夹【axios】
接口当中：路径都带有 /api
baseURL:"/api"
注意：有的同学axios基础不好，可以参考git|npm关于axios的文档说明。
//对axios二次封装
import axios from "axios";
import nprogress from "nprogress";
//如果出现进度条没有显示：一定是你忘记了引入样式了
import "nprogress/nprogress.css";
//在当前模块中引入store
import store from '@/store';
//1、利用axios对象的vreate，区创建一个axios实例
//2.：request就是axios，只不过稍微配置一下
const requests = axios.create({
//基础路径，requests发出的请求的时候，路径当中会出现api
baseURL:'/api',
//代表请求超时的时间5s
timeout: 5000,
})
//3、配置请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use(config => {
if(store.state.detail.uuid_token){
//请求头添加一个字段(userTempId):和后台老师商量好了
config.headers.userTempId = store.state.detail.uuid_token;
}
//需要携带token带给服务器
if(store.state.user.token){
//请求头添加一个字段(userTempId):和后台老师商量好了
config.headers.token = store.state.user.token;
}
//进度条开始
nprogress.start();
//config：配置对象，对象里面有一个属性很重要，Header请求头
return config;
})
//4、配置响应拦截器
requests.interceptors.response.use((res) => {
//成功的回调函数
//进度条结束
nprogress.done();
return res.data;
},(error) => {
//失败的回调函数
console.log("响应失败"+error)
return Promise.reject(new Error('fail'))
})
//5、对外暴露
export default requests;
12.接口统一管理
项目很小：完全可以再组件的生命周期函数中发请求
项目大：axios.get('xxx')
12.1跨域问题
什么是跨域：协议、域名、端口号不同的请求，称之为跨域。
12.2接口统一管理
- 第1步：src下的api文件夹下新建index.js文件，统一管理并暴露接口。这样的好处是：万一有100个路径前缀要修改，不用全局搜索挨个修改，而是找到统一管理文件进行单个文件内容修改即可完成效果。
//统一管理项目接口的模块
//引入二次封装的axios（带有请求、响应的拦截器）
import requests from "@/api/axios"
//三级菜单的请求地址 /api/product/getBaseCategoryList GET 没有任何参数
//对外暴露一个函数，只要外部调用这个函数，就想服务器发起ajax请求、获取咱们的三级菜单数据。当前咱们这个函数只需要把服务器返回结果返回即可。
export const reqGetCategoryList = ()=>requests.get(`/product/getBaseCategoryList`);
- 第2步：配置代理服务器解决跨域问题。在vue.config.js文件内添加devServer配置项。
module.exports = {
productionSourceMap:false,
// 关闭ESLINT校验工具
lintOnSave: false,
devServer: {
//代理服务器解决跨域
proxy: {
"/api": {
target: "http://39.98.123.211:8510"
},
}
}
};
- 第3步：在要使用axois调用都端接口的地方，使用import引入暴露的方法名直接使用即可。
12.3不同请求方式的src/api/index.js说明
src/api/index.js
//统一管理项目接口的模块
//引入二次封装的axios（带有请求、响应的拦截器）
import requests from "@/api/axios"
import mockRequests from "@/api/mockAjax"
get无参：
export const getCategoryList = ()=>requests.get(`/product/getBaseCategoryList`);
export const mockGetBannerList = ()=> mockRequests.get("/banner")
--------------------------------------------------------------------------------
get有参：
export const reqUpdateCheckedByid = (skuId,isChecked)=>requests({url:`/cart/checkCart/${skuId}/${isChecked}`,method:'get'});
--------------------------------------------------------------------------------
post有参：
export const addOrUpdateShopCar = (skuId, skuNum)=>requests({url:`/cart/addToCart/${skuId}/${skuNum}`, method:"post"});
export const registerUser = (params)=>requests({url: `/user/passport/register`,method: 'post', data: params});
export const reqUserLogin = (data)=>requests({url:'/user/passport/login',data,method:'post'});
本人其他相关文章链接
1.vue尚品汇商城项目-day02【9.Home组件拆分+10.postman测试接口】
2.vue尚品汇商城项目-day02【vue插件-13.nprogress进度条的使用】
3.vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
4.vue尚品汇商城项目-day02【14.vuex状态管理库】
5.vue尚品汇商城项目-day02【15.动态展示三级菜单联动】
