vue 网络请求封装
2019-02-16 本文已影响0人
轩轩小王子
npm install axios
npm install qs
//用途：1.将对象序列化，多个对象之间用&拼（qs.stringify(params))
//2.将序列化的内容拆分成一个个单一的对象（qs.parse(params))
api.js
image.png
axios.defaults.baseURL = getHost.getHost() + "/api"; //动态配置网络请求不同环境下的地址
get
export function get(url, params = {}, context) { //context vue 实例
return new Promise((resolve, reject) => {
url += "?";
let keys = Object.keys(params); //处理对象，返回可枚举的属性数组
console.log('keys',keys)
for (let i = 0, length = keys.length; i < length; i++) {
if (i === 0) {
url += keys[i] + "=";
url += params[keys[i]];
} else {
url += "&" + keys[i] + "=";
url += params[keys[i]];
}
}
console.log('url',url)
if(userToken){
url += '&userToken='+ userToken;
}
url += "×tamp="+new Date().getTime(); //加了个时间戳
url = encodeURI(url);//对url 进行编码
axios.get(url).then(res => {
if (res.status === 200) { //http 请求成功
if (res.data.code === 1000) { //公司内部定义的 code 数据正常返回
resolve(res.data.result);
}else if(res.data.code === 2999){ //请求成功，但数据返回异常
xxx //具体不同公司不同code
} else {
xxxxx
}
} else {
let msgContent = res.data.msgContent;
if (!isEmpty(msgContent) && context) {
context.$toast(msgContent);
}
reject({
errorMsg: msgContent,
detail: res.data
});
}
} else {
reject({
errorMsg: res.statusText
})
}
}).catch(err => {
reject(err)
})
})
}
post
export function post(url, params = {}, context) {
if(userToken){
Object.assign(params,{userToken:userToken}); //合并两个对象
}
return new Promise((resolve, reject) => {
axios.post(url, qs.stringify(params)).then(res => { //序列化字符串
if (res.status === 200) {
if (res.data.code === 1000) {
resolve(res.data.result);
} else if(res.data.code === 2999){
if (getHost.isDev) {
xxxxxx
} else {
xxxxxx
}
} else {
let msgContent = res.data.msgContent;
if (!isEmpty(msgContent) && context) {
context.$toast(msgContent);
}
reject(res.data.result);
}
} else {
reject({
errorMsg: res.statusText
})
}
}).catch(err => {
reject(err)
})
})
}
uploadFile 上传文件、图片
export function uploadFile(url, params = {}, context) {
if(userToken){
Object.assign(params,{userToken:userToken});
}
return new Promise((resolve, reject) => {
let formData = new FormData(); // 不支持ie8，ie9 formData里面存储的数据是以健值对的形式存在的
let keys = Object.keys(params);
for (let i = 0, length = keys.length; i < length; i++) {
formData.append(keys[i], params[keys[i]]);
}
let config = {
headers: {
'Content-Type': 'multipart/form-data' //此处需要添加这个headers
}
};
axios.post(url, formData, config).then(res => {
if (res.status === 200) {
if (res.data.code === 1000) {
resolve(res.data.result);
} else if(res.data.code === 2999){
if (getHost.isDev) {
xxxxx
} else {
xxxxxx
}
} else {
let msgContent = res.data.msgContent;
if (!isEmpty(msgContent) && context) {
context.$toast(msgContent);
}
reject(res.data.result);
}
} else {
reject({
errorMsg: res.statusText
})
}
}).catch(err => {
reject(err)
})
})
}
main.js
import {get,post,uploadFile} from '../../common/js/api.js'
Vue.prototype.$get = get;
Vue.prototype.$post = post;
Vue.prototype.$uploadFile = uploadFile;
xxx.vue 调用
this.$post(url,codeLoginObj,this).then((response)=>{
})
