vue技巧（二）通用http.js封装

无论前端后端开发时合理的模块化设计都可以达到精简代码，提高扩展性的特点。前端开发时必不可少的会和后端进行各种交互，有的交互是post请求，有的可能是get请求，有的请求头可能需要设置Content-Type。另外所有请求都需要对响应进行判断，失败了就弹出提示信息，成功了则进行后续处理。

下面是本人常用的封装代码(个人习惯定义下面的文件名为http.js)：

import axios from 'axios'
import { Message } from 'element-ui' /** 需要引入element ui组件进行消息的弹出展示，当然使用其它的提示方式也可以，如果使用其它的组件，需要对应修改下面的Message.*方法 */


/**
 * 开启cookie缓存携带，如果不设置，后端拿不到cookie数据
 */
axios.defaults.withCredentials=true


/**
 * 创建axios实例，可以配置公共请求头和请求内容类型，这里只是配置了通用的请求超时时间为60秒
 */
var instance = axios.create({ timeout: 60000 })

/**
 * 请求拦截器
 * 即所有前端请求发出去前需要经历的流程，一般需要认证的页面，这里会传入token。这里因为没有业务需要，我这里没有进行任何处理操作。
 */
instance.interceptors.request.use(
    config => {
        return config;
    },
    error => {
        return Promise.error(error);
    }
)

/**
 * 响应拦截器
 * 统一处理失败情况，并将失败信息弹窗显示
 */
instance.interceptors.response.use(
    response => {
        if (response.status === 200) {
            if (response.data != null && response.data.code == '0') {
                console.log('响应正常')
                Message.success('执行成功')
            } else if (response.data != null && response.data.code != '0') {
                console.log('响应异常')
                Message.warning(response.data.msg)
            } else {
                console.log('接口调用异常')
                Message.warning('接口调用异常')
            }
            return Promise.resolve(response)
        } else {
            Message.warning('接口调用异常')
            return Promise.reject(response);
        }
    },
    error => {
        Message.warning('接口调用超时')
        console.log('error response:' + error)
    }
)


/** 统一的get请求 */
export function get(url, params) {
    return new Promise((resolve,reject)=>{
        instance({
            url: url,
            method: 'get',
            params: params
        }).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    })
}

/** 统一的post请求 */
export function post(url, params, headers) {
    if (headers == null) {
        headers = { 'Content-Type': 'application/json;charset=utf-8' }
    }
    return new Promise((resolve,reject)=>{
        instance({
            url: url,
            method: 'post',
            data: params,
            headers: headers
        }).then(res=>{
            resolve(res.data)
        }).catch(err=>{
            reject(err.data)
        })
    }) 
}

export default {
    instance
}

因为只用要get和post请求，所以上面的代码中只展示了get post的封装，其它如PUT DELETE等方式的请求可以参考着封装。

而当通用get post封装完毕后，可以再用一个文件（个人习惯定义为api.js）存放所有和后端交互的接口请求。如下：

import { get,post } from "./http"

var baseUrl = "http://localhost:8090/wyt_test/"

function postTest(data) {
    let url = baseUrl + 'manager/postTest.do'
    return post(url, data, null)
}

function getTest() {
    let url = baseUrl + 'manager/getTest.do'
    return get(url,null)
}


export default {
    postTest,
    getTest
}