请求成功时,后端返回文件流,正常导出文件; 请求失败时,后端返回json对象,如:{"Status":"false","StatusCode":"500","Result":"操作失败"},
时间: 2023-07-02 14:23:10 浏览: 201
服务器端返回json数据
好的,你的第一个问题是关于后端返回文件流和json对象的处理。在前端中,我们可以使用 AJAX 或 Fetch API 来发送请求和接收响应。当后端返回文件流时,我们需要使用 Blob 或者 ArrayBuffer 对其进行处理,具体如下:
```javascript
fetch('/api/download')
.then(response => {
if (response.ok) {
// 根据 Content-Type 处理文件流
const contentType = response.headers.get('Content-Type');
if (contentType.includes('application/pdf')) {
return response.blob();
} else if (contentType.includes('image/jpeg')) {
return response.arrayBuffer();
} else {
throw new Error('不支持的文件类型');
}
} else {
throw new Error('请求失败');
}
})
.then(data => {
// 处理文件数据
if (data instanceof Blob) {
const url = URL.createObjectURL(data);
// 创建 a 标签并模拟点击下载
const link = document.createElement('a');
link.href = url;
link.download = 'file.pdf';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(url);
} else if (data instanceof ArrayBuffer) {
// 处理图片数据
}
})
.catch(error => {
console.error(error);
});
```
当后端返回 json 对象时,我们可以使用 response.json() 方法将其转换为 JavaScript 对象,然后根据对象中的状态码和状态信息进行处理,具体如下:
```javascript
fetch('/api/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: '张三',
age: 18
})
})
.then(response => {
if (response.ok) {
return response.json();
} else {
throw new Error('请求失败');
}
})
.then(data => {
if (data.Status === 'true') {
// 操作成功
console.log(data.Result);
} else {
// 操作失败
console.error(data.StatusCode, data.Result);
}
})
.catch(error => {
console.error(error);
});
```
以上代码示例中,我们使用 fetch() 方法发送请求,并在 then() 方法中处理响应数据。对于文件流,我们需要根据 Content-Type 处理返回的数据,并使用 URL.createObjectURL() 方法将数据转换为 URL,然后创建一个 a 标签并模拟点击下载。对于 json 对象,我们使用 response.json() 方法将其转换为 JavaScript 对象,并根据对象中的状态码和状态信息进行处理。
阅读全文