码农教程 - 一技在手,衣食无忧! tools

Vue HTTP 请求

❮ 上一节 下一节 ❯

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

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

HTTP协议

HTTP协议代表H伊佩尔时间分机时间转移磷罗托科尔。

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

最常见的 HTTP 请求类型是POST,GET,PUT,PATCH， 和DELETE。了解有关不同类型 HTTP 请求的更多信息HTTP请求方法页。

了解有关 HTTP 的更多信息什么是 HTTP页。

“获取”方法

要从 Vue 中的服务器获取数据，我们可以使用 JavaScriptfetch()方法。

当我们使用fetch()method 在本教程中我们不会指定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()方法实际上得到了我们想要的数据，承诺就实现了。

为了等待响应得到满足，我们需要使用我们想要的数据await前面的运算符fetch()方法：

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()方法是基于承诺的方法，我们需要使用await前面的运算符。

最后！现在我们已经有了从内部获取文本所需的内容file.txt文件与fetch()方法：

示例

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文件。

从a读取数据.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()method 是一个 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 代表A应用磷编程我界面。您可以了解更多API信息这里。

我们可以连接和使用许多有趣的免费 API，以获取天气数据、证券交易所数据等。

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

示例

单击按钮可以从列表中获取随机用户随机数据 api.comAPI。

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”库，如下所示：

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>
运行示例 »

❮ 上一节 下一节 ❯