import axios from 'axios'

const HTTP_TIMEOUT = 15000;

export function httpPost(url, params = {},headers = {}) {
return axios.post(url, params, {
headers,
timeout: HTTP_TIMEOUT,
withCredentials: true,
}).then(resp=>resp.data);
} export function httpGet(url, params = {}) {
return axios.get(url, {
params,
timeout: HTTP_TIMEOUT,
withCredentials: true,
}).then(resp=>resp.data);
} export const errorCode = {
SUCCESS: 0,
} // 发送请求,并且对返回进行处理
// succConvert 函数-后台数据格式转换 function postAndConvertResp(url, params, succConvert, errConvert, headers = {}) {
return httpPost(url, params,headers)
.then(resp => {
return resp.err_code === errorCode.SUCCESS ?
succConvert(resp.result) :
errConvert ? errConvert(resp.err_code) : requestErrorHandler(resp.err_code, resp.err_msg);
})
} // 发送请求,并且对返回进行处理
function getAndConvertResp(url, params, succConvert, errConvert) {
return httpGet(url, params)
.then(resp => {
return resp.err_code === errorCode.SUCCESS ?
succConvert(resp.result) :
errConvert ? errConvert(resp.err_code) : requestErrorHandler(resp.err_code, resp.err_msg);
})
} // 默认错误处理
function requestErrorHandler(errCode, errMsg) {  
  throw new ServerRespError(errMsg);
}
// 前端自定义错误
export class ParamError extends Error {
constructor(message) {
super(message) this.errorType = 'ParamError'
}
} // 服务端返回错误
export class ServerRespError extends Error {
constructor(message) {
super(message) this.errorType = 'ServerRespError'
}
}

post请求参数处理:

function appendCommon2QueryStr(params) {
return data2ParamString(params);
} // param对象转换为paramStr
function data2ParamString(data) {
if (typeof data === 'string') {
return data;
}
return objectToParamString(data);
} // 将对象转换成键值对形式,只支持单层
function objectToParamString(data) {
var ret = '';
for (var key in data) {
ret = ret + key + '=' + encodeURIComponent(data[key]) + '&';
}
ret = ret.substr(0, ret.length - 1); // 去除最后的'&'
return ret;
} // 示例
export function example(reqData) {
let request = {
exam : reqData.exam
} request = appendCommon2QueryStr(request); return postAndConvertResp(URL, request, succConvert)
}

axios封装http请求的更多相关文章

  1. vue项目实践-添加axios封装api请求

    安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...

  2. Vue axios封装 实现请求响应拦截

    封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...

  3. vue-cli配置axios,并基于axios进行后台请求函数封装

    文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...

  4. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  5. vue-cli3中axios如何跨域请求以及axios封装

    1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...

  6. vue+axios 对restful 请求封装

    礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...

  7. Vue 封装axios(四种请求)及相关介绍(十三)

    Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...

  8. axios封装

    前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...

  9. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

随机推荐

  1. 库:IO读写操作

    在Java文件读取路径要注意的地方: 计算机:"D:\" 程序:"D://" 内存与硬盘之间进行文件的相互传输过程 以应用程序为参考点,应用程序从硬盘中读取数据 ...

  2. 简述SQL with(unlock)与with(readpast)

    所有Select加 With (NoLock)解决阻塞死锁,在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...

  3. Huawei配置两台交换机堆叠示例

    配置两台交换机堆叠示例(先配置后连线方式,推荐) 一.基本概念 在堆叠中,有以下一些基本概念,如图1所示.图1 堆叠基本概念示意图 1. 角色堆叠中的单台交换机称为成员交换机,按照功能不同可以分为以下 ...

  4. 利用Python网络爬虫抓取微信好友的签名及其可视化展示

    前几天给大家分享了如何利用Python词云和wordart可视化工具对朋友圈数据进行可视化,利用Python网络爬虫抓取微信好友数量以及微信好友的男女比例,以及利用Python网络爬虫抓取微信好友的所 ...

  5. C/C++(C++封装)

    封装 当单一变量无法完成描述需求的时候,结构体类型解决了这一问题.可以将多个类型打包成一体,形成新的类型.这是 c 语言中封装的概念.但是,新类型并不包含,对数据类的操作.所的有操作都是通过函数的方式 ...

  6. BZOJ3645: Maze(FFT多项式快速幂)

    Description 众维拉先后在中土大陆上创造了精灵.人类以及矮人,其中矮人是生性喜好常年居住在地下的洞穴的存在,他们挖掘矿物甚至宝石,甚至用他们的勤劳勇敢智慧在地底下创造出了辉煌宏大的宫殿,错综 ...

  7. cd---切换工作目录

    cd命令用来切换工作目录至dirname. 其中dirName表示法可为绝对路径或相对路径.若目录名称省略,则变换至使用者的home directory(也就是刚login时所在的目录).另外,~也表 ...

  8. Linux下yum安装ffmpeg和使用

    本文属于转载文章:转载地址是http://www.cnblogs.com/dennisit/archive/2012/12/27/2835089.html 使用Yum安装ffmpeg 打开 vi /e ...

  9. swift 创建第一个UIAlertView 和UIActionSheet

    //创建 UIActionSheet //一定要指明类型.不编译不通过 func ActionSheet(sender:UITapGestureRecognizer)     {         le ...

  10. 4.Maven之(四)Maven命令

    转自:https://blog.csdn.net/u012152619/article/details/51473410