axios封装

首先在src目录下创建一个utils文件，里创建request.js文件

打开request.js文件import引用axios，创建axios实例，并添加请求拦截器，响应拦截器并导出

在src目录下新建一个api文件，创建api.js

在api.js中引入我们所导出的request.js这里所注意js后缀可不写

现在我们request可以认为它就是一个axios实例我们可以通过request.的方式直接求情数据如：

这样我们可以直接在组件内引用我们api文件下面的js使用。可是当我们如果同时请求同一接口下面的不同数据该怎么办呢？

• 这里所注意axios发送请求的时候是一个promise对象我们可以打印一下如：

  

我们可以在导出时自定义个函数如图getlist：

在组件内引入我们所创建的api

为了使得我们以后可以更好的维护代码我们对引入api进行了一个方法的封装自定义一个fetch方法如：

下面我们就可以直接在created生命周期里直接调用这个方法如：

小伙伴们现在我们可以使vue跑起来，看一看我们所获取到的数据了哦

代理的使用

我们可以认为/dev-api是target配置你跨域接口的名称

changOrigin是是否开启跨域

pathrewrite我们可以利用正则的方式使得我们所用的跨域接口直接可以以dev-api的形式访问如图：