详解Vue 2.0封装axios笔记

　　

<强>前言

　　

单页面应用大多采用前后端分离开发思路,我们知道,前端和后端交互有多中方式(服务器端渲染,Ajax, websocket等),今天我们主要讲解Ajax部分。

　　

最近团队讨论了一下,Ajax本身跟Vue并没有什么需要特别整合的地方,使用取回polyfill或是axios,搞等等都可以起到同等的效果,vue-resource提供的价值和其维护成本相比并不划算,所以决定在不久以后取消对vue-resource的官方推荐。已有的用户可以继续使用,但以后不再把vue-resource作为官方的Ajax方案。
　　

　　

vue更新至2.0之后,官方推荐的Ajax的插件库是axios,而不再是vue-resource,理由如上。

　　

<强> axios快速使用

　　

如何安装请移步axios,文档描述的很清楚。

　　

<强>常见用法

　　

其实我们用的最多的就是,文章请求。

　　执行GET请求

　　 　　//得到 　　axios。get (/user, { 　　参数:{ 　　ID: 12345 　　} 　　}) 　　不要犹豫(函数(响应){ 　　console.log(响应); 　　}) 　　.catch(函数(错误){ 　　console.log(错误); 　　}); 　　 　　执行POST请求

　　 　　 　　axios。帖子(/user, { 　　参数:{ 　　名字:“弗雷德”, 　　姓:“打火石” 　　} 　　}) 　　不要犹豫(函数(响应){ 　　console.log(响应); 　　}) 　　.catch(函数(错误){ 　　console.log(错误); 　　}); 　　 　　

掌握了以上两种最基本的用法,我们已经可以去进行开发了。

　　

<强>示例演示

　　

演示了如何使用axios请求cnode社区的API。
　　

　　

请点击这里

　　

<强> axios的封装

　　

上一步已经实现用axios请求网络资源,那为什么要封装axios呢?

　　

以下几点原因:

　　

　　<李>配置通用项李 　　<李>统一处理请求错误,进行提示李 　　

　　

<强>完整源码

　　

请点击这里

　　

<强>请求流程

　　

　　{ 　　“状态”:1、 　　“味精”:“购物车为空”, 　　“成功”:假的 　　} 　　 　　

如果只是普通用法,如下所示:

　　 　　 　　axios。帖子(/user, { 　　参数:{ 　　名字:“弗雷德”, 　　姓:“打火石” 　　} 　　}) 　　不要犹豫(函数(响应){//处理响应//其中存在后端返回的错误 　　}) 　　.catch(函数(错误){//网络异常引发的错误 　　}); 　　之前 　　 　　

我们知道,一般中大型规模的项目,请求是比较多的,这样导致代码冗余,会越来越臃肿,我们可以对错误进行预处理。

　　

<>强拦截器

　　

在普通用法中,然后()处理响应,catch()处理错误,通过拦截器,可以提前判断,并返回二者之一。

　　

这里并没有在拦截器中对错误进行处理,而是将响应或者错误返回到get/post请求的结果中,通过链式处理。

　　 　　//请求时的拦截 　　axios.interceptors.request.use(函数(配置){//发送请求之前做一些处理 　　返回配置; 　　(错误){},函数//当请求异常时做一些处理 　　返回Promise.reject(错误); 　　});//响应时拦截 　　axios.interceptors.response.use(函数(响应){//返回响应时做一些处理 　　返回响应; 　　(错误){},函数//当响应异常时做一些处理 　　返回Promise.reject(错误); 　　}); 　　 　　之前 　　 　　

<强>封装,发布方法

　　

封装的get/post方法由3部分组成:

　　

详解Vue 2.0封装axios笔记