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 刷新框架页的代码
Apr 13 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
新手快速学习JavaScript免费教程资源汇总
Jun 25 Javascript
基于JQuery打造无缝滚动新闻步骤详解
Mar 31 Javascript
JS中innerHTML和pasteHTML的区别实例分析
Jun 22 Javascript
面试常见的js算法题
Mar 23 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
微信小程序 聊天室简单实现
Apr 19 Javascript
angular.js和vue.js中实现函数去抖示例(debounce)
Jan 18 Javascript
vue项目中实现图片预览的公用组件功能
Oct 26 Javascript
OpenLayers3实现鼠标移动显示坐标
Sep 25 Javascript
微信小程序实现倒计时功能
Nov 19 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
CodeIgniter图像处理类的深入解析
2013/06/17 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
2009/12/15 Javascript
jQuery EasyUI 中文API Button使用实例
2010/04/14 Javascript
js中将URL中的参数提取出来作为对象的实现代码
2011/08/16 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
2012/01/04 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Jquery实现弹出层分享微博插件具备动画效果
2013/04/03 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
nodejs爬虫抓取数据之编码问题
2015/07/03 NodeJs
jQuery常见面试题之DOM操作详析
2017/07/05 jQuery
vue自定义指令用法经典实例小结
2019/03/16 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛5.21 LGD-CDEC VS NE
2014/05/22 DOTA
[01:15:36]加油刀塔第二期网络版
2014/08/09 DOTA
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
Python分布式进程中你会遇到的问题解析
2019/05/28 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
css3 background属性调整增强介绍
2010/12/18 HTML / CSS
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
吉力贝官方网站:Jelly Belly
2019/03/11 全球购物
师范生实习自我鉴定
2013/11/01 职场文书
教育学专业毕业生的自我鉴定
2013/11/26 职场文书
毕业生找工作的求职信范文
2013/12/24 职场文书
奥巴马就职演讲稿
2014/05/15 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
房屋产权共有协议书范本
2014/11/03 职场文书
星际争霸 Light vs Action 一场把教主看到鬼畜的比赛
2022/04/01 星际争霸
python运行脚本文件的三种方法实例
2022/06/25 Python