Home > Web Front-end > JS Tutorial > body text

axios handles http sending Post and get

php中世界最好的语言
Release: 2018-04-17 15:47:23
Original
2270 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!

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template