Ra mắt hai series mới cực hot Trí tuệ nhân tạo A đến ZPython công cụ không thể thiếu khi nghiên cứu Data science, Machine learning.

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

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?

Mô hình MVVM trong Vue.js

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/vue-resource@1.3.1/dist/vue-resource.min.js"></script>

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';

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");

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() }}">

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ới instance this.$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
  });
}

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);

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
  });
}

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
  });
}

Ví dụ một ứng dụng CRUD sử dụng Vue.js với plugin vue-resource

Xem chi tiết tại đường dẫn: Xây dựng ứng dụng CRUD với Vue.js và Laravel.

Ứng dụng CRUD sử dụng Vue.js trong Laravel


CÁC BÀI VIẾT KHÁC

FirebirD

Đam mê Toán học, Lập trình. Sở thích chia sẻ kiến thức, Phim hài, Bóng đá, Cà phê sáng với bạn bè.

Laravel là gì, tại sao dùng framework Laravel?

Sử dụng Vue-router cho các ứng dụng đơn trang

2 Bình luận trong "Sử dụng plugin vue-resource xử lý Web request và response"

  1. WebDesigner

    3 years ago

    Phản hồi
    Vue.js khai tử Vue-resource rồi mà vẫn còn bài viết này? Chính thức thay bằng axios rồi nhé.
  2. Toan

    2 years ago

    Phản hồi
    Khai từ thì khai tử chứ vẫn còn xài tốt chán mà

Thêm bình luận