Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

Vue2+VueRouter2+webpack+Axios 构建项目实战(七)重构API文件为使用axios

2017年8月补充

2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查,否则通不过校验。

本来写这一系列的博文只是为了给自己看的,但没想到的是,这系列博文的点击量超过了2万以上,搜索引擎的排名也是非常理想,这让我诚惶诚恐,生怕我写的博文有所纰漏,误人子弟。

再者,这一年的发展,VUE 项目快速迭代,看着我一年前写的博文,很可能各种提示已经发生改变,对照着过时的资料,非常可能导致新手在学习的过程中产生不必要的困扰。

因此,本人决定,重写这个系列的博文,力求以简明、清晰、准确的图文以及代码描述,配合 github 的项目开源代码,给各位 VUE 新手提供一个高质量的入门文案。

以下为我写的博文:

  1. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(一)基础知识概述
  2. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
  3. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(三)认识项目所有文件
  4. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(四)调整 App.vue 和 router 路由
  5. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(五)配置 Axios api 接口调用文件
  6. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(六)将接口用 webpack 代理到本地
  7. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(七)初识 *.vue 文件
  8. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(八)渲染一个列表出来先
  9. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(九)再把内容页面渲染出来
  10. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录
  11. Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十一)阶段性小结

以下为原文

前言

我们在前面的教程Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表当中使用了superagent这个API请求工具。

但是现在很多主流的教程都是使用的axios这个工具。因此,我就想重构一下我们的这个文件,让我们的项目,也能跑在axios这个接口工具上。

目标是,完美兼容我们的原有代码,而不需要做任何修改,只需要调整api.js文件即可。

一般,我们在项目中只需要使用到四个方法,就是增删改查,分别是POSTDELETEPUTGET方法。因此,我们只封装了这四个方法。

superagentaxios是类似的工具,但是他们的代码风格,以及实现功能是有所差异的。具体的差异,可以查看Comparing axios vs. got vs. request vs. reqwest vs. superagent这篇文章,这里有详细的对比。

但我们不管他们能实现什么,我们只需要他们能实现我们的功能即可。

改造代码如下:

// 配置API接口地址
var root = process.env.API_ROOT
// 引用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)
      return
    }
  })
}

// 返回在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)
  }
}

可以将这段代码替换我们原有的api.js中的代码。

小结

别的没啥感觉,就是感觉axios的代码清晰了许多。虽然结果是一样的。我也算明白为什么这东西会被vue官方推荐了。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员宝库

主流浏览器图片反防盗链方法总结

还记得之前写的那个无聊的插件,前一段时间由于豆瓣读书增加了防盗链策略使得我们无法直接引用他们的图片,使得我这个小插件无法工作。本以为是一个很简单的问题,但是没想...

14950
来自专栏Fundebug

微信小程序开发BUG经验总结

小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家。

564120
来自专栏V站

PHP丨setcookie无效的原因分析

今天给某友友解决YoungxjTools时发现cookie怎么都写不进去,一开始怀疑是php空间有问题,各种改代码调试,没想到是cookie的问题,好吧,我认输

20830
来自专栏前端布道

前端开发必备之Chrome开发者工具(下篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 本文...

359110
来自专栏编程之旅

使用Vundle管理Vim插件

编辑器流派的划分在程序员群体中一直存在着,而我也在尝试了SublimeText、VSCode和Atom这些代表着现代时尚功能的编辑器之后试着使用Vim,其实说到...

13530
来自专栏武军超python专栏

2018年8月7号升级飞机大战的总结

今天学到的新单词: indentation  n缩进 transform  v改变,变换 collide v碰撞 recursion  n递归

12420
来自专栏Material Design组件

Human Interface Guidelines —— Edit Menus

14160
来自专栏Python数据科学

Jupyter notebook快速入门教程

如果你想使用Python学习数据分析或数据挖掘,那么它应该是你第一个应该知道并会使用的工具,它很容易上手,用起来非常方便,是个对新手非常友好的工具。而事实也证明...

8710
来自专栏琯琯博客

超好用的谷歌浏览器、Sublime Text、Phpstorm、油猴插件合集

一、谷歌浏览器插件 二、Sublime Text 插件 三、Phpstorm 插件 四、油猴脚本 4.1 脚本网站 4.2 自用的脚本 五、相关链接 ? 分享...

1.3K80
来自专栏司想君

小程序开发总结

经历了一段繁忙的工作期,还有2天就要过年了。在这里总结一下最新开发微信小程序的心得和体会,算是一个总结,也算温故而知新,如果还能对读者有所帮助,那就更好了。 开...

40170

扫码关注云+社区

领取腾讯云代金券