Yêu cầu HTTP Vue
Yêu cầu HTTP là một phần của giao tiếp giữa máy khách và máy chủ.
Máy khách gửi yêu cầu HTTP đến máy chủ để xử lý yêu cầu và trả về phản hồi HTTP.
HTTP
HTTP là viết tắt của Giao thức truyền tải văn bản Hyper Text ext T.
Trình duyệt của chúng tôi luôn thực hiện các yêu cầu HTTP ở chế độ nền khi chúng tôi duyệt Internet. Khi chúng tôi truy cập một trang Internet, trình duyệt của chúng tôi (máy khách) sẽ gửi một số yêu cầu HTTP để yêu cầu máy chủ gửi cho chúng tôi trang mà chúng tôi muốn với tất cả các tệp và dữ liệu có liên quan dưới dạng phản hồi HTTP.
Các loại yêu cầu HTTP phổ biến nhất là POST , GET , PUT , PATCH và DELETE . Tìm hiểu thêm về các loại yêu cầu HTTP khác nhau trên trang Phương thức yêu cầu HTTP của chúng tôi.
Tìm hiểu thêm về HTTP là gì trên trang HTTP là gì của chúng tôi.
Phương pháp 'tìm nạp'
Để lấy dữ liệu từ máy chủ trong Vue, chúng ta có thể sử dụng phương thức fetch() của JavaScript.
Khi sử dụng phương thức fetch() trong hướng dẫn này, chúng ta sẽ không chỉ định phương thức yêu cầu HTTP và điều đó có nghĩa là phương thức yêu cầu mặc định GET là phương thức được sử dụng ở chế độ nền.
Phương thức fetch() yêu cầu một địa chỉ URL làm đối số để nó biết lấy dữ liệu từ đâu.
Dưới đây là một ví dụ đơn giản sử dụng phương thức fetch() để gửi yêu cầu HTTP GET và nhận dữ liệu dưới dạng phản hồi HTTP. Dữ liệu được yêu cầu trong trường hợp này là văn bản bên trong tệp cục bộ file.txt :
Ví dụ
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>
Chạy Ví dụ »Trong ví dụ trên, kết quả là chúng ta chỉ nhận được "[object Promise]", nhưng đó không phải là điều chúng ta muốn.
Chúng tôi nhận được kết quả này vì fetch() là một phương thức dựa trên lời hứa trả về một đối tượng lời hứa. Do đó, kết quả trả về đầu tiên mà phương thức fetch() đưa ra chỉ là một đối tượng có nghĩa là yêu cầu HTTP đã được gửi. Đây là trạng thái "đang chờ xử lý".
Khi phương thức fetch() thực sự nhận được dữ liệu chúng ta muốn, lời hứa sẽ được thực hiện.
Để chờ phản hồi được thực hiện, với dữ liệu mong muốn, chúng ta cần sử dụng toán await trước phương thức fetch() :
const response = await fetch("file.txt");
Khi toán tử await được sử dụng bên trong một phương thức, phương thức đó bắt buộc phải được khai báo bằng toán tử async :
async fetchData() {
const response = await fetch("file.txt");
this.data = response;
}
Toán tử async cho trình duyệt biết rằng phương thức này không đồng bộ, có nghĩa là nó chờ một cái gì đó và trình duyệt có thể tiếp tục thực hiện các tác vụ khác trong khi chờ phương thức hoàn thành.
Bây giờ những gì chúng tôi nhận được là "Phản hồi" chứ không còn chỉ là "Lời hứa", điều đó có nghĩa là chúng tôi đã tiến gần hơn một bước để có được văn bản thực tế bên trong tệp file.txt :
Ví dụ
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>
Chạy Ví dụ » Để lấy văn bản bên trong file file.txt , chúng ta cần sử dụng phương thức text() trên phản hồi. Vì phương thức text() là phương thức dựa trên lời hứa nên chúng ta cần sử dụng toán tử await ở phía trước nó.
Cuối cùng! Bây giờ chúng ta đã có những gì mình cần để lấy văn bản từ bên trong tệp file.txt bằng phương thức fetch() :
Ví dụ
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>
Chạy Ví dụ »Tìm nạp dữ liệu từ tệp JSON
Trong ví dụ trước, chúng tôi đã tìm nạp văn bản từ tệp .txt . Nhưng có nhiều cách để lưu trữ dữ liệu và bây giờ chúng ta sẽ xem cách lấy thông tin từ tệp .json .
JSON là một định dạng tệp phổ biến, dễ làm việc vì dữ liệu được lưu trữ dưới dạng văn bản để con người dễ đọc và định dạng JSON cũng được các ngôn ngữ lập trình hỗ trợ rộng rãi, chẳng hạn như chúng ta có thể chỉ định những gì dữ liệu để trích xuất từ tệp .json .
Để đọc dữ liệu từ tệp .json , thay đổi duy nhất chúng ta cần thực hiện đối với ví dụ trên là tìm nạp tệp .json và sử dụng phương thức json() thay vì phương thức text() trên phản hồi.
Phương thức json() đọc phản hồi từ yêu cầu HTTP và trả về một đối tượng JavaScript.
Chúng tôi sử dụng thẻ <pre> ở đây để hiển thị văn bản có định dạng JSON vì nó giữ nguyên khoảng trắng và ngắt dòng để dễ đọc hơn.
Ví dụ
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>
Chạy Ví dụ » Vì kết quả của phương thức json() là một đối tượng JavaScript nên chúng ta có thể sửa đổi ví dụ trên để hiển thị một con vật ngẫu nhiên từ tệp bigLandMammals.json :
Ví dụ
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>
Chạy Ví dụ »Dữ liệu từ API
API là viết tắt của Giao diện lập trình ứng dụng. Bạn có thể tìm hiểu thêm về API tại đây .
Có rất nhiều API miễn phí thú vị mà chúng ta có thể kết nối và sử dụng để lấy dữ liệu thời tiết, dữ liệu sàn giao dịch chứng khoán, v.v.
Phản hồi mà chúng tôi nhận được khi gọi API bằng yêu cầu HTTP có thể chứa tất cả các loại dữ liệu nhưng thường chứa dữ liệu ở định dạng JSON .
Ví dụ
Có thể nhấp vào nút để nhận người dùng ngẫu nhiên từ API Random-data-api.com .
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="https://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>
Chạy Ví dụ »Chúng ta có thể sửa đổi ví dụ trước một chút để bao gồm người dùng ngẫu nhiên theo cách thân thiện hơn với người dùng:
Ví dụ
Chúng tôi hiển thị tên người dùng ngẫu nhiên trong thẻ <pre> , cùng với chức danh và hình ảnh công việc khi nhấp vào nút.
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="https://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>
Chạy Ví dụ »Yêu cầu HTTP trong Vue với Thư viện 'axios'
Thư viện JavaScript 'axios' cũng cho phép chúng ta thực hiện các yêu cầu HTTP.
Để tạo và chạy ví dụ trên máy của riêng bạn, trước tiên bạn cần cài đặt thư viện 'axios' bằng thiết bị đầu cuối trong thư mục dự án của mình, như sau:
npm install axios
Đây là cách chúng ta có thể sử dụng thư viện 'axios' trong Vue để tìm nạp một người dùng ngẫu nhiên:
Ví dụ
Thay vào đó, chỉ những thay đổi nhỏ được thực hiện đối với ví dụ trước để thực hiện yêu cầu HTTP với thư viện 'axios'.
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="https://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>
Chạy Ví dụ »