Vue HTTP 请求

❮ 上一个下一个 ❯

HTTP 请求 是客户端与服务器之间通信的一部分。

客户端向服务器发送一个 HTTP 请求，服务器处理请求并返回一个 HTTP 响应。

HTTP

HTTP 代表 Hyper Text Transfer Protocol（超文本传输协议）。

当我们在互联网上浏览时，我们的浏览器在后台一直在进行 HTTP 请求。当我们访问一个互联网页面时，我们的浏览器（客户端）会向服务器发送多个 HTTP 请求，以便服务器向我们发送我们想要的页面，以及所有相关的文件和数据作为 HTTP 响应。

最常见的 HTTP 请求类型是 POST、GET、PUT、PATCH 和 DELETE。在我们的 HTTP 请求方法页面上了解更多关于不同 HTTP 请求类型的信息。

在我们的什么是 HTTP 页面上了解更多关于 HTTP 的信息。

'fetch' 方法

为了从 Vue 中的服务器获取数据，我们可以使用 JavaScript fetch() 方法。

在本教程中，当我们使用 fetch() 方法时，我们不会指定 HTTP 请求方法，这意味着默认的请求方法 GET 是在后台使用的。

fetch() 方法期望一个 URL 地址作为参数，以便它知道从哪里获取数据。

以下是一个简单的示例，它使用 fetch() 方法发送一个 HTTP GET 请求，并接收数据作为 HTTP 响应。在这种情况下，请求的数据是本地文件 file.txt 中的文本。

示例

App.vue:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    fetchData() {
      const response = fetch("file.txt");
      this.data = response;
    }
  }
};
</script>

运行示例 »

在上面的示例中，我们只得到 "[object Promise]" 作为结果，但这并不是我们想要的。

我们得到这个结果是因为 fetch() 是一个基于 promise 的方法，它返回一个 promise 对象。因此，fetch() 方法给出的第一个返回值只是一个对象，这意味着 HTTP 请求已经发送。这是“待处理”状态。

当 fetch() 方法真正获取到我们想要的数据时，promise 就被 fulfilled（完成）了。

为了等待响应被 fulfilled，以及我们想要的数据，我们需要在 fetch() 方法前面使用 await 运算符。

const response = await fetch("file.txt");

当在方法内部使用 await 运算符时，该方法需要使用 async 运算符进行声明。

async fetchData() {
  const response = await fetch("file.txt");
  this.data = response;
}

async 运算符告诉浏览器该方法是异步的，这意味着它在等待某些东西，浏览器可以在等待方法完成时继续执行其他任务。

现在我们得到的是一个“Response”（响应），而不再仅仅是一个“Promise”，这意味着我们离获取 file.txt 文件中的实际文本又近了一步。

示例

App.vue:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("file.txt");
      this.data = response;
    }
  }
};
</script>

运行示例 »

为了获取 file.txt 文件中的文本，我们需要在响应上使用 text() 方法。由于 text() 方法是一个基于 promise 的方法，我们需要在它前面使用 await 运算符。

终于！ 我们现在有了使用 fetch() 方法从 file.txt 文件中获取文本所需的一切。

示例

App.vue:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <p v-if="data">{{ data }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("file.txt");
      this.data = await response.text();
    }
  }
};
</script>

运行示例 »

从 JSON 文件获取数据

在前面的示例中，我们从一个 .txt 文件中获取了文本。但是，存储数据的方法有很多，现在我们将看到如何从 .json 文件中获取信息。

JSON 是一种常见的格式，易于使用，因为数据存储为文本，这样人类就容易阅读，而且 JSON 也得到了编程语言的广泛支持，因此我们可以，例如，指定要从 .json 文件中提取哪些数据。

要读取 .json 文件中的数据，我们只需要对上面的示例进行唯一更改，即获取一个 .json 文件，并在响应上使用 json() 方法，而不是 text() 方法。

json() 方法读取 HTTP 请求的响应，并返回一个 JavaScript 对象。

我们在这里使用 <pre> 标签来显示 JSON 文本，因为它会保留空格和换行符，以便更容易阅读。

示例

App.vue:

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <pre v-if="data">{{ data }}</pre>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: null,
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("bigLandMammals.json");
      this.data = await response.json();
    }
  }
};
</script>

运行示例 »

由于 json() 方法的结果是一个 JavaScript 对象，我们可以修改上面的示例来显示 bigLandMammals.json 文件中的随机动物。

