How to use axios for HTTP requests and responses in Vue

Vue is a popular JavaScript framework that helps us build user interfaces. In actual development, we often need to send HTTP requests to the backend server and process the returned response data. To simplify this process, we can use the Axios library.

Axios is a Promise-based HTTP client library that can send AJAX requests in the browser and Node.js. It has many powerful functions, such as intercepting requests and responses, converting request and response data, canceling requests, etc. Using Axios in a Vue project is very simple. Let’s introduce it in detail below.

First, we need to install Axios in the Vue project. Axios can be installed using npm or yarn. Execute the following command:

npm install axios

or

yarn add axios

After the installation is complete, we can introduce and use Axios in the Vue component. In the component that needs to send HTTP requests, you can follow the following steps to configure it.

Step 1: Introduce Axios

First, we need to introduce Axios in the component that needs to send the request. Axios can be introduced using the import statement in the component's script block.

import axios from 'axios';

Step 2: Send an HTTP request

It is very simple to use Axios to send an HTTP request in Vue. You can use Axios's get, post, put, delete and other methods to send requests in the method that needs to send a request. The following are several common examples:

// 发送GET请求
axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送POST请求
axios.post('/api/user', { name: 'John', age: 25 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送PUT请求
axios.put('/api/user/1', { name: 'John', age: 26 })
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

// 发送DELETE请求
axios.delete('/api/user/1')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

Step 3: Process the response

When the server returns the response data, we can process the response data in the then callback function or in the catch callback Handle request errors in the function. The following is a simple example:

axios.get('/api/user')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

In this example, when the GET request is successful, we print the response data; when the request fails, we print the error message.

In addition to the above basic usage, Axios also provides many other functions, such as configuring global default request headers, setting request timeouts, adding request interceptors and response interceptors, etc. These features can help us better manage HTTP requests.

In summary, using Axios for HTTP requests and responses in Vue is very simple. By introducing Axios and using its methods, we can easily send HTTP requests and process the returned response data in Vue. This allows us to communicate with the backend server more efficiently, improving development efficiency and user experience.

The above is the detailed content of How to use axios for HTTP requests and responses in Vue. For more information, please follow other related articles on the PHP Chinese website!