Vue 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 请求已经发送。这是 "pending" 挂起状态。

当 fetch() 方法实际得到我们想要的数据时，promise 就实现了。

为了等待响应，我们需要在 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 代表应用程序编程接口。您可以在 这里 了解更多关于 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 请求

'axios' JavaScript 库可以让我们进行 HTTP 请求。

要在自己的机器上创建和运行实例，您首先需要使用项目文件夹中的终端安装 '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>