示例

App.vue:

<template>
  <p>Try clicking the button more than once to see new animals picked randomly.</p>
  <button @click="fetchData">Fetch Data</button>
  <div v-if="randomMammal">
    <h2>{{ randomMammal.name }}</h2>
    <p>Max weight: {{ randomMammal.maxWeight }} kg</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      randomMammal: null
    };
  },
  methods: {
    async fetchData() {
      const response = await fetch("bigLandMammals.json");
      const data = await response.json();
      const randIndex = Math.floor(Math.random()*data.results.length);
      this.randomMammal = data.results[randIndex];
    }
  }
};
</script>

运行示例 »

来自 API 的数据

API 代表 Application Programming Interface（应用程序编程接口）。您可以在这里了解更多关于 API 的信息。

有许多有趣的 API 可以连接和使用，以获取天气数据、股票交易数据等。

当我们使用 HTTP 请求调用 API 时，得到的响应可以包含各种数据，但通常包含 JSON 格式的数据。

示例

单击一个按钮可以从 random-data-api.com API 获取一个随机用户。

App.vue:

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <pre v-if="data">{{ data }}</pre>
</template>

<script>
  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        const response = await fetch("https://random-data-api.com/api/v2/users"); 
        this.data = await response.json();
      }   
    }
  };
</script>

运行示例 »

我们可以稍微修改一下之前的示例，以更友好的方式包含随机用户。

示例

当单击按钮时，我们在 <pre> 标签中显示随机用户名，以及职位和图像。

App.vue:

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <div v-if="data" id="dataDiv">
    <img :src="data.avatar" alt="avatar">
    <pre>{{ data.first_name + " " + data.last_name }}</pre>
    <p>"{{ data.employment.title }}"</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        const response = await fetch("https://random-data-api.com/api/v2/users"); 
        this.data = await response.json();
      },    
    }
  };
</script>

<style>
#dataDiv {
  width: 240px;
  background-color: aquamarine;
  border: solid black 1px;
  margin-top: 10px;
  padding: 10px;
}
#dataDiv > img {
  width: 100%;
}
pre {
  font-size: larger;
  font-weight: bold;
}
</style>

运行示例 »

Vue 中使用 'axios' 库进行 HTTP 请求

JavaScript 库 'axios' 也允许我们发出 HTTP 请求。

要在您自己的机器上创建和运行示例，您首先需要使用项目文件夹中的终端安装 'axios' 库，如下所示

npm install axios

以下是我们在 Vue 中使用 'axios' 库来获取随机用户的方式

示例

与之前的示例相比，只对代码进行了细微调整，使用 'axios' 库来进行 HTTP 请求。

App.vue:

<template>
  <h1>Example</h1>
  <p>Click the button to fetch data with an HTTP request.</p>
  <p>Each click generates an object with a random user from <a href="https://random-data-api.com/" target="_blank">https://random-data-api.com/</a>.</p>
  <p>The robot avatars are lovingly delivered by <a href="http://Robohash.org" target="_blank">RoboHash</a>.</p>
  <button @click="fetchData">Fetch data</button>
  <div v-if="data" id="dataDiv">
    <img :src="data.data.avatar" alt="avatar">
    <pre>{{ data.data.first_name + " " + data.data.last_name }}</pre>
    <p>"{{ data.data.employment.title }}"</p>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    data() {
      return {
        data: null,
      };
    },
    methods: {
      async fetchData() {      
        this.data = await axios.get("https://random-data-api.com/api/v2/users");
      }
    }
  };
</script>

<style>
#dataDiv {
  width: 240px;
  background-color: aquamarine;
  border: solid black 1px;
  margin-top: 10px;
  padding: 10px;
}
#dataDiv > img {
  width: 100%;
}
pre {
  font-size: larger;
  font-weight: bold;
}
</style>

运行示例 »

❮ 上一个下一个 ❯

★ +1

W3schools Pathfinder

Track your progress - it's free!

Vue 教程

扩展

Vue 参考

Vue 示例

Vue HTTP 请求

HTTP

'fetch' 方法

示例

示例

示例

从 JSON 文件获取数据

示例

示例

来自 API 的数据

示例

示例

Vue 中使用 'axios' 库进行 HTTP 请求

示例

颜色选择器

Contact Sales

Report Error

Top Tutorials

Top References

Top Examples

Get Certified