How to handle asynchronous data requests and responses in Vue

How to handle asynchronous data requests and responses in Vue

In Vue, we often need to interact with the server for data. Normally, we will use asynchronous requests. to get the data returned by the server. This article will introduce how to handle asynchronous data requests and responses in Vue, and provide specific code examples.

Send asynchronous requests

To send asynchronous requests in Vue, we usually use the axios library to make network requests. First, we need to install the axios library in the project. Execute the following command in the command line:

npm install axios

After the installation is complete, in the component that needs to send asynchronous requests, we can import the axios library through the following code:

import axios from 'axios';

Next, we can use the axios library to send asynchronous requests. For example, if we request the server to obtain user list data, we can send the request in the created hook function of the component:

export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    axios.get('/api/user-list')
      .then(res => {
        this.userList = res.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
}

In the above code, we use axios.get() The method sends a GET request, and the requested address is /api/user-list. Then, process the response of a successful request through the .then() method, and save the returned user list data to the userList attribute. If the request fails, we can capture the error and handle it through the .catch() method.

Display asynchronous data

Once we successfully obtain the data of the asynchronous request, we can use the data in the Vue template. The following is a simple example showing how to display asynchronous data in a template:

<script>
export default {
  data() {
    return {
      userList: []
    };
  },
  created() {
    axios.get('/api/user-list')
      .then(res =&gt; {
        this.userList = res.data;
      })
      .catch(error =&gt; {
        console.log(error);
      });
  }
}
</script>

In the above code, we use the v-for directive to convert each item in userList User information is rendered into a <li> element, and the user name is displayed using the interpolation expression {{ user.name }}.

Handling asynchronous request errors

During the asynchronous request process, errors may occur, such as network errors, server exceptions, etc. In order to provide a better user experience, we can handle these errors in Vue and give corresponding prompts. The following is a simple sample code that shows how to handle errors for asynchronous requests:

<template>
  <div>
    <button @click="fetchData">获取用户列表</button>
    <ul v-if="userList.length">
      <li v-for="user in userList" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <p v-else-if="loading">加载中...</p>
    <p v-else>获取数据失败</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
      loading: false
    };
  },
  methods: {
    fetchData() {
      this.loading = true;
      axios.get('/api/user-list')
        .then(res => {
          this.userList = res.data;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
          this.loading = false;
        });
    }
  }
}
</script>

In the above code, we added a button Get the user list, which will be triggered when the user clicks the button fetchData method. Before getting the data, we set the loading attribute to true and display Loading...## in the template based on the value of loading # tips. If the data is obtained successfully, we assign the userList attribute to the returned data and set loading to false. If the data acquisition fails, the Data acquisition failure prompt is displayed in the template, and loading is set to false.

To sum up, this article introduces the method of processing asynchronous data requests and responses in Vue, and provides specific code examples. Through the above code, we can better manage asynchronous requests and improve user experience.

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