axios請求JSON問題詳解

blastz 發(fā)布于2019-08-21 18:32 / 1490人閱讀

摘要：此時傳遞的參數(shù)是格式如果出現(xiàn)的錯誤，則是跨域問題。本人喜歡直接配置服務(wù)器來解決跨域例如配置配置跨域請求當參數(shù)是字符串時，默認的是。其實這是一個無效的數(shù)據(jù)，為，為空。我更喜歡使用庫的方式，代碼如下之后使用的時候，只需要傳遞對象就可以

當參數(shù)是JSON對象時，默認的Content-Type是application/json。

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

此時傳遞的參數(shù)是Request Payload格式{firstName:"Fred",lastName:"Flintstone"}

如果出現(xiàn)No "Access-Control-Allow-Origin" header is present on the requested resource的錯誤，則是跨域問題。本人喜歡直接配置服務(wù)器來解決跨域：例如Nginx配置：Nginx配置跨域請求

當參數(shù)是JSON字符串時，默認的Content-Type是application/x-www-form-urlencoded。

axios.post("/user", JSON.stringify({
    firstName: "Fred",
    lastName: "Flintstone"
  }))
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

此時傳遞的參數(shù)是Form Data格式key : value：

{"firstName":"Fred","lastName":"Flintstone"}:

如上。其實這是一個無效的數(shù)據(jù)，key為{"firstName":"Fred","lastName":"Flintstone"}，value為空。

要想使用application/x-www-form-urlencoded格式，需要進行數(shù)據(jù)轉(zhuǎn)換，雖然有兩種方式URLSearchParams和qs兩種方式。我更喜歡使用qs庫的方式，代碼如下：

axios.interceptors.request.use((req) => {
    if (req.method === "post") {
     req.data = qs.stringify(req.data);
    }
    return req;
}, (error) => Promise.reject(error));

之后使用axios的時候，只需要傳遞json對象就可以：

axios.post("/user", {
    firstName: "Fred",
    lastName: "Flintstone"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });