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

1. Installation

node method

npm install axios

Set up index.js:

import axios from 'axios'
Vue.prototype.$ajax = axios

Or use the cdn method

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

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

3.Post request

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

4. Execute multiple requests

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

5. Use the post request in the form of application/x-www-urlencoded:

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

6. Note:

For post requests, in general, the first parameter is the url, the second parameter is the data of the request body to be sent, and the third parameter is the configuration of the request.

In addition: axios is in application/json format by default. If qs.stringify is not applicable, even if the last content-type of the request header is added, it is still in json format.

7. For post requests, we can also use the following jquery ajax to achieve:

$.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, by comparison, it can be found that the request form of jquery is simpler, and the default data format of jqury 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, as follows:

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

For get requests, I personally recommend using the form of axios.get(), as follows:

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

Reference documentation:

1. An example of axios processing http sending requests in vue (Post and get): http://www.jb51.net/article/125717.htm

An example of axios processing http send requests in vue (Post and get)