vue系列-封装http请求

原文博客:Doi技术团队
链接地址:https://blog.doiduoyi.com
初心:记录优秀的Doi技术团队学习经历

功能

  • 支持RESful风格(get,post,delete,put,patch)
  • 支持处理格式化URL(/demo/{id})
  • 支持请求错误码跳转到指定url

使用

  • 对外提供两个方法
    • http(url = '', data = {}, method = "GET"):使用http请求
    • getUrl(url = ''):构建完整的url

代码

import axios from 'axios';

//创建axios实例
const service = axios.create({
    timeout: 30000 //超时时间
})

//添加request拦截器
service.interceptors.request.use(config => {
    return config;
}, error => {
    Promise.reject(error);
})

//添加response拦截器
service.interceptors.response.use(
    response => {
        let res = {};
        res.status = response.status;
        res.data = response.data;
        return res;
    },
    error => {
        if (error.response && error.response.status == 404) {
            //跳转到xx页面
            console.log("404错误")
        }
        return Promise.reject(error.response)
    }
)

//封装get接口
// params={} 是设置默认值
export function get(url, params = {}) {
    params.t = new Date().getTime(); //get方法加一个时间参数,解决ie下可能缓存问题.
    return service({
        url: url,
        method: 'get',
        headers: {
        },
        params
    })
}

//封装post请求
export function post(url, data = {}) {
    //默认配置
    let sendObject = {
        url: url,
        method: "post",
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        },
        data: data
    };
    sendObject.data = JSON.stringify(data);
    return service(sendObject)
}

//封装put方法 (resfulAPI常用)
function put(url, data = {}) {
    return service({
        url: url,
        method: 'put',
        headers: {
            'Content-Type': 'application/json;charset=UTF-8'
        },
        data: JSON.stringify(data)
    })
}

//删除方法(resfulAPI常用)
function deletes(url) {
    return service({
        url: url,
        method: 'delete',
        headers: {}
    })
}

//patch方法(resfulAPI常用)
function patch(url) {
    return service({
        url: url,
        method: 'patch',
        headers: {}
    })
}

//处理格式化URL(/demo/{id})
function render(url, data) {
    var re = /{([^]+)?}/
    var match = ''
    while ((match = re.exec(url))) {
        url = url.replace(match[0], data[match[1]])
    }
    return url
}

const fetch = (options) => {
    //process.env.VUE_APP_PATH为环境变量在.env文件中配置
    let url = process.env.VUE_APP_PATH + options.url;
    url = render(url, options.data)
    switch (options.method.toUpperCase()) {
        case 'GET':
            return get(url, options.data)
        case 'POST':
            return post(url, options.data)
        case 'PUT':
            return put(url, options.data)
        case 'DELETE':
            return deletes(url, options.data)
        case 'PATCH':
            return patch(url, options.data)
        default:
            return service(options)
    }
}

/**
 * 提供一个http方法
 * url 访问路径 不包括域名和项目名
 * data 参数对象
 * method 请求方式
 *  */
export function http(url = '', data = {}, method = "GET") {
    const options = { url: url, data: data, method: method }
    return fetch(options).catch(error => {
        console.log(error)
        throw error
    })
}

/**
 * 构造url的方法
 */
export function getUrl(url = '') {
    //process.env.VUE_APP_PATH为环境变量在.env文件中配置
    return process.env.VUE_APP_PATH + url;
}


推荐阅读更多精彩内容

  • 一说到REST,我想大家的第一反应就是“啊,就是那种前后台通信方式。”但是在要求详细讲述它所提出的各个约束,以及如...
    时待吾阅读 3,213评论 0 19
  • 去年有段时间得空,就把谷歌GAE的API权威指南看了一遍,收获颇丰,特别是在自己几乎独立开发了公司的云数据中心之后...
    骑单车的勋爵阅读 18,389评论 0 41
  • 概念及常识 HTTP (Hypertext transfer protocol) 超文本传输协议;详细规定了浏览器...
    石头老张阅读 3,798评论 0 49
  • 标签(空格分隔): google restful api design 当前版本的API设计指南发布时间:2017...
    主君_05c4阅读 3,215评论 0 5
  • 今天是碌碌无为的一天,原本是想歇息一天的,在家给自己放个假,用手机YY参加TA上海legacy 班同学组织的分享会...
    周秀峰阅读 68评论 0 1
  • 一晃十年有余,记得和先生初次相识于2007年的国庆,那年阴雨连绵,一下就是半月。而今天气温宜,希齐及眉,饭...
    星芳希齐阅读 136评论 0 2
  • Android开发中,那些让你相见恨晚的方法、类或接口 发表于2016-04-11 PS:本文类容来自我在知乎上对...
    Ztufu阅读 139评论 0 1