Vue 使用fetch实现接口调用(文件上传特殊处理)

import Vue from 'vue';
import { Message } from 'iView';
/**
*
* @param {*} url
* @param {*} data
* @param {string} method
*/
function ajax( url, data, method) {
var p = new Promise(( resolve, reject) => {
var params = "";
for ( var p in data) {
params += ` ${ p } = ${ data[ p] } &`
}
params = params. substr( 0, params. length - 1);
var options = {
method: method,
headers: {
"Content-Type" : "application/x-www-form-urlencoded"
},
credentials: "include"
}
switch ( method. toUpperCase()) {
case "GET":
case "DELETE": {
url = url + "?" + params;
break;
}
case "POST":
case "PUT": {
options. body = params;
break;
}
default:
break;
}

fetch( url, options). then(( res) => {
try {
if (! res. ok) {
// 请求失败
res. json(). then(( data) => {
reject( data. Message);
// reject(data.$Message);
})
return;
}
res. text(). then(( data) => {
var pData = JSON. parse( data);
if ( pData. Code === 0) {
resolve( pData. Data);
} else {
reject( data. Message || "请求失败");
return;
}
});
} catch ( e) {
reject( "无法解析的返回值")
}
}). catch(( msg) => {
reject( msg);
});
});
p. catch(( msg) => {
Message. error( msg);
// $Message.error(msg);
});
return p;
}

export function get( url, data) {
return ajax( url, data, "GET");
}

export function post( url, data) {
return ajax( url, data, "POST");
}

export function del( url, data) {
return ajax( url, data, "DELETE");
}

export function put( url, data) {
return ajax( url, data, "PUT");
}

接口返回数据格式:


猜你喜欢

转载自blog.csdn.net/corey_mengxiaodong/article/details/80595846
今日推荐