vue项目中接口统一分装(vue二次分装axios）

接口统一分装(vue二次分装axios）"/>

vue项目中接口统一分装(vue二次分装axios）

　　Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。

　　从浏览器中创建 XMLHttpRequests

　　从 node.js 创建 http 请求

　　支持 Promise API

　　拦截请求和响应

　　转换请求数据和响应数据

　　取消请求

　　自动转换 JSON 数据

　　客户端支持防御 XSRF

　　PS:防止XSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

　　ps: axios文档

　　接下来是不是就该这样引入vue项目中使用了吧

　　NO NO 我们正式开始axios的正式分装

　　首先我们在src目录下新建两个文件加，models、pluging

　　目录结构

　　接着我们在pluging文件夹下面新建一个 httpClient.js的文件。好了，我们可以开始引用axios了。

　　下面是完整的 httpClient.js 文件

　　接下来到最最重要到时候了，还记得我们之前建立的models文件夹吗，对，要用到它了，首先我们在里面新建一个js文件，index.js.

　　接下来在models 新建接口文件，例如我们新建一个auth.js

　　好了接下来在 index.js 文件里面引入它

　　很好，完成登录接口的分装，接下来在 models 分装更多的接口，一个接口一个js文件

　　接口已经完美分装好了，接下来就是使用了，在main.js里面引入它

　　完美，接下来就是在页面使用这些接口了。