浅谈一下如何在vue项目中封装API

api的封装要用到axios模块。所以那我们在创建好vue脚手架后需要安装axios依赖包(指令:npm i axios --save)。
api的封装主要的目的就是:在帮助我们简化代码和后期的更新维护

前端vue的开发中,有一点是必须要做的,那就是将所有的API接口封装起来,因为从开发到最终上线的过程中,API是需要经常更换的,所以需要将API封装起来,便于修改和更换。
那么,如何封装API呢?
首先我们先创建一个文件夹API
在这里插入图片描述

然后在里面创建三个js文件 ,分别是core.js(核心文件) config.js(配置文件) index.js(入口文件)

然后我们在核心文件中
1、首先创建一个axios实例 里面写baseURl和超时时间
2、抛出一个函数来判断是 get还是post请求
3、封装返回请求的方式,
4、在核心文件里引入配置文件里面的请求封装方式;
在这里插入图片描述

(2)在配置文件中 1、封装请求方式和请求路径
在这里插入图片描述

(3)在入口文件中 1、引入核心文件和配置文件 2、在一个对象里封装一 个函数 return返回请求方式、地址和参数 ;3、抛出去这个对象;
在这里插入图片描述

(4)最后把入口文件里面的对象引入到man.js 里面,全局注册一下,Vue.prototype.$函数名=函数名就好啦,到这里我们就把api给封装好啦

Logo

CSDN联合极客时间,共同打造面向开发者的精品内容学习社区,助力成长!

更多推荐