วิธีการตั้งค่าส่วนหัวและตัวเลือกใน axios?

ฉันใช้ Axios เพื่อโพสต์ HTTP แบบนี้:

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)

มีหลายวิธีในการทำสิ่งนี้:

• สำหรับคำขอเดียว:

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

คุณสามารถส่งคำขอรับกับส่วนหัว (สำหรับการตรวจสอบกับ 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
  }
})

คุณสามารถส่งผ่านวัตถุการกำหนดค่าไปยัง axios เช่น:

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

นี่เป็นตัวอย่างง่ายๆของการกำหนดค่าด้วยส่วนหัวและ 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 เป็นข้อมูลที่คุณต้องการส่ง มันสามารถเป็นค่าหรืออาร์เรย์ (ถ้าคุณต้องการส่งวัตถุคุณอาจต้องทำให้เป็นอันดับ)

นี่คือวิธีที่ถูกต้อง: -

axios.post('url', {"body":data}, {
    headers: {
    'Content-Type': 'application/json'
    }
  }
)

คุณสามารถเริ่มต้นส่วนหัวเริ่มต้น 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)
        })

ถ้าคุณต้องการที่จะรับคำขอกับ params และส่วนหัว

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

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

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

ลองรหัสนี้

ในตัวอย่างรหัสใช้ axios รับ API ที่เหลือ

ในเมานท์

  mounted(){
    var config = {
    headers: { 
      'x-rapidapi-host': 'covid-19-coronavirus-statistics.p.rapidapi.com',
      'x-rapidapi-key': '5156f83861mshd5c5731412d4c5fp18132ejsn8ae65e661a54' 
      }
   };
   axios.get('https://covid-19-coronavirus-statistics.p.rapidapi.com/v1/stats? 
    country=Thailand',  config)
    .then((response) => {
    console.log(response.data);
  });
}

ความหวังคือความช่วยเหลือ

ฉันต้องเผชิญกับปัญหานี้ในการโพสต์การร้องขอ ฉันมีการเปลี่ยนแปลงเช่นนี้ในส่วนหัว axios มันใช้งานได้ดี

axios.post('http://localhost/M-Experience/resources/GETrends.php',
      {
        firstName: this.name
      },
      {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
      });