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 相关文章推荐
项目实践之javascript技巧
Dec 06 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
JavaScript的removeChild()函数用法详解
Dec 27 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
三种方式实现瀑布流布局
Feb 10 Javascript
微信小程序实现炫酷的弹出式菜单特效
Jan 28 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
Jul 25 Javascript
Vue基于localStorage存储信息代码实例
Nov 16 Javascript
Javascript中async与await的捕捉错误详解
Mar 03 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 团购折扣计算公式
2011/11/24 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php的GD库imagettftext函数解决中文乱码问题
2015/01/24 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
CI框架数据库查询缓存优化的方法
2016/11/21 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
PHP手机号码及邮箱正则表达式实例解析
2020/07/11 PHP
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
2013/08/13 Javascript
jquery对单选框,多选框,文本框等常见操作小结
2014/01/08 Javascript
jquery easyui 对于开始时间小于结束时间的判断示例
2014/03/22 Javascript
JQuery中使用.each()遍历元素学习笔记
2014/11/08 Javascript
jquery插件qrcode在线生成二维码
2015/04/26 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
jQuery实现简单弹窗遮罩效果
2017/02/27 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
详解使用 Node.js 开发简单的脚手架工具
2018/06/08 Javascript
微信小程序的授权实现过程解析
2019/08/02 Javascript
Layui带搜索的下拉框的使用以及动态数据绑定方法
2019/09/28 Javascript
VUE使用 wx-open-launch-app 组件开发微信打开APP功能
2020/08/11 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
python 简单的多线程链接实现代码
2016/08/28 Python
基于Python的接口测试框架实例
2016/11/04 Python
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
Python 一句话生成字母表的方法
2019/01/02 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
Python控制鼠标键盘代码实例
2020/12/08 Python
中国海淘族值得信赖的海淘返利网站:55海淘
2017/01/16 全球购物
澳洲最大的时尚奢侈品电商平台:Cettire
2020/06/15 全球购物
运动会获奖感言
2014/02/11 职场文书
自我检讨书范文
2015/01/28 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
初中生活随笔
2015/08/15 职场文书
2016年中秋祝酒词
2015/11/26 职场文书
小学生六年级作文之关于感恩
2019/08/16 职场文书