25.在vue中使用axios

目录

1 项目中安装 axios

2  做测试用的后端

3  全局引入axios

4  定义全局根路径

5  请求拦截器

5.1  基本使用

5.2  请求头中加入token

6  响应拦截器

6.1  基本使用

6.2  loading效果

7  proxy跨域代理

7.1  将axios的请求根路径改为vue项目的运行地址

7.2  在vue.config.js中声明devServer proxy

7.3  重启服务，然后用就行了

8  请求json文件

---

1 项目中安装 axios

2  做测试用的后端

我们用python的flask做后端

简单来讲就是，发两个数字，如果是get就两个数相加，如果是post就两个数相乘

3  全局引入axios

每一个组件都进行导入是可以的，但这样有点儿麻烦

我们希望全局引入axios

在vue2中可以这样写

在vue3中可以这样写

这样请求的时候不需要导入了，只需要加个this就行了

我们习惯将给axios改名为$http

4  定义全局根路径

如果你的一个前端项目中有多个不同的后端根路径，那么你需要用到 axios.create() 创建不同的axios实例对象，然后对不同的实例对象设置baseURL，比如

5  请求拦截器

拦截器就是axios的请求钩子，分为请求拦截器与响应拦截器，请求拦截器在请求时自动触发，响应拦截器在响应时自动触发

5.1  基本使用

我们简单用一下

• 请求失败的回调函数可以不写

之后发起一次请求，发现确实执行了请求拦截器

我们看一下config的内容

里面有这次请求的相关信息，比如根路径，携带的信息这种

5.2  请求头中加入token

我们在这个 附录3-3 大事件项目前端_前端大事件项目_Suyuoa的博客-CSDN博客 项目中做token校验的时候，每次还要特意去添加请求头，这样就很麻烦

我们可以在拦截器中添加

这样你每次的请求就会携带请求头了

6  响应拦截器

6.1  基本使用

• 可以省略响应失败的回调函数

6.2  loading效果

loading效果需要使用到 请求拦截器与响应拦截器。在请求拦截器中打开loading，在响应拦截器中关闭loading

基本上每一个组件库都有loading的效果，我这里就用element ui为例

• 安装与使用 element ui 的方法可以看一下这个 29.组件库 Element UI_Suyuoa的博客-CSDN博客

点击按钮的时候会出现loading效果，请求结束后loading效果消失

7  proxy跨域代理

这个方式我仅在vue-cli创建的项目中测试过。proxy跨域代理仅在开发时生效，发布的时候依然要让后端开启CORS

当前端后端的协议，接口，IP三者有一个不同的时候，就会出现跨域问题

我们在这里介绍了两个处理跨域问题的方案 8.跨域请求_Suyuoa的博客-CSDN博客 ，但这两个方案都需要后端的配合，proxy跨域代理不需要后端的配合

我先把后端的CORS关掉

这个时候再点击按钮请求就会出现跨域的错误，原因是我前端的地址为 http://127.0.0.1:8080 我后端的地址为 http://127.0.0.1:5000 他们两者的端口不一样

下面使用proxy代理的方式解决这个问题，分为下面几步

7.1  将axios的请求根路径改为vue项目的运行地址

在我们这个例子中就是改为 http://127.0.0.1:8080

• 你访问哪个写哪个，127.0.0.1与localhost是不一样的

这样在请求的时候，由于 协议，端口，IP 全都一致，所以就不存在跨域问题了

但你前端与后端的路由是不一样的，vue项目发现请求的接口不存在就会转交给proxy代理

7.2  在vue.config.js中声明devServer proxy

proxy的值是你真正要请求的端口

如果没有vue.config.js这个文件，那么你就手动创建一个，然后写下面这些内容

7.3  重启服务，然后用就行了

8  请求json文件

请求本地的json文件不要使用代理

我现在有test.json放在项目中的public目录下（必须放在public目录下）

开启项目后，你可以访问到json文件

我们可以用axios get请求这个文件

• 这里我设置了请求根路径是 127.0.0.1:8080，我下面访问的也是 127.0.0.1:8080。如果访问的和根路径不一致（一个localhost一个127.0.0.1）就会有跨域问题

点击按钮可以得到json文件的信息