Comprehensive analysis of the basic usage of the Axios request library

Axios is a popular Promise-based HTTP request library for making HTTP requests in browsers and Node.js. It provides a simple and easy-to-use API that can send various types of requests (such as GET, POST, PUT, DELETE, etc.) and process response data. Axios has a 99% probability of being preferred in front-end engineering projects. Let's learn about its basic use through a practical case - writing an interface and calling the Mock data generated by Apifox .

Install Axios

To install Axios, first ensure that the Node.js environment is installed locally, and then choose to execute one of the following commands:

Use npm:

npm install axios

Use yarn:

yarn add axios

Use pnpm:

pnpm install axios

The above command uses partial installation (that is, installed to node_modulesa folder in the project directory). This is the recommended approach because it isolates Axios' dependencies from the project's other dependencies, ensuring that each project can have its own version control and management. If you want to install Axios globally, you can use the -gor --globaloption:

pnpm install -g axios

After the installation is complete, you can create a .jsnew file ending with the suffix. This file is used to initiate HTTP requests. The basic structure is as shown below:

 

InterfaceMock

In order to make interface testing more convenient, the Mock data provided in the Apifox sample project is used here . You can visit the official website of Apifox, download it and create a new project to call it.

 

Make a request

Before initiating a request, you must first import the Axios library, and then define a global URL address as needed. The details are as follows:

const $http = require("axios");

/*
    baseUrl: 即请求路径，该路径可在 Apifox 的云端 Mock 查看
*/
const baseUrl = "https://mock.apifox.cn/......";

GET request

An example get request is as follows:

// get
$http.get(`${baseUrl}/pet/1`).then((res) => {
  console.log(res.data);
});

An example response is as follows:

 

POST request

An example of a post request is as follows:

// post
$http
  .post(`${baseUrl}/pet`, {
    name: "太酷啦",
    status: "sold",
  })
  .then((res) => {
    console.log(res.data);
  });

PUT request

An example of a put request is as follows:

// put
$http
  .put(`${baseUrl}/pet`, {
    name: "test",
  })
  .then((res) => {
    console.log(res.data);
  });

DELETE request

An example delete request is as follows:

$http
  .delete(`${baseUrl}/pet/2`) // 删除id为2的数据
  .then(function (res) {
    console.log(res.data);
  });

Summarize

The above introduces the basic use of Axios. In front-end engineering projects, it is often packaged separately to facilitate the call of front-end developers. For further learning, you can visit the official website of Axios. In addition, when back-end personnel have not yet developed the interface, they usually use Mock data to test the business. The advanced Mock function provided by Apifox solves this need very well and greatly facilitates subsequent work.

---

How to obtain information

【Message 777】

Friends who want to get the source code and other tutorial materials, please like + comment + collect , three times in a row!

After three consecutive rounds , I will send you private messages one by one in the comment area~