axios handles http sending Post and get

This time I will bring you axios processing http sending Post and get, axios processing http sending Post and get What are the precautions, the following is a practical case, let's take a look.

axios Chinese documentation # 

##

https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format axios documentation

In terms of processing http requests, it is no longer recommended to use vue-

resource. Instead, use the latest axios. Here is a brief introduction.

Install

Use node

npm install axios

Use cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Basic usageMethod

get request

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

Post request

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

Execute multiple requests at the same time

function getUserAccount() {
 return axios.get('/user/12345');
}
function getUserPermissions() {
 return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
 .then(axios.spread(function (acct, perms) {
  // Both requests are now complete
 }));

The usage method of this is actually the same as the native ajax, and you can understand it at a glance.

Use application/x-www-urlencoded form of post request:

var qs = require('qs');
 axios.post('/bbg/goods/get_goods_list_wechat', qs.stringify({"data": JSON.stringify({
  "isSingle": 1,
  "sbid": 13729792,
  "catalog3": 45908012,
  "offset": 0,
  "pageSize": 25
 })}), {
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6",
  }
 })
 .then(function (response) {
  // if (response.data.code == 626) {
   console.log(response);
  // }
 }).catch(function (error) {
  console.log(error);
 });

Specific usage reference document: https://github.com/mzabriskie/axios#using-applicationx-www-form-urlencoded-format

Note: For post requests, generally, the first parameter is the URL, the second parameter is the request body data to be sent, and the third parameter is the configuration of the request.

In addition: axios defaults to application/json format. If qs.stringify is not applicable, the final content-type format will still be json even if the request header is added.

For post requests, we can also use the following jquery ajax to implement:

    $.ajax({
     url:'api/bbg/goods/get_goods_list_wechat',
     data:{
      'data': JSON.stringify({
            "isSingle": 1,
            "sbid": 13729792,
            "catalog3": 45908012,
            "offset": 0,
            "pageSize": 25
          })    
     },  
     beforeSend: function(request) {
      request.setRequestHeader("BBG-Key", "ab9ef204-3253-49d4-b229-3cc2383480a6");
     }, 
     type:'post', 
     dataType:'json', 
     success:function(data){   
      console.log(data);
     },
     error: function (error) {
      console.log(err);
     },
     complete: function () {
     }
    });

Obviously, through comparison, it can be found that jquery's request form is simpler, and jqury's default data format is application/x-www-urlencoded, which is more convenient in this regard.

In addition, for two identical requests, even if both requests are successful, the results obtained by the two requests are different

It is not difficult to see: the results returned by using axios will be packed with one more layer than the structure (actual results) returned by jquery's ajax, including related config, headers, request, etc.

For get requests, I personally recommend using axios.get(), as shown below:

 axios.get('/bbg/shop/get_classify', {
  params: {
   sid: 13729792
  },
  headers: {
   "BBG-Key": "ab9ef204-3253-49d4-b229-3cc2383480a6"
  }
 })
 .then(function (response) {
  if (response.data.code == 130) {
   items = response.data.data;
   store.commit('update', items);
   console.log(items);
  }
  console.log(response.data.code);
 }).catch(function (error) {
  console.log(error);
  console.log(this);
 });

That is, the first parameter is: url, and the second parameter is a configuration object. We can set params in the configuration object to pass parameters.

I personally understand why get does not have a second parameter as the passed query

string , while post has a second parameter as the post data.

Because get can have no query string or get request, but post must have post data, otherwise there is no need to use post.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Display progress bar when JS uploads files

Layer front-end component image display function

The above is the detailed content of axios handles http sending Post and get. For more information, please follow other related articles on the PHP Chinese website!