vue的axios的使用

1.axios的基本使用

首先我们下载axios: npm install axios --save
然后我们要引用他: import axios from ‘axios’
接下来是一些基本使用:
在这里插入图片描述
首先我们要知道axios是干什么用的,她是我们在vue里面用来进行发送网络请求的,所以第一步我们需要把我们的路径给获取到,然后你可以设置你是要使用get还是post,然后因为axios里面封装了promise,所以我们可以输出我们的数据。

2.axios发送并发请求

在这里插入图片描述
上面的操作就是当你有两个请求需要发送,我们就可以是使用我们的axios.all()。然后这个括号里面写的是我们需要发送的请求,你需要发送几个就可以写几个。

3.创建对应的axios的实例

在这里插入图片描述
这里的话就是难免我们会有多个服务器,当有多个服务器的时候,我们就可以这样子写,给他创建多个实例,对应多个服务器。

4.封装request

当我们按照上面的操作来写axios,可能在每个组件里面我们都需要引入我们的axios,然后再写我们需要进行的网络请求。这样子的话,万一我们以后要进行修改,就要到每一个组件去进行修改,这是非常麻烦的,所以我们要对我们的axios进行封装。
在这里插入图片描述
首先,我们可以新建一个netwok文件夹,然后新建一个request.js文件,然后在里面写好我们的网络请求,然后再组件里面进行导入就可以了。
在这里插入图片描述
在这里插入图片描述

5.axios的拦截器

在这里插入图片描述
当我们在进行一些操作的时候,比如说请求后,我们要进行一些其他的操作,我们就需要一些拦截,这时候就可以使用我们的拦截器。然后的话具体操作请看上图。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章