Vue2 配置 Axios api 接口调用文件的方法


Posted in Javascript onNovember 13, 2017

前情回顾

在上一篇中,我们通过配置基本的信息,已经让我们的项目能够正常的跑起来了。但是,这里还没有涉及到 AJAX 请求接口的内容。

vue 本身是不支持 ajax 接口请求的,所以我们需要安装一个接口请求的 npm 包,来使我们的项目拥有这个功能。

这其实是一个重要的 unix 思想,就是一个工具只做好一件事情,你需要额外的功能的时候,则需要安装对应的软件来执行。如果你以前是一个 jquery 重度用户,那么可能理解这个思想一定要深入的理解。

支持 ajax 的工具有很多。一开始,我使用的是 superagent 这个工具。但是我发现近一年来,绝大多数的教程都是使用的 axios 这个接口请求工具。其实,这本来是没有什么差别的。但是为了防止你们在看了我的博文和其他的文章之后,产生理念上的冲突。因此,我也就改用 axios 这个工具了。

本身, axios 这个工具已经做了很好的优化和封装。但是,在使用的时候,还是略显繁琐,因此,我重新封装了一下。当然,更重要的是,封装 axios 这个工具是为了和我以前写的代码的兼容。不过我封装得很好,也推荐大家使用。

封装 axios 工具,编辑 src/api/index.js 文件

首先,我们要使用 axios 工具,就必须先安装 axios 工具。执行下面的命令进行安装

npm install axios -D

Vue2 配置 Axios api 接口调用文件的方法

由于宿舍翻墙条件不好,这里使用 cnpm 替代

这样,我们就安装好了 axios 工具了。

还记得我们在第三篇博文中整理的系统结构吗?我们新建了一个 src/api/index.js 这个空文本文件,就那么放在那里了。这里,我们给它填写上内容。

// 配置API接口地址
var root = 'https://cnodejs.org/api/v1'
// 引用axios
var axios = require('axios')
// 自定义判断元素类型JS
function 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)
  }
 })
}

// 返回在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)
 }
}

 好,我们写好这个文件之后,保存。

2017年10月20日补充,删除了评论中有人反映会出错的 return ,确实这个 return 是没有什么作用的。不过我这边确实没出错。没关系啦,本来就没啥用,只是一个以前的不好的习惯代码。

有关 axios 的更多内容,请参考官方 github: https://github.com/mzabriskie/axios ,中文资料自行百度。

但就是这样,我们还不能再 vue 模板文件中使用这个工具,还需要调整一下 main.js 文件。

调整 main.js 绑定 api/index.js 文件

这次呢,我们没有上来就调整 main.js 文件,因为原始文件就配置得比较好,我就没有刻意的想要调整它。

原始文件如下:

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

我们插入以下代码:

// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api
 
也就是讲代码调整为:

import Vue from 'vue'
import App from './App'
import router from './router'

// 引用API文件
import api from './api/index.js'
// 将API方法绑定到全局
Vue.prototype.$api = api

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 template: '<App/>',
 components: { App }
})

 好了,这样,我们就可以在项目中使用我们封装的 api 接口调用文件了。

测试一下看看能不能调通

我们来修改一下 src/page/index.vue 文件,将代码调整为以下代码:

<template>
 <div>index page</div>
</template>
<script>
export default {
 created () {
  this.$api.get('topics', null, r => {
   console.log(r)
  })
 }
}
</script>

好,这里是调用 cnodejs.org 的 topics 列表接口,并且将结果打印出来。

我们在浏览器中打开控制台,看看 console 下面有没有输出入下图一样的内容。如果有的话,就说明我们的接口配置已经成功了。

Vue2 配置 Axios api 接口调用文件的方法

cnodejs.org 接口数据演示

好,如果你操作正确,代码没有格式错误的话,那么现在应该得到的结果是和我一样的。如果出错或者怎么样,请仔细的检查代码,看看有没有什么问题。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
jQuery对象初始化的传参方式
Feb 26 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
Sep 30 Javascript
thinkphp实现无限分类(使用递归)
Dec 19 Javascript
JavaScript的变量声明提升问题浅析(Hoisting)
Nov 30 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
基于Vue实现tab栏切换内容不断实时刷新数据功能
Apr 13 Javascript
vue watch普通监听和深度监听实例详解(数组和对象)
Aug 16 Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 Javascript
webstorm+vue初始化项目的方法
Oct 18 Javascript
原生JS实现贪吃蛇小游戏
Mar 09 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 #Javascript
js设置随机切换背景图片的简单实例
Nov 12 #Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 #Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 #Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 #Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 #Javascript
JS实现小球的弹性碰撞效果
Nov 11 #Javascript
You might like
用PHP和ACCESS写聊天室(十)
2006/10/09 PHP
全面解读PHP的人气开发框架Laravel
2015/10/15 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
centos下file_put_contents()无法写入文件的原因及解决方法
2017/04/01 PHP
提高 DHTML 页面性能
2006/12/25 Javascript
Javascript 获取字符串字节数的多种方法
2009/06/02 Javascript
js 小数取整的函数
2010/05/10 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
基于jquery的文字向上跑动类似跑马灯的效果
2014/09/22 Javascript
jQuery 移动端artEditor富文本编辑器
2016/01/11 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
SelecT下拉框选中和取值的解决方法
2016/11/22 Javascript
PHP7新特性简述
2017/06/11 Javascript
详细分析Node.js 多进程
2020/06/22 Javascript
python 字典(dict)遍历的四种方法性能测试报告
2014/06/25 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
pandas 取出表中一列数据所有的值并转换为array类型的方法
2018/04/11 Python
python遍历文件夹,指定遍历深度与忽略目录的方法
2018/07/11 Python
Python全排列操作实例分析
2018/07/24 Python
python 读取鼠标点击坐标的实例
2018/12/29 Python
解决django前后端分离csrf验证的问题
2019/02/03 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
django使用graphql的实例
2020/09/02 Python
HTML5应用之文件上传
2016/12/30 HTML / CSS
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
中医临床专业自我鉴定范文
2014/01/15 职场文书
料理师求职信
2014/01/30 职场文书
房屋继承公证书
2014/04/10 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2014年教师思想工作总结
2014/12/03 职场文书
2015年个人现实表现材料
2014/12/10 职场文书
Mysql中一千万条数据怎么快速查询
2021/12/06 MySQL
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
kubernetes集群搭建Zabbix监控平台的详细过程
2022/07/07 Servers