vue.js - entre - vue js componente

¿Cómo configurar encabezado y opciones en axios?

Question

Uso axios para realizar una publicación HTTP como esta:

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

¿Es esto correcto? O debería hacer:

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

Answer 1

Puede enviar una solicitud de obtención con encabezados (por ejemplo, para la autenticación con jwt):

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

También puede enviar una solicitud de publicación.

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

Mi forma de hacerlo, es establecer una solicitud como esta:

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

Answer 2

Axios se puede utilizar de cualquiera de las siguientes maneras:

// Make a request for a user with a given ID
axios.get(''/user?ID=12345'')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// Optionally the request above could also be done as
axios.get(''/user'', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

entonces para una solicitud de publicación:

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

No olvide importar la biblioteca de axios antes de hacer una llamada ajax con axios

Answer 3

Este es un ejemplo simple de una configuración con encabezados y 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 puede ser ''application / x-www-form-urlencoded'' o ''application / json'' y también puede funcionar ''application / json; charset = utf-8''

responseType puede ser ''arraybuffer'', ''blob'', ''document'', ''json'', ''text'', ''stream''

En este ejemplo, este.data son los datos que desea enviar. Puede ser un valor o una matriz. (Si desea enviar un objeto probablemente tendrá que serializarlo)

Answer 4

Hay varias formas de hacerlo:

• Para una sola solicitud:

  let config = {
  headers: {
  header1: value,
  }
  }
  let data = {
  ''HTTP_CONTENT_LANGUAGE'': self.language
  }
  axios.post(URL, data, config).then(...)

• Para configurar la configuración global por defecto:

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

• Para establecer como predeterminado en la instancia de 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;
  });

Answer 5

Puede inicializar un encabezado predeterminado 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)
})

Answer 6

Puedes pasar un objeto de configuración a axios como:

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