Axios请求返回arraybuffer，如何修改接口使其返回JSON数据？-js教程-PHP中文网

Axios请求返回arraybuffer，如何修改接口使其返回JSON数据？

聖光之護

发布： 2025-02-20 23:04:23

原创

339人浏览过

axios请求返回arraybuffer，如何修改接口使其返回json数据？

如何修改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>

登录后复制

关键修改在于：

图改改

在线修改图片文字

455

查看详情

将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。确保服务器端和客户端的编码方式一致。

以上就是Axios请求返回arraybuffer，如何修改接口使其返回JSON数据？的详细内容，更多请关注php中文网其它相关文章！