Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
来源:互联网 发布:去外企工作好吗 知乎 编辑:程序博客网 时间:2024/05/21 21:37
前情回顾
在上一篇《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由》,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了。但是,这里还没有涉及到 AJAX
请求接口的内容。
vue
本身是不支持 ajax
接口请求的,所以我们需要安装一个接口请求的 npm
包,来使我们的项目拥有这个功能。
这其实是一个重要的
unix
思想,就是一个工具只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行。如果你以前是一个jquery
重度用户,那么可能理解这个思想一定要深入的理解。
支持 ajax
的工具有很多。一开始,我使用的是 superagent
这个工具。但是我发现近一年来,绝大多数的教程都是使用的 axios
这个接口请求工具。其实,这本来是没有什么差别的。但是为了防止你们在看了我的博文和其他的文章之后,产生理念上的冲突。因此,我也就改用 axios
这个工具了。
本身, axios
这个工具已经做了很好的优化和封装。但是,在使用的时候,还是略显繁琐,因此,我重新封装了一下。当然,更重要的是,封装 axios
这个工具是为了和我以前写的代码的兼容。不过我封装得很好,也推荐大家使用。
封装 axios 工具,编辑 src/api/index.js 文件
首先,我们要使用 axios
工具,就必须先安装 axios
工具。执行下面的命令进行安装
- 1
由于宿舍翻墙条件不好,这里使用
cnpm
替代
这样,我们就安装好了 axios
工具了。
还记得我们在第三篇博文中整理的系统结构吗?我们新建了一个 src/api/index.js
这个空文本文件,就那么放在那里了。这里,我们给它填写上内容。
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
好,我们写好这个文件之后,保存。
2017年10月20日补充,删除了评论中有人反映会出错的
return
,确实这个return
是没有什么作用的。不过我这边确实没出错。没关系啦,本来就没啥用,只是一个以前的不好的习惯代码。
有关 axios
的更多内容,请参考官方 github
: https://github.com/mzabriskie/axios ,中文资料自行百度。
但就是这样,我们还不能再 vue
模板文件中使用这个工具,还需要调整一下 main.js
文件。
调整 main.js 绑定 api/index.js 文件
这次呢,我们没有上来就调整 main.js
文件,因为原始文件就配置得比较好,我就没有刻意的想要调整它。
原始文件如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
我们插入以下代码:
- 1
- 2
- 3
- 4
也就是讲代码调整为:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
好了,这样,我们就可以在项目中使用我们封装的 api
接口调用文件了。
测试一下看看能不能调通
我们来修改一下 src/page/index.vue
文件,将代码调整为以下代码:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
好,这里是调用 cnodejs.org
的 topics
列表接口,并且将结果打印出来。
我们在浏览器中打开控制台,看看 console
下面有没有输出入下图一样的内容。如果有的话,就说明我们的接口配置已经成功了。
好,如果你操作正确,代码没有格式错误的话,那么现在应该得到的结果是和我一样的。如果出错或者怎么样,请仔细的检查代码,看看有没有什么问题。
如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
本文由 FungLeo 原创,点击-首发链接。
- 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重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
- Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
- 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重制版(十)打包项目并发布到子目录
- Leetcode 77. combination
- 1122. Hamiltonian Cycle (25)
- sublime 支持vue语法高亮
- js-----初步了解this对象
- multer+Ajax(es6版)实现免跳转上传图片
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
- HDOJ 2547 无剑无我(求两点距离)
- matlab——NN代码(nnsetup)解析
- 20171202:方法和数组的学习
- 伪码农的日志_12.2_软件工程过程模型
- idea15更改项目的jdk版本
- latex中同一处引用多篇文献
- Handler && Timer(音乐播放器)
- 不同版本Hidernate获得SessionFactory对象的方法