如何修改Axios接口使其返回JSON数据而非ArrayBuffer
本文介绍如何修改后端接口，使其返回JSON数据，而不是使用Axios时返回的ArrayBuffer。假设您使用Axios发送GET请求并接收ArrayBuffer响应，但希望接口返回JSON格式的数据。 关键在于修改服务器端代码，而不是客户端Axios配置。
一、修改服务器端接口代码:
以下示例展示如何修改一个Node.js (koa) 后端接口，使其返回JSON数据：
原接口（返回ArrayBuffer）：
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});
登录后复制
修改后的接口（返回JSON）：
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});
登录后复制
关键修改在于：
将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):
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);
登录后复制
客户端 (Axios):
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); });
登录后复制
记住根据你的后端框架和数据类型调整代码。 例如，如果你使用的是Express.js，ctx将被替换成res。 你可能还需要调整Base64编码或使用其他编码方式，例如Uint8Array。 确保服务器端和客户端的编码方式一致。
以上就是Axios请求返回arraybuffer，如何修改接口使其返回JSON数据？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2639504.html
