Axios二次封装和Api的解耦

目录

一、axios三种基本写法

二、axios的二次封装

三、Api的解耦


一、axios三种基本写法

1)get方法(是最简单的):

写法二:

2)post:

3)axios请求配置

默认是get请求,如果是默认就不需要写method:,如果是post请求就要method声明。

二、axios的二次封装

1)二次封装的意义:有很多,最主要的是为了方便管理。另一方面,有时候我们项目中涉及权限问题,我们登陆时需要判断用户是否是登录状态,这种判断如果在某个页面单独做会很麻烦冗余,就可以放在封装内。

情景假设:有三个页面,每个页面都需要发送5次请求,如果在每个页面中单独写,就需要写15次,这时当后面地址由开发环境158.12.4之类换做发布环境http://shouyeh.cn之类时,改动太麻烦。而封装后只需要修改一次即可。

baseURL:相当于一个变量,如下图所示。

2)具体步骤:

第一步:在src中新建一个目录utils,然后在utils内新建一个request.js文件。

第二步,在request.js内进行配置。引入axios;创建axios对象;添加请求拦截器;添加响应拦截器。

第三步,在app.vue中,引入request。

注意:

第二步中比较重要的是,根据需要可以在请求拦截器判断是否在登录状态。

在响应拦截器中,看到后端给前端的返回数据。

三、Api的解耦

1)api解耦的意义:一是为了同一个接口可能多次使用,封装起来后直接调用就可以。

在实际项目中,可能会面临同一个接口在多个地方调用的情况,比如头部导航栏和下面分区导航链接所指的是同一个内容。就像美团可以在首页推荐直接点外卖,也可以进入外卖导航栏内点食物链接一样。

二是为了方便api请求统一管理。

2)具体步骤:

第一步,先在src文件夹下新建api文件夹。然后在api文件夹下新建.js文件,这些.js文件可以进行分类,比如某一个页面的放在一起。

 

第二步,在.js文件中,先引入request。接着将接口定义为函数,这样在页面中使用时只要写函数就可以了,不用再写url。

需要数据时直接在函数里写请求参数就可以,参考步骤三的图二。

注意,查询课程这个接口函数(data),有个data参数,是因为这个接口后端规定他必须有请求参数,而图中我们使用了ES6语法糖,在return中data:data,和图一这样写是一样的。

 

第三步,在app.vue页面使用接口。首先引入接口函数,然后直接引用封装的函数就可以了。

猜你喜欢

转载自blog.csdn.net/coinisi_li/article/details/129139264