在vue中使用superagent封装http请求
时间:2019-02-20
本文章向大家介绍在vue中使用superagent封装http请求,主要包括在vue中使用superagent封装http请求使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
/**
* create BY CHUCHUR
* 2017年2月22日 14:09:31
*/
// 配置API接口地址
// 引用superagent
import request from 'superagent'
// import jsonp from 'superagent-jsonp'
// import utils from './utils.js'
import store from '@/store'
import {
Toast
} from 'vue-ydui/dist/lib.rem/dialog'
// utils.loadScript(process.env.UC + '/sso/account/verifyUsernameToken?client_id=14046695&funcName=ossLogin')
// 自定义判断元素类型JS
const toType = (obj) => {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
const filterNull = (o) => {
if (toType(o) !== 'object') return o
for (var key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
if (o[key].length === 0) {
delete o[key]
}
}
}
return o
}
let callbacks = []
// let ossResponsed = false // oss
let ossResponsed = true
const httpBase = (method, url, params, success, failure) => {
let call = () => {
var r = request(method, url)
store.dispatch('showLoading')
if (params) {
// params = filterNull(params)
if (method === 'POST' || method === 'PUT') {
if (toType(params) === 'formdata') {
// r.responseType('blob')
// r.set('Content-Type', 'multipart/form-data')
r.send(params)
} else if (toType(params) === 'object') {
// params = JSON.stringify(params)
// params = getFormData(params)
r.set('Content-Type', 'application/json; charset=utf-8')
r.send(params)
} else {
r.set('Content-Type', 'application/json; charset=utf-8')
r.send(params)
}
// console.log(params)
// r = r.send(params)
} else if (method === 'GET' || method === 'DELETE') {
r.set('Content-Type', 'application/json; charset=utf-8')
r.query(params)
}
}
// var router = this.$router
r.end((err, res) => {
if (err) {
// Message.error('系统错误:CODE:' + res.status)
Toast({
mes: '系统错误' + err,
timeout: 2000,
icon: 'error'
})
};
if (parseInt(res.status) === 200) {
if (success) {
if (res.body) {
if (res.body.code === '-5000') {
Toast({
mes: '系统内部错误',
timeout: 1500,
icon: 'error'
})
}
if (res.body.code === '404') {
Toast({
mes: '404错误',
timeout: 1500,
icon: 'error'
})
}
if (res.body.code !== '0' && res.body.code !== '-5000' && res.body.code !== '404' && res.body.msg && !params.callback) {
Toast({
mes: res.body.msg,
timeout: 1500,
icon: 'error'
})
}
success(res.body || res.text)
} else {
success(res)
}
}
} else {
if (failure) {
failure(res.body || res.text)
} else {
if (res.body.code === '-5000') {
Toast({
mes: '系统内部错误',
timeout: 1500,
icon: 'error'
})
} else if (res.body.code === '404') {
Toast({
mes: '404错误',
timeout: 1500,
icon: 'error'
})
} else {
Toast({
mes: JSON.stringify(res.body.msg),
timeout: 1500,
icon: 'error'
})
}
// window.alert('error: ' + JSON.stringify(res.body))
}
}
setTimeout(() => {
store.dispatch('hideLoading')
}, 300)
})
}
ossResponsed ? call() : callbacks.push(call)
}
// var server = 'http://10.120.54.70:8082'
// let server = 'http://100.168.1.153:9090'
let server = ''
// 返回在vue模板中的调用接口
let http = {}
http.get = (url, params, success, failure) => {
return httpBase('GET', server + url, params, success, failure)
}
http.get = (url, params, success, failure) => {
return httpBase('GET', server + url, params, success, failure)
}
http.post = (url, params, success, failure) => {
return httpBase('POST', server + url, params, success, failure)
}
http.postString = (url, params, success, failure) => {
return httpBase('POST', server + url, JSON.stringify(params), success, failure)
}
http.postData = (url, params, success, failure) => {
let data = new FormData()
for (var x in params) {
data.append(x, params[x])
}
return httpBase('POST', server + url, data, success, failure)
}
http.upload = (url, params, success, failure) => {
var post = true
var data = new window.FormData()
if (params.uploadIDfile) {
var obj = document.getElementById(params.uploadIDfile)
var file = obj.files[0]
// 验证文件格式
if (file.type !== 'image/png' && file.type !== 'image/jpeg' && file.type !== '') {
alert('目前只支持上传png,jpg格式图片')
post = false
return false
}
// 验证文件大小
if (params.maxsize) {
if (obj.size > params.maxsize) {
post = false
alert('上传文件不能大于' + parseInt(params.maxsize / 1024) + 'KB')
return false
}
}
data.append(params.uploadID, file)
obj.value = ''
}
return post && httpBase('POST', server + url, data, success, failure)
}
http.put = (url, params, success, failure) => {
return httpBase('PUT', server + url, params, success, failure)
}
http.delete = (url, params, success, failure) => {
return httpBase('DELETE', server + url, params, success, failure)
}
http.install = (Vue, options) => {
Vue.prototype.$http = http
}
export default http
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法