axios封装http请求
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请求的更多相关文章
- vue项目实践-添加axios封装api请求
安装 axios npm install axios --save 创建实例 (utils/fetch.js) axios 默认提交格式为:application/json 可使用 qs 模块(需要安 ...
- Vue axios封装 实现请求响应拦截
封装 axios.js import axios from 'axios' import { baseURL } from '@/config' class HttpRequest { constru ...
- vue-cli配置axios,并基于axios进行后台请求函数封装
文章https://www.cnblogs.com/XHappyness/p/7677153.html已经对axios配置进行了说明,后台请求时可直接this.$axios直接进行.这里的缺点是后端请 ...
- axios浏览器异步请求方法封装 XMLHttpRequest
axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...
- vue-cli3中axios如何跨域请求以及axios封装
1. vue.config.js中配置如下 module.exports = { // 选项... // devtool: 'eval-source-map',//开发调试 devServer: { ...
- vue+axios 对restful 请求封装
礼拜天来公司整理项目,项目是最近开始重构的,里面的各种http请求接口是restful结构的(为了提升项目的比格),整理一下笔记 [restful介绍][1]博主讲的很详细 技术栈: vue + vu ...
- Vue 封装axios(四种请求)及相关介绍(十三)
Vue 封装axios(四种请求)及相关介绍 首先axios是基于promise的http库 promise是什么? 1.主要用于异步计算 2.可以将异步操作队列化,按照期望的顺序执行,返回符合预期的 ...
- axios封装
前言 作为出入vue的小萌新,我在写请求的时候,也是毫不犹豫写了ajax,结果肯定是不行的... Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2. ...
- vue2.0 axios封装、vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
随机推荐
- css3 实现动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- C# DevExpress GridControl使用方法
一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 ().gridView.AddNe ...
- JS中部分 Array 对象方法介绍
1.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本 <script type="text/javascrip ...
- 学习《R数据科学》高清中文PDF+高清英文PDF+源代码
学习R有不会的就查工具书<R数据科学>, 工具不是重点,创造价值才是目的.具体到数据科学,表现形式往往是提供解决方案或者做出某种决策.至于使用什么语言,采用什么工具,不本质.用 R 还是 ...
- zip---解压缩文件
zip命令可以用来解压缩文件,或者对文件进行打包操作.zip是个使用广泛的压缩程序,文件经它压缩后会另外产生具有“.zip”扩展名的压缩文件. 语法 zip(选项)(参数) 选项 -A:调整可执行的自 ...
- mysql InnoDB加锁分析
文章转载自:http://www.fanyilun.me/2017/04/20/MySQL%E5%8A%A0%E9%94%81%E5%88%86%E6%9E%90/ 以下实验数据基于MySQL 5.7 ...
- Linux学习总结(8)——VMware v12.1.1 专业版以及永久密钥
VMware v12.1.1 专业版以及永久密钥 热门虚拟机软件VMware Workstation 现已更新至v12.1.1 专业版!12.0属于大型更新,专门为Win10的安装和使用做了优化,支持 ...
- 使用LVS 实现负载均衡的原理。
LVS 负载均衡 负载均衡集群是 Load Balance 集群.是一种将网络上的访问流量分布于各个节点,以降低服务器压力,更好的向客户端提供服务的一种方式.常用 的负载均衡. 开源软件有Nginx. ...
- ubuntu-删除内核
今天进入公司第一天,公司需要给电脑安装ubuntu,这个是由it部门帮忙安装的.但是,我不小心升级了内核版本,接下来就悲剧了,因为内核版本升级以后,直接导致了环境错误,很多公司内部使用的工具都不能用了 ...
- vue绑定内联样式
v-bind:style 的对象语法十分直观--看着非常像 CSS ,其实它是一个 JavaScript 对象. CSS 属性名可以用驼峰式(camelCase)或短横分隔命名(kebab-case) ...