如何将axios封装并使用拦截器统一处理接口，实现超详细的教学改写？

本文共计730个文字，预计阅读时间需要3分钟。

最近从0开始搭建了一个vue-cli项目，虽然axios也可以直接拿来用，但接口比较散乱，不太便于维护，也会产生大量重复代码，所以作者对axios进行了统一接口处理。

最近从0开始搭了一个vue-cli的项目， 虽然axios也可以直接拿来用，但是对接口比较零散，不太好进行维护，也会产生大量的重复代码，所以笔者对axios进行了统一接口处理，废话不多说，直接上代码。

首先，在vue-cli项目的src路径下新建一个axios文件夹，在axios文件夹里新建aps.js和request.js，api.js用于写接口，对axios的封装写在request.js里，项目机构如图：

1. axios统一封装

然后开始统一封装axios， 首先引入axios、qs依赖，引入main.js主要是用于后面对接口进行统一处理，比如调接口的时候，显示loading等。这个main.js根据你个人情况，可加可不加。