Vue 脚手架之 Axios 封装入门

在前端技术迅猛发展的背景下，Vue 可以说在构建管理平台，H5商城等各式各样的项目应用中遍地开花，而基于 Vue.js 的 Vue 全家桶系列也是越来越多的在公司项目中得到了应用。

本文主要是基于 Vue-cli 脚手架，来对公司遇到的项目时候，怎么样对项目进行一个模块化的划分，以及相关的 HTTP 请求 Axios 封装、公共组件和业务组件的划分和封装、父子组件之间的数据通信，另外会涉猎一般互联网公司一个项目开发的流程，以及会涉猎到的框架等。

• 涉及模块

  • Axios 请求模块；
  • 组件模块【公共组件、业务组件】；
  • 父子组件之间的数据通信讲解。
• 适宜人群
  • 没有 Vue 实战的前端小伙伴 ；
  • 对项目不知道如何拆分功能的小伙伴；
  • 对公司里面项目开发流程不熟悉的小伙伴。

1. 简述

大家都知道，我们在做一个项目的之前，需要对项目进行功能模块分析，会对项目的各个模块进行一个封装，以便调用，比如我们的 http 请求、路由 router、公共组件等，这篇文章就带大家简单的来一个 http 请求中常用的 axios 封装，为什么要封装一下呢？相信大家都知道，很多错误 code 集中处理的效率比单独每个地方调用要好很多；或者是登陆的状态判断等等，都可以写到这里，那么我们开始吧。

2. 或许很多人在用 axios 的时候，都是直接按照api的get、post 请求直接来写我们的业务请求，比如：

这是官网的一个 post 请求的例子，相信大家都能看明白：api、请求参数、成功回调、失败回调。

但是大家有没有想过，当访问页面时，有时会要求我们重新登录后再访问该页面，也就是登陆认证失效了，或者是验证登陆 token 依然存在，但是却失效了等等情况，所以单单判断本地是不能解决问题的，比如请求时服务器返回的是 401 错误，授权出错，也就是没有权利访问该页面等等情况， 我们都可以在发送所有请求之前和操作服务器响应数据之前对这种情况过滤。

好了，我们接着来看：

2.1 请求拦截

像我平常做的话，对于请求的拦截还是比较简单的，就是给 http 加了一个 headers 请求头，当然大家也可以做更多的事情，比如：

我们可以给请求拦截加 loading 状态，加在超时回调等等。

2.2 响应拦截

对于响应拦截，或许大家都猜到了，我们是对 http 请求回来的一些状态码，包括我们自己的服务器返回的错误码进行一个逻辑处理。

比如我们来个最简单的：

请求回来之后 loading 的关闭，请求回来的错误处理等等都可以写在响应的逻辑块中。

再给小伙伴们分享一个我自己的处理，无非就是多了一些状态的判断而已。

我是做了两种的请求逻辑判断：

• 第一种是 response 成功，有我们服务器返回的 data 的时候，根据我们服务器返回的业务 code 来进行一个判断，比如登陆成功、未登陆、登陆失效等等，都可以在相应的 case 中写逻辑，最常见的就是 router 的跳转；
• 第二种就是对 http 的响应 status 做一个处理，404、401、500、503 等等都可以做一个容错处理的优化等等

好了，相信以大家的能力，很多人都已经能做到举一反三了，或者说很多以前掌握了的可以做的不好的地方指点一二，嘿嘿，谢谢大家啦。

---

本文首发于GitChat，未经授权不得转载，转载需与GitChat联系。

阅读全文: http://gitbook.cn/gitchat/activity/5ad8106128e15d0c7b908be8

您还可以下载 CSDN 旗下精品原创内容社区 GitChat App ，阅读更多 GitChat 专享技术内容哦。