VueJs 搭建Axios接口请求工具


Posted in Javascript onNovember 20, 2017

axios 简介

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  1. 从浏览器中创建 XMLHttpRequest
  2. 从 node.js 发出 http 请求
  3. 支持 Promise API
  4. 拦截请求和响应
  5. 转换请求和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防止 CSRF/XSRF

上一章,我们认识了项目的目录结构,以及对项目的目录结构做了一些调整,已经能把项目重新跑起来了。今天我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的,如果你需要这些功能就需要安装对应的工具。

支持ajax请求的工具很多,像superagent和axios。今天我们用的就是axios,因为听说最近网上大部分的教程书籍都使用的是axios,本身axios这个工具就已经做了很好的优化和封装,但是在使用时,还是比较繁琐,所以我们来重新封装一下。

安装Axios工具

VueJs 搭建Axios接口请求工具

cnpm install axios -D 

在安装的时候,一定要切换进入咱们的项目根目录,再运行安装命令,然后如提示以上信息,则表示安装完成。

封装Axios工具

编辑src/api/index.js文件(我们在上一章整理目录结构时,在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)
 }
}

更多关于AxIos的解释请参见:https://github.com/mzabriskie/axios

配置Axios工具

我们在使用之前,需要在src/main.js中进行简单的配置,先来看一下原始的main.js文件

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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 }
})

修改为:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
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 }
})

通过以上的配置,我们就可以在项目中使用axios工具了,接下来我们来测试一下这个工具。

使用Axios工具

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

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

我们在Index.vue中向浏览器的控制台输入一些接口请求到的数据,如果你和我也一样,那说明我们的接口配置完成正确。如下图:

VueJs 搭建Axios接口请求工具

如果你是按我的操作一步一步来,那最终结果应该和我一样。如果出错请仔细检查代码。

Javascript 相关文章推荐
js弹出层之1:JQuery.Boxy (二)
Oct 06 Javascript
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
如何在node的express中使用socket.io
Dec 15 Javascript
深入分析下javascript中的[]()+!
Jul 07 Javascript
js绘制圆形和矩形的方法
Aug 05 Javascript
谈谈JavaScript中的几种借用方法
Aug 09 Javascript
javascript prototype原型详解(比较基础)
Dec 26 Javascript
JS基于贪心算法解决背包问题示例
Nov 27 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
AngularJs1.x自定义指令独立作用域的函数传入参数方法
Oct 09 Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 #Javascript
详解vue+css3做交互特效的方法
Nov 20 #Javascript
解读ES6中class关键字
Nov 20 #Javascript
利用canvas中toDataURL()将图片转为dataURL(base64)的方法详解
Nov 20 #Javascript
Node.js 中使用 async 函数的方法
Nov 20 #Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 #Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 #Javascript
You might like
一个PHP数组应该有多大的分析
2009/07/30 PHP
php5.2以下版本无json_decode函数的解决方法
2014/05/25 PHP
PHP实现的简单对称加密与解密方法实例小结
2017/08/28 PHP
PHP实现的AES双向加密解密功能示例【128位】
2018/09/03 PHP
PHP预定义接口――Iterator用法示例
2020/06/05 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
vue axios数据请求get、post方法及实例详解
2018/09/11 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
Vue单文件组件开发实现过程详解
2020/07/30 Javascript
浅析VUE防抖与节流
2020/11/24 Vue.js
Python爬虫文件下载图文教程
2018/12/23 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
python 求定积分和不定积分示例
2019/11/20 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
Python matplotlib 绘制双Y轴曲线图的示例代码
2020/06/12 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
Shell如何接收变量输入
2012/09/24 面试题
简单的JAVA编程面试题
2013/03/19 面试题
浅谈react路由传参的几种方式
2021/03/23 Javascript
中药学专业求职信
2014/05/31 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
小学生2015教师节演讲稿
2015/03/19 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
2015中秋祝酒词
2015/08/12 职场文书
2016年端午节红领巾广播稿
2015/12/18 职场文书