web-dev-qa-db-ja.com

生のデータ本体をaxiosリクエストに追加するにはどうすればよいですか？

Axiosを使用してReactアプリケーションからAPIと通信しようとしています。 GETリクエストを機能させることができましたが、今はPOSTが必要です。

本文にMDXクエリを書き込むため、本文は生のテキストである必要があります。リクエストを行う部分は次のとおりです。

axios.post(baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan,
    {
      headers: { 'Authorization': 'Basic xxxxxxxxxxxxxxxxxxx',
      'Content-Type' : 'text/plain' }
    }).then((response) => {
      this.setState({data:response.data});
      console.log(this.state.data);
    });

ここで、コンテンツタイプの部分を追加しました。しかし、どうすれば体の部分を追加できますか？

ありがとうございました。

編集：

以下は、動作中のPostmanリクエストのスクリーンショットです Postman working request

javascriptreactjspostaxios
11
Karim Taha

直接axios AP​​Iを使用してはどうですか？

axios({
  method: 'post',
  url: baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan,
  headers: {}, 
  data: {
    foo: 'bar', // This is the body part
  }
});

ソース： axios api

11
Ukasha

生のテキストを渡すために以下を使用できます。

axios.post(
        baseUrl + 'applications/' + appName + '/dataexport/plantypes' + plan, 
        body, 
        {
            headers: { 
                'Authorization': 'Basic xxxxxxxxxxxxxxxxxxx',
                'Content-Type' : 'text/plain' 
            }
        }
).then(response => {
    this.setState({data:response.data});
    console.log(this.state.data);
});

そのままbodyにテキストを入れるか、bodyの代わりに'raw text to be sent'として引用符で直接渡します。

Axios投稿の署名はaxios.post(url[, data[, config]])であるため、dataはリクエスト本文を渡す場所です。

5
Madhu Bhat

同じ問題が発生しました。そこで、axiosドキュメントを調べました。見つけた。このようにすることができます。これが最も簡単な方法です。そして超シンプル。

https://www.npmjs.com/package/axios#using-applicationx-www-form-urlencoded-format

var params = new URLSearchParams();
params.append('param1', 'value1');
params.append('param2', 'value2');
axios.post('/foo', params);

.then、.catchを使用できます。

1
hahaha

Githubのaxios.post からの元の参照。

axios.post(`${baseUrl}applications/${appName}/dataexport/plantypes${plan}`, {
    mdxQuery: '<your_mdx_query>',
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

そして、リクエストの追加のパラメーターは、3番目の引数として指定する必要があります（例： このIssue snippet ）：

axios.post(`${baseUrl}applications/${appName}/dataexport/plantypes${plan},
   {
     mdxQuery: '<your_mdx_query>',
   },
   {
     headers: { 
       'Authorization': 'Basic xxxxxxxxxxxxxxxxxxx',
       'Content-Type': 'text/plain'
     }
   }
);
0
Xarvalus

あなたは私のプロジェクトでこれをしました

 axios({
  method: "POST",
  url: "https://URL.com/api/services/fetchQuizList",
  headers: {
    "x-access-key": data,
    "x-access-token": token
  }
   data: {
     quiz_name: quizname,

   }
})
  .then(res => {
    console.log("res", res.data.message);

  })
  .catch(err => {
    console.log("error in request", err);
  });

これは役立つはずです

0
Adnan shah