Giphy 上传适用于 .ajax 但不适用于获取

Question

我正在尝试将 gif 上传到 Giphy。它可以使用 jQuery/.ajax 但我无法使用 fetch.

这是 .ajax 版本：

$.ajax({
    type: "POST",
    url: "http://upload.giphy.com/v1/gifs",
    data: {
      api_key: "E0sxxxxxxxxxxxxxxxxxxxxxxxxxx",
      source_image_url: "https://urlto/snoopy.gif",
      tags: "cute dog",
    },
    success: function (data) {
      console.log(data);
    },
    error: function (data) {
      alert("fail");
    },
  });

and here is the fetch version which returns a 401 error:

 fetch("https://upload.giphy.com/v1/gifs", {
    method: "POST",

    body: {
      api_key: "E0sxxxxxxxxxxxxxxxxxxxxxxxxxx",
      source_image_url: "https://urlto/snoopy.gif",
      tags: "cute dog",
    },

  }).then((response) => {
    console.log("status:");
    console.log(response);
  });

我没有受过 fetch 方面的培训，所以任何对我做错的事情的帮助都是很好的。

Answer 1

您不能像在 $.ajax 中那样将普通对象作为要获取的请求主体传递。使用 URLSearchParams 对象

 fetch("https://upload.giphy.com/v1/gifs", {
    method: "POST",
    body: new URLSearchParams({
      api_key: "E0sxxxxxxxxxxxxxxxxxxxxxxxxxx",
      source_image_url: "https://urlto/snoopy.gif",
      tags: "cute dog"
    })    
  }).then((response) => {
    console.log("status:");
    console.log(response);
  });

Giphy 上传适用于 .ajax 但不适用于获取

Giphy uplaod works with .ajax but not fetch

ajax

upload

fetch

giphy