Vue中Axios的封装管理

Vue Axios 封装

定义

Axios 是一个基于 promise 的 HTTP 库，能够用在浏览器和 node.js 中。

特性

• 支持Promise API

• 拦截请求和响应

• 转换请求数据和响应数据

• 自动转换JSON数据

• 客户端支持 XRSF

回归正题

在Vue 项目开发中，咱们与接口打交道最多了，如何来优雅的使用Axios变得尤其重要了。 一般咱们经过客户端向后端发送请求来接收接口数据，而后将这些接口数据完美的呈现到网页上。

同时，与接口打交道那么就会用到网络请求，与 Vue 结合的网络请求库有哪些呢？

• vue-resource
• axios 官方推荐
• fetch

本章将使用 axios 来完成接口的请求，以及对axios 请求的封装，来知足业务开发。

一次编写， 终身受用 😁

开始

安装axios

yarn add axios

封装http.js

建立单独文件来封装axios，封装的同时，你须要和 后端 协商好一些约定，请求头 ， 状态码, 请求超时时间.......

引入必要的UI 提示框, 不一样的状态码，提示不一样的响应，

请求头 : 来实现一些具体的业务，必须携带一些参数才能够请求(例如：会员业务)

状态码 : 根据接口返回的不一样status ， 来执行不一样的业务，这块须要和后端约定好。

请求拦截器: 根据请求的请求头设定，来决定哪些请求能够访问。

响应拦截器： 这块就是根据 后端 返回来的状态码断定执行不一样业务

完整代码

配置多域名请求不一样URL

通常本身写项目时， 一个接口URL 就能够了。但在实际项目开发中，一个项目可能会请求不一样的服务器的url，这时，咱们简单的配置下访问接口域名，而后不一样域名的接口，直接换对象调用便可，这样无论有多少个不一样的接口，咱们均可以很好的管理使用。

完整代码

到如今 axios 基本封装完成，能够知足你基本业务需求了

axios 封装完事了， 接下来就是封装单独的业务模块请求了，这块怎么划分 彻底看我的风格,， 下面我会列出 两种

业务需求注意:

• 必须引入 http.js axios
• 必须引入 base.js 接口url
• 必须在Vue 入口文件下，引入业务需求 api.js,而且将api挂载到Vue 原型上
• 剩下就是写你对应的业务需求了

风格1

全部请求都写到一个api.js 文件下

完整代码

如何使用呢？

全局挂载api.js

业务组件调用

---

风格2

能够新建对应组件模块的文件来管理对应的 业务请求，这样接口出现问题，定位错误快，最后将不一样的文件 引入到一个 api,js 里， 这样管理起来很方便。

如何使用呢？

封装 与 不封装对比

没有封装， 裸奔的Axios

最后

到如今，Axios基本封装完事了，也封装了业务模块的请求，基本上能够知足基本的业务需求了。若是项目还须要其它需求，还能够在原有的上面进行再次封装。

封装后，若是项目由接口域名有变更，执行调用base.js下的域名对象便可。