vue-axios的简单封装

前言

vue中ajax请求官方推荐是axios，之前集成的vue-source早被放弃了。axios的用法与jquery-ajax，vue-source的用法均有所不同。为了使用起来更方便，需要对axios简单进行封装。

封装的关键点

1、get 和 post 请求时，传参的方式不同

在get请求中，是使用params: {}；在post请求中，使用data: {}，至于为啥是这样，不是很清楚，但是官方已经在文档中，有说明：

对于post请求!

对于get请求

而且，在项目中实际尝试了下，发现当get请求时，必须使用params: {}的方式，而post请求的时候，必须使用data: {}的方式。不然是参数是传递不成功的。

2、post请求传参需要进行处理

当使用post请求时，将发送的请求参数需要使用qs.stringify进行包裹。不然是发送不成功的。

3、post请求的时候，请求头需要设置

4、axios请求没有finally或者always方法

在进行ajax请求的时候，需要有成功，失败，无论成败与否，这三种情况的回调函数。在axios的官方文档中，指出了成功使用.then回调函数，失败使用.catch回调函数，但是没有指出成败与否都执行的回调函数。

当浏览器支持原生的promise的时候，可以用.finally方法来处理成败与否都会执行这种情况，但是当浏览器并不支持promise的时候，则无法使用.finally方法。

在axios的github的一个issue中，有人提出了这个问题，官方给出了解决方法：promise.prototype.finally。

封装后完整的代码

//目录：src/http/http.js

import axios from 'axios';
import qs from 'qs';
require('promise.prototype.finally').shim();

/**
 * 封装axios的通用请求
 * @param  {string}   method     get\post\put\delete
 * @param  {string}   url       请求的接口URL
 * @param  {object}   param     传的参数，没有则传空对象
 */
function http (method, url, param) {
    param = param && typeof param === 'object' ? param : {};
    const config = {
        url: url,
        method: method,
        transformRequest: [function (param) {
            return qs.stringify(param);
        }],
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    };

    // post请求时需要设定Content-Type
    if (method === 'post') {
        config.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
        config.data = param;
    } else if (method === 'get') {
        config.params = param;
    }

    return axios(config);
}

export {
    http
};

// main.js

import Vue from 'vue';
import { http } from './http/http';
Vue.prototype.$http = http;

// 组件中使用
/**
 * 在组件中发送请求
 * @param  {string}   method     get\post\put\delete
 * @param  {string}   url       请求的接口URL，我们把请求做了开发环境和生产环境的映射，放在urlmap.js中
 * @param  {object}   param     传的参数，没有则传空对象或者不传
 */
this.$http('post', urlmap.get_user_data, {'id': 1, 'ifsid': 2})
.then(res => {
  this.username = res.data.data.username;
})
.catch(err => {
  console.log(err.message);
})
.finally(() => {
  console.log('无论成功与否都会执行');
});

最后，本地开发使用假数据的问题

在前后端分离的情况下，前端进行开发时，需要使用假数据，在vue-cli搭建的项目中，ajax请求的假数据是放在根目录的static目录下。进行开发的时候，发现不能进行post请求，只能进行get请求。同时，当json数据中有备注时，返回结果也解析失败。

解决办法：对webpack.dev.conf.js进行改造，使用json5对返回结果进行处理。

在本地根目录下建一个存放假数据的文件夹mock，在webpack.dev.conf.js中的devServer对象中添加属性：

const fs = require('fs')
const JSON5 = require('json5')

before(app) { // enable to use POST method
  app.use(function (req, res, next) {
      let reg = /\/mock\/\w+\.json/;
      let path = req.path;
      if (reg.test(path)) {
          let result = fs.readFileSync(`.${path}`, 'utf8')
          res.send(JSON5.parse(result));
          next();
      }
      next();
  });
}

另外，我们将项目所需要的ajax请求的url做了一个映射，分为开发环境下的假数据和生成环境下的真实地址，都放在urlmap.js中。

// urlmap.js

// 获取当前执行的环境
const _env = process.env.NODE_ENV;

const devMap = {
    get_user_data: '../../mock/user_data.json'
};

const productionMap = {
    get_user_data: ''
};

export default _env === 'development' ? devMap : productionMap;