Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
来源:互联网 发布:李玖哲 解脱 知乎 编辑:程序博客网 时间:2024/05/28 19:24
Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
2017年8月补充
2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。
本来写这一系列的博文只是为了给自己看的,但没想到的是,这系列博文的点击量超过了2万以上,搜索引擎的排名也是非常理想,这让我诚惶诚恐,生怕我写的博文有所纰漏,误人子弟。
再者,这一年的发展,VUE 项目快速迭代,看着我一年前写的博文,很可能各种提示已经发生改变,对照着过时的资料,非常可能导致新手在学习的过程中产生不必要的困扰。
因此,本人决定,重写这个系列的博文,力求以简明、清晰、准确的图文以及代码描述,配合 github 的项目开源代码,给各位 VUE 新手提供一个高质量的入门文案。
以下为我写的博文:
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结
以下为原文
前言
我们在前面的教程Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表当中使用了superagent
这个API请求工具。
但是现在很多主流的教程都是使用的axios
这个工具。因此,我就想重构一下我们的这个文件,让我们的项目,也能跑在axios
这个接口工具上。
目标是,完美兼容我们的原有代码,而不需要做任何修改,只需要调整api.js
文件即可。
一般,我们在项目中只需要使用到四个方法,就是增删改查,分别是POST
、DELETE
、PUT
、GET
方法。因此,我们只封装了这四个方法。
superagent
和axios
是类似的工具,但是他们的代码风格,以及实现功能是有所差异的。具体的差异,可以查看Comparing axios vs. got vs. request vs. reqwest vs. superagent这篇文章,这里有详细的对比。
但我们不管他们能实现什么,我们只需要他们能实现我们的功能即可。
改造代码如下:
// 配置API接口地址var root = process.env.API_ROOT// 引用axiosvar axios = require('axios')// 自定义判断元素类型JSfunction toType (obj) { return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()}// 参数过滤函数function filterNull (o) { for (var key in o) { if (o[key] === null) { delete o[key] } if (toType(o[key]) === 'string') { o[key] = o[key].trim() } else if (toType(o[key]) === 'object') { o[key] = filterNull(o[key]) } else if (toType(o[key]) === 'array') { o[key] = filterNull(o[key]) } } return o}/* 接口处理函数 这个函数每个项目都是不一样的,我现在调整的是适用于 https://cnodejs.org/api/v1 的接口,如果是其他接口 需要根据接口的参数进行调整。参考说明文档地址: https://cnodejs.org/topic/5378720ed6e2d16149fa16bd 主要是,不同的接口的成功标识和失败提示是不一致的。 另外,不同的项目的处理方法也是不一致的,这里出错就是简单的alert*/function apiAxios (method, url, params, success, failure) { if (params) { params = filterNull(params) } axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }) .then(function (res) { if (res.data.success === true) { if (success) { success(res.data) } } else { if (failure) { failure(res.data) } else { window.alert('error: ' + JSON.stringify(res.data)) } } }) .catch(function (err) { let res = err.response if (err) { window.alert('api error, HTTP CODE: ' + res.status) return } })}// 返回在vue模板中的调用接口export default { get: function (url, params, success, failure) { return apiAxios('GET', url, params, success, failure) }, post: function (url, params, success, failure) { return apiAxios('POST', url, params, success, failure) }, put: function (url, params, success, failure) { return apiAxios('PUT', url, params, success, failure) }, delete: function (url, params, success, failure) { return apiAxios('DELETE', url, params, success, failure) }}
可以将这段代码替换我们原有的api.js中的代码。
小结
别的没啥感觉,就是感觉axios
的代码清晰了许多。虽然结果是一样的。我也算明白为什么这东西会被vue官方推荐了。
本文由FungLeo原创,允许转载,但转载必须附带首发链接。如果你不带链接,我将采取包括但不限于深深的鄙视你等手段!
- Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- hibernate左连接查询时在easyUI的dataGrid中有些行取值为空的解决办法
- Python的hasattr() getattr() setattr() 函数使用方法
- 利用XtraBackup做全量备份、增量备份、数据目录相同恢复、数据目录不同恢复、单表备份恢复
- Spring Data
- jQuery的子元素过滤选择器
- Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
- web测试工具SoapUI NG Pro v2.0发布,来看看全新的仪表盘
- java如何解决高并发
- Windows下利用Python3绘制Caffe中的网络结构
- 浅谈https\ssl\数字证书
- Tomcat启动异常
- 网易云信云叮当红包接入流程分享
- Objective-C Runtime入院第一天
- Java抽象类和接口的区别