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 相关文章推荐
prototype class详解
Sep 07 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
JS模仿编辑器实时改变文本框宽度和高度大小的方法
Aug 17 Javascript
jQuery+Ajax实现限制查询间隔的方法
Jun 07 Javascript
Vue.js第四天学习笔记
Dec 02 Javascript
微信小程序 开发之滑块视图容器(swiper)详解及实例代码
Feb 22 Javascript
使用vue.js编写蓝色拼图小游戏
Mar 17 Javascript
vue 封装自定义组件之tabal列表编辑单元格组件实例代码
Sep 07 Javascript
JS实现移动端整屏滑动的实例代码
Nov 10 Javascript
JavaScript正则表达式验证登录实例
Mar 18 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 删除指定文件夹的实例讲解
2017/07/25 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
浅析PHP类的反射来实现依赖注入过程
2018/02/06 PHP
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Google排名中的10个最著名的 JavaScript库
2010/04/27 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS实现slide文字框缩放伸展效果代码
2015/11/05 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
浅谈js script标签中的预解析
2016/12/30 Javascript
详解原生js实现offset方法
2017/06/15 Javascript
Angular通过angular-cli来搭建web前端项目的方法
2017/07/27 Javascript
js 原生判断内容区域是否滚动到底部的实例代码
2017/11/15 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
2018/10/14 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
2019/11/14 Javascript
jQuery实现的上拉刷新功能组件示例
2020/05/01 jQuery
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
python使用WMI检测windows系统信息、硬盘信息、网卡信息的方法
2015/05/15 Python
Python两个内置函数 locals 和globals(学习笔记)
2016/08/28 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
django解决跨域请求的问题详解
2019/01/20 Python
python实现名片管理系统项目
2019/04/26 Python
Python3.5装饰器典型案例分析
2019/04/30 Python
TensorFlow绘制loss/accuracy曲线的实例
2020/01/21 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
Python如何执行精确的浮点数运算
2020/07/31 Python
python文件排序的方法总结
2020/09/13 Python
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
介绍一下EJB的体系结构
2012/08/01 面试题
电子商务系毕业生自荐信
2014/05/29 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
担保书范文
2019/07/09 职场文书