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");
}

接口返回数据格式:

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