Я использую Axios для отправки HTTP-сообщения вроде этого:

импортировать axios из 'axios'
params = {'HTTP_CONTENT_LANGUAGE': self.language}
заголовки = {'заголовок1': значение}
axios.post (URL, параметры, заголовки)

Это правильно? Или мне сделать:

axios.post (URL, параметры: параметры, заголовки: заголовки)

user2950593

Ответов: 14

Ответы (14)

Вы можете отправить запрос на получение с заголовками (например, для аутентификации с помощью 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
  }
})

Это простой пример конфигурации с заголовками и 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.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)
        })

Я столкнулся с этой проблемой в почтовом запросе. Я так изменил заголовок Axios. Работает нормально.

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

Мне пришлось создать объект fd = new FormData () и использовать метод [. Append ()] [1] перед отправкой его через axios в мой Django API, в противном случае я получаю ошибку 400. В моем бэкэнде изображение профиля связано с моделью пользователя посредством отношения OneToOne. Поэтому он сериализуется как вложенный объект и ожидает, что это приведет к срабатыванию запроса на размещение.

Все изменения состояния в интерфейсе выполняются с помощью метода this.setState. Я считаю, что важной частью является метод handleSubmit в конце.

Сначала мой запрос на размещение аксиомов:

export const PutUser=(data)=>(dispatch,getState)=>{                                                                                                                                                                                                                                                                                                                                                                                                                                           
    dispatch({type: AUTH_USER_LOADING});                                                                                                                                                                                                 
    const token=getState().auth.token;                                                                                                                                                                                                                       
    axios(                                                                                                                                                                                                                                                   
    {                                                                                                                                                                                                                                                        
    ¦ method:'put',                                                                                                                                                                                                                                          
    ¦ url:`https:///api/account/user/`,                                                                                                                                                                                           
    ¦ data:data,                                                                                                                                                                                                                                             
    ¦ headers:{                                                                                                                                                                                                                                              
    ¦ ¦ Authorization: 'Token '+token||null,                                                                                                                                                                                                                 
    ¦ ¦ 'Content-Type': 'multipart/form-data',                                                                                                                                                                                                               
    ¦ }                                                                                                                                                                                                                                                      
    })                                                                                                                                                                                                                                                       
    ¦ .then(response=>{                                                                                                                                                                                                                                      
    ¦ ¦ dispatch({                                                                                                                                                                                                                                           
    ¦ ¦ ¦ type: AUTH_USER_PUT,                                                                                                                                                                                                                               
    ¦ ¦ ¦ payload: response.data,                                                                                                                                                                                                                            
    ¦ ¦ });                                                                                                                                                                                                                                                  
    ¦ })                                                                                                                                                                                                                                                     
    ¦ .catch(err=>{                                                                                                                                                                                                                                          
    ¦ ¦ dispatch({                                                                                                                                                                                                                                           
    ¦ ¦ ¦ type:AUTH_USER_PUT_ERROR,                                                                                                                                                                                                                          
    ¦ ¦ ¦ payload: err,                                                                                                                                                                                                                                      
    ¦ ¦ });                                                                                                                                                                                                                                                  
    ¦ })                                                                                                                                                                                                                                                     
  }      

Мой метод handleSubmit должен создать следующий объект json, в котором атрибут изображения заменяется фактическим вводом пользователя:

user:{
username:'charly',
first_name:'charly',
last_name:'brown',
profile:{
image: 'imgurl',
  }
}

Вот мой метод handleSumit внутри компонента: проверить добавить

handleSubmit=(e)=>{                                                                                                                                                                                                                                      
¦ e.preventDefault();                                                                                                                                                                                                                                                                                                                                                                                                                  
¦ let fd=new FormData();                                                                                                                                                                                                                                 
¦ fd.append('username',this.state.username);                                                                                                                                                                                                             
¦ fd.append('first_name',this.state.first_name);                                                                                                                                                                                                         
¦ fd.append('last_name',this.state.last_name);                                                                                                                                                                                                                                                                                                                                                                                                                  
¦ if(this.state.image!=null){fd.append('profile.image',this.state.image, this.state.image.name)};                                                                                                                                                                                                                                                                                                                                                        
¦ this.props.PutUser(fd);                                                                                                                                                                                                                                
}; 

Вы также можете установить выбранные заголовки для каждого axios запроса:

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    config.headers.Authorization = 'AUTH_TOKEN';
    return config;
});

Второй способ

axios.defaults.headers.common['Authorization'] = 'AUTH_TOKEN';

Вы можете передать объект конфигурации в axios, например:

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

Это можно сделать несколькими способами:

  • Для разового запроса:

    let config = {
      заголовки: {
        header1: значение,
      }
    }
    
    let data = {
      'HTTP_CONTENT_LANGUAGE': self.language
    }
    
    axios.post (URL, данные, конфигурация) .then (...)
    
  • Для установки глобальной конфигурации по умолчанию:

    axios.defaults.headers.post ['header1'] = 'value' // для запросов POST
    axios.defaults.headers.common ['header1'] = 'value' // для всех запросов
    
  • Для установки по умолчанию в экземпляре axios:

    let instance = axios.create ({
      заголовки: {
        post: {// может быть обычным или любым другим методом
          header1: 'значение1'
        }
      }
    })
    
    // - или после того, как экземпляр был создан
    instance.defaults.headers.post ['header1'] = 'значение'
    
    // - или до того, как будет сделан запрос
    // используя перехватчики
    instance.interceptors.request.use (config => {
      config.headers.post ['header1'] = 'значение';
      вернуть конфиг;
    });
    

Использование Async / Await

подпись сообщения Axios

сообщение (url: строка, данные ?: любой, конфигурация ?: AxiosRequestConfig): Promise И данные, и конфигурация не являются обязательными

AxiosRequestConfig можно посмотреть - https://github.com/axios/axios/blob/e462973a4b23e9541efe3e64ca120ae9111a6ad8/index.d.ts#L60

 ....
 ....
 try {
   ....
   ....
   const url = "your post url"
   const data = {
     HTTP_CONTENT_LANGUAGE: self.language
   }
   const config = {
      headers: {
       "header1": value
      },
      timeout: 1000,
      // plenty more options can be added, refer source link above
    }

   const response = await axios.post(url, data, config);
   // If Everything's OK, make use of the response data
   const responseData = response.data;
   ....
   ....
 }catch(err){
   // handle the error
   if(axios.isAxiosError(err){
     ....
     ....
   }
 }

axios.post ('url', {"body": data}, {
    заголовки: {
    'Content-Type': 'приложение / json'
    }
  }
)

Вот правильный путь: -

axios.post ('url', {"body": data}, {
    заголовки: {
    'Content-Type': 'приложение / json'
    }
  }
)

@ user2950593 Ваш запрос axios верен. Вам необходимо разрешить свои пользовательские заголовки на стороне сервера. Если у вас есть api на php, этот код будет работать для вас.

header("Access-Control-Allow-Origin: *");   
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, HEAD");
header("Access-Control-Allow-Headers: Content-Type, header1");

Как только вы разрешите свои собственные заголовки на стороне сервера, ваши запросы axios начнут работать нормально.

попробуйте этот код

в примере кода используйте axios get rest 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);
  });
}

Надежда - помощь.

, если вы хотите сделать запрос на получение с параметрами и заголовками.

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

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

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

2022 WebDevInsider