Vue电商项目--axios二次封装

news/2024/11/17 6:00:05/

postman测试接口

刚刚经过postman工具测试,发现接口果然发生了改变。

新的接口为http://gmall-h5-api.atguigu.cn 

如果服务器返回的数据code字段200,代表服务器返回数据成功

整个项目,接口前缀都有/api字样

axios二次封装 

XmlHttpRequest,fetch,JQ,Axios这些都是很优秀的网络请求库

为什么需要进行二次封装axios?

请求拦截器,响应拦截器:请求拦截器,可以在发请求之前处理一些业务,响应式拦截器:当服务器数据返回以后,可以处理一些事情

首先,我们这个是没有安装axiso,因此要安装一下

安装成功

在项目中经常api文件夹【axios】 

接口当中:路径都带有/api

baseURL:'/api'

意思就是以后如果我们/api/list/card这个路径话,就可以忽略/api。它会自动帮我们添加 

俩个拦截用法。如果不会可以查文档Axios 中文文档 | Axios 中文网 | Axios 是一个基于 promise 的网络请求库,可以用于浏览器和 node.js (axios-http.cn)

统一接口管理 

项目很小:完全可以在组件的生命周期函数中发请求

项目大:axios.get('xxx')

这样写存在一个问题,那就是出现了跨域问题 

而解决跨域问题,可以采用JSONP,CROS,代理

我们这里采用代理方式解决跨域问题

那就是在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,但是发现,我们并没有效果。这是因为我们没有引入样式。

 

这就有效果了,但是如果在实际开发。如果要修改这个进度条的颜色

 我们只需要修改它底层的样式就可以了 


http://www.ppmy.cn/news/59158.html

相关文章

掌握 Python 接口自动化测试理论,深度解读测试框架源码

目录:导读 引言 一、什么是接口测试、为什么要做接口测试 1、什么是接口测试 2、为什么要做接口测试 二、接口测试的流程 1、接口测试的流程 2、为什么要写测试用例 3、接口测试设计要点 三、python接口自动化-requests的应用 1、requests简介 2、reques…

代码随想录算法训练营第五十二天 |动态规划 part13

300. 最长递增子序列 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度。 子序列 是由数组派生而来的序列,删除(或不删除)数组中的元素而不改变其余元素的顺序。例如,[3,6,2,7] 是数组 [0,3,1,6,2,2,7] 的子序…

Linux 用户管理与文件权限

Linux 是一个多用户系统,它允许多个用户同时登陆主机,并为他们分配不同的资源和工作环境进行使用。当然,不同的用户都有文件的私有需求,所以设置不同用户文件的权限管理十分重要。 01 用户与用户组 Linux 中一般将文件访问权限的…

LeetCode 1376. Time Needed to Inform All Employees【自顶向下,自底向上(记忆化搜索+空间优化+迭代)】中等

本文属于「征服LeetCode」系列文章之一,这一系列正式开始于2021/08/12。由于LeetCode上部分题目有锁,本系列将至少持续到刷完所有无锁题之日为止;由于LeetCode还在不断地创建新题,本系列的终止日期可能是永远。在这一系列刷题文章…

原生OpenFeign相较于传统HTTP工具的优化和原理

文章目录 1.HTTP工具使用流程及问题1.1 使用OkHttp3流程示例1.2 存在的两大问题 2.OpenFeign的优化3.OpenFeign实现原理3.1 使用Feign构造动态代理对象3.2 Feign动态代理的实现原理 本篇介绍的是springcloud-openfeign的底层框架io.github.openfeign,重点不是框架如…

介绍一款优秀的网址导航,可以部署到自己公司内部:hexo-theme-webstack

GitHub - HCLonely/hexo-theme-webstack: A hexo theme based on webstack. | 一个基于webstack的hexo主题。 中文文档 A Hexo theme based on WebStackPage. Installation hexo > 4.0 git clone https://github.com/HCLonely/hexo-theme-webstack themes/webstack hexo …

E. Train Hard, Win Easy(数学推导 + 前缀和)

Problem - E - Codeforces 这是一个有关竞赛编程的问题。Zibi 是一名竞赛编程教练,有 n 名选手想要备战。培训比赛具有一些不同寻常的规则——每个团队有两名成员和两个问题,每个选手都会编写其中一个问题的代码。当然,一个团队中的人将编写不…

感知机介绍

1&#xff0c;数学定义&#xff1a; Note:<>在数学中通常指求期望的意思。 假设我们用感知机区分cat和dog&#xff0c;使用下面三个特征&#xff1a;x1: color of hair&#xff1b;x2:length of leg&#xff1b;x3:volume of head。cat 用1表示&#xff0c;dog用-1表示&…