ajax - Giphy uplaod 适用于 .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);
  });