学习建设网站书籍,深圳做个网站要多少钱,体育网站建设的必要性,seo优化快速排名技术postman测试接口 刚刚经过postman工具测试#xff0c;发现接口果然发生了改变。
新的接口为http://gmall-h5-api.atguigu.cn
如果服务器返回的数据code字段200#xff0c;代表服务器返回数据成功
整个项目#xff0c;接口前缀都有/api字样
axios二次封装
XmlHttpRequ…postman测试接口 刚刚经过postman工具测试发现接口果然发生了改变。
新的接口为http://gmall-h5-api.atguigu.cn
如果服务器返回的数据code字段200代表服务器返回数据成功
整个项目接口前缀都有/api字样
axios二次封装
XmlHttpRequest,fetchJQAxios这些都是很优秀的网络请求库
为什么需要进行二次封装axios
请求拦截器响应拦截器请求拦截器可以在发请求之前处理一些业务响应式拦截器当服务器数据返回以后可以处理一些事情
首先我们这个是没有安装axiso因此要安装一下 安装成功
在项目中经常api文件夹【axios】
接口当中路径都带有/api
baseURL:/api 意思就是以后如果我们/api/list/card这个路径话就可以忽略/api。它会自动帮我们添加 俩个拦截用法。如果不会可以查文档Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库可以用于浏览器和 node.js (axios-http.cn)
统一接口管理
项目很小完全可以在组件的生命周期函数中发请求
项目大axios.get(xxx)
这样写存在一个问题那就是出现了跨域问题
而解决跨域问题可以采用JSONPCROS,代理
我们这里采用代理方式解决跨域问题
那就是在vue.config.js中配置
// 代理跨域devServer:{proxy:{/api:{target:http://gmall-h5-api.atguigu.cn,// pathRewrite:{^/api:}}}} 成功解决了跨域的问题
nprogress进度条的使用
nprogress是一个进度条插件只要用于页面刷新显示进度
安装这个插件
npm install nprogress --save 看一下我们导入进来的nprogress是什么内容 我们可以明显的看到nprogress是一个对象。同时start表示进度条的开始 done表示进度条的结束 我们可以在请求拦截器和相应拦截器中设置nprogress设置对应的start和done但是发现我们并没有效果。这是因为我们没有引入样式。 这就有效果了但是如果在实际开发。如果要修改这个进度条的颜色 我们只需要修改它底层的样式就可以了
