axios handles http sending Post and get-JS Tutorial-php.cn

axios handles http sending Post and get

php中世界最好的语言

Release： 2018-04-17 15:47:23

Original

2277 people have browsed it

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

Copy after login

Use cdn

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

Copy after login

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

Copy after login

Post request

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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

Copy after login

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!