web-dev-qa-db-ja.com

Axiosでヘッダとオプションを設定するにはどうすればいいですか？

私はこのようにHTTP投稿を実行するためにaxiosを使用します。

 import axios from 'axios'
    params = {'HTTP_CONTENT_LANGUAGE': self.language}
    headers = {'header1': value}
    axios.post(url, params, headers)

これは正しいです？または私はすべきです：

axios.post(url, params: params, headers: headers)

vue.jsaxios
59
user2950593

これを行うにはいくつかの方法があります。

  • 単一のリクエストの場合：

    let config = {
  headers: {
    header1: value,
  }
}

let data = {
  'HTTP_CONTENT_LANGUAGE': self.language
}

axios.post(URL, data, config).then(...)

  • デフォルトのグローバル設定を設定する場合

    axios.defaults.headers.post['header1'] = 'value' // for POST requests
axios.defaults.headers.common['header1'] = 'value' // for all requests

  • Axiosインスタンスでデフォルトとして設定する場合

    let instance = axios.create({
  headers: {
    post: {        // can be common or any other method
      header1: 'value1'
    }
  }
})

//- or after instance has been created
instance.defaults.headers.post['header1'] = 'value'

//- or before a request is made
// using Interceptors
instance.interceptors.request.use(config => {
  config.headers.post['header1'] = 'value';
  return config;
});
129
riyaz-ali

ヘッダー付きのgetリクエストを送信できます（たとえば、jwtによる認証用）。

axios.get('https://example.com/getSomething', {
 headers: {
   Authorization: 'Bearer ' + token //the token is a variable which holds the token
 }
})

投稿リクエストも送信できます。

axios.post('https://example.com/postSomething', {
 email: varEmail, //varEmail is a variable which holds the email
 password: varPassword
},
{
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})

私のやり方は、このようなリクエストを設定することです。

 axios({
  method: 'post', //you can set what request you want to be
  url: 'https://example.com/request',
  data: {id: varID},
  headers: {
    Authorization: 'Bearer ' + varToken
  }
})
53
roli roli

Configオブジェクトをaxiosに渡すことができます：

axios({
  method: 'post',
  url: '....',
  params: {'HTTP_CONTENT_LANGUAGE': self.language},
  headers: {'header1': value}
})
14
sjc42002

これは、ヘッダとresponseTypeを使った設定の簡単な例です。

var config = {
  headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
  responseType: 'blob'
};

axios.post('http://YOUR_URL', this.data, config)
  .then((response) => {
  console.log(response.data);
});

Content-typeは、 'application/x-www-form-urlencoded'または 'application/json'にすることができ、 'application/json; charset = utf-8'でも機能します。

responseTypeは 'arraybuffer'、 'blob'、 'document'、 'json'、 'text'、 'stream'です。

この例では、this.dataが送信したいデータです。値または配列にすることができます。 （もしオブジェクトを送りたいのなら、おそらくそれを直列化しなければならないでしょう）

9
gtamborero

デフォルトのヘッダを初期化することができますaxios.defaults.headers

 axios.defaults.headers = {
        'Content-Type': 'application/json',
        Authorization: 'myspecialpassword'
    }

   axios.post('https://myapi.com', { data: "hello world" })
        .then(response => {
            console.log('Response', response.data)
        })
        .catch(e => {
            console.log('Error: ', e.response.data)
        })
4
Morris S

もしあなたがパラメータとヘッダでgetリクエストをしたいのなら。

var params = {
  paramName1: paramValue1,
  paramName2: paramValue2
}

var headers = {
  headerName1: headerValue1,
  headerName2: headerValue2
}

 Axios.get(url, {params, headers} ).then(res =>{
  console.log(res.data.representation);
});
0
Rishith Poloju