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}
})