SoFunction
Updated on 2025-04-05

Detailed explanation of the basic introduction and use of axios's overall strategy (GET and POST)

axios

axios is a Promise-based HTTP client, dedicated to browsers and services

Vue 2.0 officially recommends using axios instead of the original Vue request, so here I will introduce the functions and basic usage methods of axios, hoping to help you all. ^_^

Function

  • Send XMLHttpRequests requests in your browser
  • Send http request in
  • Support Promise API
  • Intercept requests and responses
  • Convert request and response data
  • Cancel request
  • Automatically convert JSON data format
  • Client supports protection against XSRF attacks

Browser support

axios can support IE versions above IE7, and can also support most mainstream browsers. It should be noted that your browser needs to support Promise in order to use axios. So the better way is to install polyfill first, and then use axios.

Install

Using npm:

$ npm install axios

Using bower:

$ bower install axios

Using cdn:

<script src="/axios/dist/"></script>

use

Take Vue as an example here: After installing axios in NPM, you need to reference the package in the file

import axios from 'axios'

Then global binding

.$http = axios

You can then use $http in the .vue file instead of axios

GET

// Make a request for a user with a given ID 
('/user?ID=12345')
 .then(function (response) {
  (response);
 })
 .catch(function (error) {
  (error);
 });

// Optionally the request above could also be done as 
('/user', {
  params: {
   ID: 12345
  }
 })
 .then(function (response) {
  (response);
 })
 .catch(function (error) {
  (error);
 }); 


POST

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

Send multiple requests simultaneously

function getUserAccount() {
 return ('/user/12345');
}

function getUserPermissions() {
 return ('/user/12345/permissions');
}

([getUserAccount(), getUserPermissions()])
 .then((function (acct, perms) {
  // Both requests are now complete 
 }));

Of course, axios' functions also include axios API, interceptor, etc. If you want to know more about it here, you can check the official document: axios. We will introduce the use of interceptor and the configuration of various parameters later.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.