Sử dụng plugin vue-resource xử lý Web request và response

Sử dụng plugin vue-resource xử lý Web request và response

Tổng quan

30-09-2021

NỘI DUNG BÀI VIẾT

Chúng ta đã được làm quen với việc xử lý các thành phần HTML trong form nhập liệu thông qua chỉ thị v-model, một câu hỏi đặt ra, sau khi dữ liệu đã được chuyển qua lại trong mô hình MVVM thì muốn lưu dữ liệu xuống database thì làm thế nào?

Toàn bộ công đoạn trong MVVM được xử lý trong core của Vue.js, các chức năng khác không được core này xử lý, cũng chính vì vậy Vue.js giữ được sự nhẹ nhàng về dung lượng và thực thi. Việc lưu trữ dữ liệu xuống database thông qua các Web request và web response sẽ được thực hiện thông qua gói vue-resource.

Sử dụng vue-resource thao tác với web request và web response

Vue-resource được sử dụng cho Vue.js để tạo các yêu cầu web và quản lý các hồi đáp bằng sử dụng XMLHttpRequest hoặc JSON. Bạn có thể cài đặt gói này thông qua yarn hoặc npm

$ yarn add vue-resource
$ npm install vue-resource

hoặc đơn giản là tích hợp các thư viện này thông qua các CDN:

<script src="https://cdn.jsdelivr.net/vue.resource/1.3.1/vue-resource.min.js"></script>
Hoặc
<script src="https://cdnjs.com/libraries/vue-resource"></script>
Hoặc
<script src="https://unpkg.com/[email protected]/dist/vue-resource.min.js"></script>
Code language: HTML, XML (xml)

Cấu hình vue-resource

Để sử dụng Vue-resource cần thiết lập một số các giá trị toàn cục theo cú pháp như sau:

Vue.http.options.root = '/root';
Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';
Code language: JavaScript (javascript)

Với các ứng dụng sử dụng framework như Laravel cần thiết lập CSRF token:

Vue.http.headers.common['X-CSRF-TOKEN'] = $("#token").attr("value");
Code language: JavaScript (javascript)

với giá trị này được thiết lập tại đầu trang trong các view:

<meta id="token" name="token" value="{{ csrf_token() }}">
Code language: HTML, XML (xml)

HTTP request/ response:

Các dịch vụ http có thể được sử dụng toàn cục thông qua Vue.http hoặc thông qua instance của Vue this.ℎ𝑡𝑡𝑝.𝑉ớ𝑖𝑖𝑛𝑠𝑡𝑎𝑛𝑐𝑒𝑡ℎ𝑖𝑠.http.Vớiinstancethis.http chúng ta có thể thực hiện gửi các yêu cầu HTTP:

{
  // GET /someUrl
  this.$http.get('/someUrl').then(response => {
    // success callback
  }, response => {
    // error callback
  });
}
Code language: JavaScript (javascript)

This.$http cung cấp rất nhiều các phương thức:

// in a Vue instance
this.$http.get('/someUrl', [options]).then(successCallback, errorCallback);
this.$http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);
Code language: JavaScript (javascript)

Danh sách các phương thức khác như sau:

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

Với chi tiết các tùy chọn như sau:

Tham số	Type	Mô tả
url	`string`	URL mà yêu cầu sẽ được gửi đến
body	`Object`, `FormData`, `string`	Request body: phần dữ liệu sẽ được gửi đi
headers	`Object`	Headers object to be sent as HTTP request headers
params	`Object`	Parameters object to be sent as URL parameters
method	`string`	Phương thức HTTP có thể là POST, GET…
responseType	`string`	Type of the response body (e.g. text, blob, json, …)
timeout	`number`	Thiết lập thời gian timeout cho yêu cầu web. (`0` là không có timeout)
before	`function(request)`	Callback function dùng thay đổi yêu cầu trước khi gửi
progress	`function(event)`	Callback function to handle the ProgressEvent of uploads
credentials	`boolean`	Indicates whether or not cross-site Access-Control requests should be made using credentials
emulateHTTP	`boolean`	Send PUT, PATCH and DELETE requests with a HTTP POST and set the `X-HTTP-Method-Override` header
emulateJSON	`boolean`	Send request body as `application/x-www-form-urlencoded` content type

Ví dụ Vue-resource

Gửi đi dữ liệu form bằng FormData

{
  var formData = new FormData();

  // append string
  formData.append('foo', 'bar');

  // append Blob/File object
  formData.append('pic', fileInput, 'mypic.jpg');

  // POST /someUrl
  this.$http.post('/someUrl', formData).then(response => {
    // success callback
  }, response => {
    // error callback
  });
}
Code language: JavaScript (javascript)

Hủy một yêu cầu web

Hủy yêu cầu trước khi được gửi, ví dụ

{
  // GET /someUrl
  this.$http.get('/someUrl', {

    // use before callback
    before(request) {

      // abort previous request, if exists
      if (this.previousRequest) {
        this.previousRequest.abort();
      }

      // set previous request on Vue instance
      this.previousRequest = request;
    }

  }).then(response => {
    // success callback
  }, response => {
    // error callback
  });
}
Code language: JavaScript (javascript)