Commonly used request method aliases based on Axios (detailed explanation)

Below I will share with you an article about Axios commonly used request method aliases, which has good reference value and I hope it will be helpful to everyone.

Axios

is a promise-based HTTP library that can be used in browsers and node.js.

Commonly used request method aliases generally include: Get/post/http protocol request

Execute Get request

function get(){
 return axios.get('/data.json', {
    params:{
     id:1234
    }
    }).then(function (response) {
     console.log(response);
    })
   .catch(function (error) {
    console.log(error);
   });
 }

When using the get method to pass parameters, the params method is used

Perform Post request

function post(){
return axios.post('/data.json', {
  id:1234
    })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
 }

When using the post method to pass parameters, the data is transferred directly. This is also the difference between the two methods.

Execute http protocol request

function http(){
 return axios({
 method: 'post',
 url: '/data.json',
 data: {
  id: 1111,
 },
params: {
 id:2222,
 }).then(res=>{
  this.msg=res.data;
 });
}

Pay attention to the difference here. When using post request, perform data processing The data method is used to pass parameters, and the params method is used when using get requests.

Use interceptors:

Intercept requests or responses before they are processed by then or catch.

// 添加请求拦截器
mounted:function(){
  axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
   }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
   });
// 添加响应拦截器
  axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
   }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
   });
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

jquery implements drag file upload loading progress bar function

Analysis of javascript prototype and prototype chain

Detailed tutorial on using Angular CLI to generate Angular 5 projects

The above is the detailed content of Commonly used request method aliases based on Axios (detailed explanation). For more information, please follow other related articles on the PHP Chinese website!