本章概述
在vue-resource停止维护后，axios成为vue攻城狮最喜爱的与后台交互的工具。使用axios时，通常会对axios进行一次编辑，是axios染上自己的色彩。根据开发习惯，后端的接收与返回等我们会使重新编辑的axios方法更有针对性。下面是本次的axios文件举例。其中涉及了4种常用的请求响应组合。
baseURL
导入需要用到的包是最基本的准备工作，如图3-1，首先axios我们肯定是需要的，编辑中我们做了网络错误重定向的功能，所以我们也导入了vue与router。从config.js中取baseurl，声明变量baseUrl。
图3-1.初始化
有针对性的请求函数体
图3-2是axios编辑后的主体部分，主要涉及：JSON格式的字符串作为数据的请求，formData形式的表单提交式请求，返回文件数据流处理为Blob的形式的响应处理。
图3-2.函数体预览
下面对函数体进行分步详解。
初始化axios与请求配置
初始化axios对象，并声明一个configMap包含请求头等配置信息。初始化时默认发送JSON格式字符串数据，响应得到的是数据集合。这种形式时我们传进doRequest的方法的params是一个对象（集合），通过axios对象中，transformRequest属性设置字符串化处理。headers中设置发送数据类型，现在先默认发送JSON，所以我们设置属性Content-Type为application/json。
图3-3.初始化变量
处理其他数据类型，更新上述变量
doRequest中type参数可提示接下来要处理的数据类型是什么。本次定义了4种，JSON（发送JSON数据），
formData（发送表单型数据），JSON_Blob（发送JSON数据返回文件数据流），formData_Blob（发送表单型数据返回文件数据流）。
当发送表单行数据时，我们需要更新axios对象，取消transformRequest中的json字符转换。并且修改headers中Content-Type为mulitipart/form-data。
当返回文件数据流时，我们应该在configMap中添加responseType：blob的属性。
图3-4.基于数据类型的分支
响应处理
我们通过myAxios(configMap)发送请求，then()回调中处理响应返回的数据，本次如果返回的是数据集合，我们对数据集合进行一些处理，如图3-7中我们先判断res.data.bizCode和res.data.success。这里涉及到后台返回给我们什么样的数据，我们就需要做对应操作，一个好的后台传递回来的数据是有规律性有固定格式的。我介绍下我平时接收到的数据，首先最外层res中包含了响应码与返回数据等，提示你本次请求是否成功。如果成功了，我们从res.data中就可拿到后台返回给我们数据。这里贴一下我司优秀的后台是如何返回数据的，作为例子如图3-5,3-6
图3-5.res.data
res.data中一般应该存储回执信息（msg），取数据成功与否（success）等基本信息，然后data中存储数据本体，如果是分页数据那么应该像图3-6中这样，这里包含了各种分页信息，大家从英文直译应该能猜出意思，不一一解释了。然后list中才是存储对象数组。ps.幸福都前端背后都有一个优秀的后台，请大家远离蛇皮后台。
图3-6.res.data.data分页信息
这里我们可以对返回的数据集进行一系列骚操作。如下图，我做了网路错误重新登录以及登录后重定向的操作。
图3-7.响应处理
如果返回的是数据流，一般没什么好处理的我们可以直接返回res或者res.data。res.data中就是我们需要的文件Blob型，如图3-8是返回文件数据流时res的内容。
图3-8.res文件数据流
通过new Blob()的方法初始化一个根据返回数据的Blob，objectUrl获得一个url然后就可用这个url来下载等，如下图3-9.
图3-9.处理Blob的方法
export
最后我们设置导出方法使其他位置的文件能够使用，你可以如如图3-10的4个方法，基于method分化，也可以只写一个如注释掉的doRequest那样。或者换成基于数据类型的分化等。
图3-10导出
下一篇：vue-router相关详解 预计12月11日更新
网友评论