如何修改Axios接口使其返回JSON数据而非ArrayBuffer
本文介绍如何修改后端接口，使其返回JSON数据，而不是使用Axios时返回的ArrayBuffer。假设您使用Axios发送GET请求并接收ArrayBuffer响应，但希望接口返回JSON格式的数据。 关键在于修改服务器端代码，而不是客户端Axios配置。
一、修改服务器端接口代码:
以下示例展示如何修改一个Node.js (koa) 后端接口，使其返回JSON数据：
原接口（返回ArrayBuffer）：
<code class="javascript">router.post('/a/b.zip', async ctx => {
const filepath = path.join(__dirname, ctx.req.url.replace('/a', ''));
const buf = fs.readFileSync(filepath);
ctx.set('content-type', 'application/octet-stream'); // or other appropriate content-type
ctx.status = 200;
ctx.body = buf; // Returns ArrayBuffer
});</code>
修改后的接口（返回JSON）：
<code class="javascript">router.post('/a/b.zip', async ctx => {
const filepath = path.join(__dirname, ctx.req.url.replace('/a', ''));
const buf = fs.readFileSync(filepath);
// 将ArrayBuffer转换为可JSON化的格式 (例如Base64编码)
const base64Data = buf.toString('base64');
ctx.set('content-type', 'application/json');
ctx.status = 200;
ctx.body = JSON.stringify({ data: base64Data }); // Returns JSON
});</code>
关键修改在于：
- 将
ctx.set('content-type', 'application/octet-stream');改为ctx.set('content-type', 'application/json'); - 将
ctx.body = buf;改为ctx.body = JSON.stringify({ data: base64Data });，其中base64Data是将buf转换为Base64编码后的字符串。 选择合适的编码方式取决于你的数据类型和需求。
二、客户端Axios代码 (无需修改):
因为我们修改了服务器端返回JSON，所以客户端Axios代码不需要更改responseType。 它会自动解析JSON响应。
三、完整示例 (Node.js Koa + Axios):
服务器端 (Koa):
<code class="javascript">const Koa = require('koa');
const Router = require('koa-router');
const fs = require('node:fs');
const path = require('node:path');
const app = new Koa();
const router = new Router();
router.post('/a/b.zip', async ctx => {
const filepath = path.join(__dirname, ctx.req.url.replace('/a', ''));
const buf = fs.readFileSync(filepath);
const base64Data = buf.toString('base64');
ctx.set('content-type', 'application/json');
ctx.status = 200;
ctx.body = JSON.stringify({ data: base64Data });
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000);</code>
客户端 (Axios):
<code class="javascript">axios.post('/a/b.zip')
.then(response => {
console.log(response.data); // 解析JSON数据
const decodedData = Buffer.from(response.data.data, 'base64'); // 解码Base64
// ...处理decodedData...
})
.catch(error => {
console.error(error);
});</code>
记住根据你的后端框架和数据类型调整代码。 例如，如果你使用的是Express.js，ctx将被替换成res。 你可能还需要调整Base64编码或使用其他编码方式，例如Uint8Array。 确保服务器端和客户端的编码方式一致。
