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

雨点打透心脏的1/2处 2022-06-16 08:23 185阅读 0赞

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

## 2017年8月补充 ##

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

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

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

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

以下为我写的博文：

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

**以下为原文**

## 前言 ##

我们在前面的教程[Vue2+VueRouter2+webpack 构建项目实战（四）接通api，先渲染个列表][Vue2_VueRouter2_webpack _api]当中使用了`superagent`这个API请求工具。

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

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

一般，我们在项目中只需要使用到四个方法，就是增删改查，分别是`POST`、`DELETE`、`PUT`、`GET`方法。因此，我们只封装了这四个方法。

`superagent`和`axios`是类似的工具，但是他们的代码风格，以及实现功能是有所差异的。具体的差异，可以查看[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官方推荐了。

本文由FungLeo原创，允许转载，但转载必须附带首发链接。如果你不带链接，我将采取包括但不限于深深的鄙视你等手段！

[Vue2_VueRouter2_Webpack_Axios _2017]: http://blog.csdn.net/fungleo/article/details/77575077
[Vue2_VueRouter2_Webpack_Axios _2017_ nodejs _ vue-cli]: http://blog.csdn.net/fungleo/article/details/77584701
[Vue2_VueRouter2_Webpack_Axios _2017 1]: http://blog.csdn.net/fungleo/article/details/77585205
[Vue2_VueRouter2_Webpack_Axios _2017_ App.vue _ router]: http://blog.csdn.net/fungleo/article/details/77600798
[Vue2_VueRouter2_Webpack_Axios _2017_ Axios api]: http://blog.csdn.net/fungleo/article/details/77601270
[Vue2_VueRouter2_Webpack_Axios _2017_ webpack]: http://blog.csdn.net/fungleo/article/details/77601761
[Vue2_VueRouter2_Webpack_Axios _2017_ _.vue]: http://blog.csdn.net/fungleo/article/details/77602914
[Vue2_VueRouter2_Webpack_Axios _2017 2]: http://blog.csdn.net/fungleo/article/details/77603537
[Vue2_VueRouter2_Webpack_Axios _2017 3]: http://blog.csdn.net/fungleo/article/details/77604490
[Vue2_VueRouter2_Webpack_Axios _2017 4]: http://blog.csdn.net/fungleo/article/details/77606216
[Vue2_VueRouter2_Webpack_Axios _2017 5]: http://blog.csdn.net/fungleo/article/details/77606321
[Vue2_VueRouter2_webpack _api]: http://blog.csdn.net/fungleo/article/details/53202276
[Comparing axios vs. got vs. request vs. reqwest vs. superagent]: https://npmcompare.com/compare/axios,got,request,reqwest,superagent