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获取数组任意个不重复的随机数组元素
Mar 15 Javascript
ExtJS4中的requires使用方法示例介绍
Dec 03 Javascript
javascript学习笔记(七)Ajax和Http状态码
Oct 08 Javascript
原生JavaScript编写俄罗斯方块
Mar 30 Javascript
尝试动手制作javascript放大镜效果
Dec 25 Javascript
angular源码学习第一篇 setupModuleLoader方法
Oct 20 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
node使用Koa2搭建web项目的方法
Oct 17 Javascript
用WebStorm进行Angularjs 2开发(环境篇:Windows 10,Angular-cli方式)
Dec 05 Javascript
vue draggable resizable gorkys与v-chart使用与总结
Sep 05 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
JS 图片压缩原理与实现方法详解
Apr 29 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实现链结人气统计
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
php与paypal整合方法
2010/11/28 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
PHP 实现类似js中alert() 提示框
2015/03/18 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
jQuery 研究心得 取得属性的值
2007/11/30 Javascript
得到form下的所有的input的js代码
2013/11/07 Javascript
JS完整获取IE浏览器信息包括类型、版本、语言等等
2014/05/22 Javascript
使用jquery解析XML示例代码
2014/09/05 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
2015/03/21 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
详解能在多种前端框架下使用的表格控件
2017/01/11 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
vue-router+nginx 非根路径配置方法
2018/06/30 Javascript
vue如何获取自定义元素属性参数值的方法
2019/05/14 Javascript
electron 安装,调试,打包的具体使用
2019/11/06 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python装饰器初探(推荐)
2016/07/21 Python
python数据结构之列表和元组的详解
2017/09/23 Python
wxPython实现窗口用图片做背景
2018/04/25 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python GUI布局尺寸适配方法
2018/10/11 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
python opencv实现证件照换底功能
2019/08/19 Python
如何使用Python抓取网页tag操作
2020/02/14 Python
Python编写万花尺图案实例
2021/01/03 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
大学英语演讲稿(中英文对照)
2014/01/14 职场文书
安全员岗位职责
2015/02/10 职场文书