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 图片延迟加载并等比缩放插件
Nov 09 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
Jul 31 Javascript
通过隐藏iframe实现文件下载的js方法介绍
Feb 26 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
Sep 04 Javascript
浅谈JavaScript数据类型
Mar 03 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
JS常见算法详解
Feb 28 Javascript
完美实现js选项卡切换效果(一)
Mar 08 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
刷新页面后让控制台的js代码继续执行
Sep 20 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创建基本身份认证站点的方法详解
2013/06/08 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php清除和销毁session的方法分析
2015/03/19 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
php自动加载方式集合
2016/04/04 PHP
PHP数组实例详解
2016/06/26 PHP
Yii中CGridView禁止列排序的设置方法
2016/07/12 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
优化网页之快速的呈现我们的网页
2007/06/29 Javascript
javascript下对于事件、事件流、事件触发的顺序随便说说
2010/07/17 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
Javascript基础教程之for循环
2015/01/18 Javascript
javascript中hasOwnProperty() 方法使用指南
2015/03/09 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
vue+webpack实现异步组件加载的方法
2018/02/03 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
vue项目创建并引入饿了么elementUI组件的步骤
2019/04/11 Javascript
js常用方法、检查是否有特殊字符串、倒序截取字符串操作完整示例
2020/01/26 Javascript
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
删除python pandas.DataFrame 的多重index实例
2018/06/08 Python
10个Python小技巧你值得拥有
2018/09/29 Python
python实现烟花小程序
2019/01/30 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
深入了解Python装饰器的高级用法
2020/08/13 Python
python 求两个向量的顺时针夹角操作
2021/03/04 Python
CSS3的一个简单导航栏实现
2015/08/03 HTML / CSS
描述RIP和OSPF区别以及特点
2015/01/17 面试题
土木建筑学生自我评价
2014/01/14 职场文书
趣味体育活动方案
2014/02/08 职场文书
我们的节日重阳节活动总结
2015/03/24 职场文书
MySQL 8.0 之不可见列的基本操作
2021/05/20 MySQL
如何通过简单的代码描述Angular父组件、子组件传值
2022/04/07 Javascript