vue HTTP 封装

axios)

为何选用 axios 做 http 请求

尤大大推荐
够简单易上手，http 功能全，适合我们业务逻辑
浏览器兼容不错

封装 axios

编写 httpService

// 导入依赖
import axios from 'axios';
import qs from 'qs';
// 创建axios对象
var instance = axios.create({
    baseURL: SYSTEM.BASE_URL,
    method: 'get',
    timeout: SYSTEM.TIMEOUT,
    // 请求头封装
    headers: {
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Type': 'application/x-www-form-urlencoded'
    }
});
// request拦截器
instance.interceptors.request.use(function (config) {
    config.url = config.url + (config.prefix ? config.prefix : SYSTEM.SUFFIX_URL);
    if (config.method == 'get') {
        config.params = config.data;
    }
    // 上传功能
    if (config.upload) {
        config.data = config.data;
    } else {
        // 参数序列化
        config.data = qs.stringify(config.data);
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});
// response拦截器
instance.interceptors.response.use(function (response) {
    if (!response.data.respCode) {
        return response.data;
    } else {
        return Promise.reject(new Error(...);
    }
}, function (error) {
    return Promise.reject(error);
})
export default {
    install: function (Vue, Option) {
        Object.defineProperty(Vue.prototype, "$http", {
            value: instance
        });
    }
};
export const $http = instance;

Vue 插件方式注入

1
2
3

...
Vue.use(httpService);
...

使用

import {
    $http
} from './httpService';

$http.request({
    method: 'post',
    url: API.trade_order,
    data: {
        tradeId: 111
    }
})