墨刀做网站上下滑动的交互,深圳企业网站制作制作,wap网站设计方案,有哪些做文创产品的网站文章目录11.对axios二次封装11.1为什么需要进行二次封装axios#xff1f;11.2在项目当中经常有API文件夹【axios】12.接口统一管理12.1跨域问题12.2接口统一管理12.3不同请求方式的src/api/index.js说明本人其他相关文章链接11.对axios二次封装 安装命令#xff1a;cnpm inst…
文章目录11.对axios二次封装11.1为什么需要进行二次封装axios11.2在项目当中经常有API文件夹【axios】12.接口统一管理12.1跨域问题12.2接口统一管理12.3不同请求方式的src/api/index.js说明本人其他相关文章链接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发出的请求的时候路径当中会出现apibaseURL:/api,//代表请求超时的时间5stimeout: 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/mockAjaxget无参
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.动态展示三级菜单联动】
