Giới thiệu về Axios
Axios là một thư viện HTTP dựa trên promise, có thể được sử dụng cả trong trình duyệt và node.js.
Ưu điểm của Axios:
- Tạo XMLHttpRequests từ trình duyệt
- Tạo yêu cầu http từ node.js
- Hỗ trợ API Promise
- Chặn yêu cầu và phản hồi
- Chuyển đổi dữ liệu yêu cầu và phản hồi
- Hủy yêu cầu
- Tự động chuyển đổi dữ liệu JSON
- Hỗ trợ phòng chống XSRF ở phía client
Cách cài đặt Axios
Có thể cài đặt thông qua npm
$ npm install axios
Cũng có thể sử dụng CDN để đưa vào trang
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Các cách sử dụng Axios
Sau khi đã đưa Axios vào, chúng ta bắt đầu sử dụng. Có nhiều cách sử dụng Axios:
- Tạo yêu cầu bằng cách truyền cấu hình cho axios: axios(config)
// Gửi yêu cầu POST
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'John',
lastName: 'Doe'
}
});
- Ngoài ra, có thể truyền url làm tham số đầu tiên cho phương thức axios: axios(url, [config]). Nếu không truyền config hoặc method trong config, axios sẽ mặc định sử dụng phương thức GET:
// Gửi yêu cầu GET (phương thức mặc định)
axios('/user/12345');
- Đối với các yêu cầu loại GET (get, delete, head, options), có thể sử dụng cú pháp axios[method](url, [config]). Cú pháp này tương tự với ajax của jQuery nhưng có khác biệt. Trong jQuery, tham số cho ajax được truyền qua trường data. Tuy nhiên, với axios, đối với các yêu cầu loại GET, dữ liệu có thể được đặt trên url hoặc thông qua tham số params trong config. Đối với các yêu cầu loại POST (post, put, patch), có thể truyền tham số qua data trong config hoặc sử dụng cú pháp: axios[method](url, data, [config]). Dưới đây là một số ví dụ:
Yêu cầu GET:
// Tạo yêu cầu cho user với ID cho trước
axios.get('/user?ID=12345')
.then(function (ketqua) {
console.log(ketqua);
})
.catch(function (loi) {
console.log(loi);
});
// Tùy chọn, yêu cầu trên có thể được viết như sau
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (ketqua) {
console.log(ketqua);
})
.catch(function (loi) {
console.log(loi);
});
Yêu cầu POST:
axios.post('/user', {
firstName: 'John',
lastName: 'Doe'
})
.then(function (ketqua) {
console.log(ketqua);
})
.catch(function (loi) {
console.log(loi);
});
Cụ thể, các phương thức sử dụng có thể được tóm tắt như sau: Để thuận tiện, tất cả các phương thức yêu cầu hỗ trợ đều có bí danh
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
- Ngoài ra, có thể tạo một phiên bản axios mới để sử dụng, sau đó sử dụng thông qua phiên bản này. Cách sử dụng tương tự như ba cách trên.
var instance = axios.create({
baseURL: 'https://some-domain.com/api/',
timeout: 1000,
headers: {'X-Custom-Header': 'foobar'}
});
instance.get('hello.api')
Cấu hình Axios
Trong các cách sử dụng trên, chúng ta đã thấy có thể thêm cấu hình khi gửi yêu cầu axios. Các cấu hình có thể bao gồm:
{
// `url` là URL của máy chủ cho yêu cầu
url: '/user',
// `method` là phương thức được sử dụng khi tạo yêu cầu
method: 'get', // mặc định là get
// `baseURL` sẽ tự động được thêm vào trước `url`, trừ khi `url` là một URL tuyệt đối.
// Nó có thể được thiết lập `baseURL` để dễ dàng truyền URL tương đối cho các phương thức của phiên bản axios
baseURL: 'https://some-domain.com/api/',
// `transformRequest` cho phép sửa đổi dữ liệu yêu cầu trước khi gửi đến máy chủ
// Chỉ có thể sử dụng cho các phương thức yêu cầu 'PUT', 'POST' và 'PATCH'
// Các hàm trong mảng sau phải trả về một chuỗi, hoặc ArrayBuffer, hoặc Stream
transformRequest: [function (data) {
// Thực hiện bất kỳ chuyển đổi nào trên data
return data;
}],
// `transformResponse` cho phép sửa đổi dữ liệu phản hồi trước khi truyền cho then/catch
transformResponse: [function (data) {
// Thực hiện bất kỳ chuyển đổi nào trên data
return data;
}],
// `headers` là các tiêu đề tùy chỉnh sắp được gửi
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` là các tham số URL sẽ được gửi cùng với yêu cầu
// Phải là một đối tượng đơn giản hoặc đối tượng URLSearchParams
params: {
ID: 12345
},
// `paramsSerializer` là một hàm chịu trách nhiệm tuần tự hóa `params`
// (ví dụ: https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` là dữ liệu sẽ được gửi làm phần thân yêu cầu
// Chỉ áp dụng cho các phương thức yêu cầu 'PUT', 'POST', và 'PATCH'
// Khi không thiết lập `transformRequest`, phải là một trong các loại sau:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Chỉ trình duyệt: FormData, File, Blob
// - Chỉ Node: Stream
data: {
firstName: 'John'
},
// `timeout` chỉ định thời gian chờ yêu cầu tính bằng mili giây (0 nghĩa là không có thời gian chờ)
// Nếu yêu cầu mất nhiều hơn `timeout` thời gian, yêu cầu sẽ bị hủy
timeout: 1000,
// `withCredentials` chỉ định xem có cần sử dụng凭证 cho yêu cầu跨域 không
// Ví dụ, khi cần gửi cookie đến backend trong yêu cầu跨域, cần thiết lập trường này thành true
withCredentials: false, // mặc định
// `adapter` cho phép tùy chỉnh xử lý yêu cầu để dễ dàng kiểm thử
// Trả về một promise và áp dụng một phản hồi hợp lệ (xem tài liệu [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` chỉ định nên sử dụng xác thực HTTP cơ bản và cung cấp凭证
// Điều này sẽ thiết lập một tiêu đề `Authorization`, ghi đè bất kỳ tiêu đề `Authorization` tùy chỉnh nào đã thiết lập thông qua `headers`
auth: {
username: 'johndoe',
password: 's00pers3cret'
},
// `responseType` chỉ định loại dữ liệu phản hồi từ máy chủ, có thể là 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // mặc định
// `xsrfCookieName` là tên cookie được dùng làm giá trị cho xsrf token
xsrfCookieName: 'XSRF-TOKEN', // mặc định
// `xsrfHeaderName` là tên tiêu đề HTTP chứa giá trị xsrf token
xsrfHeaderName: 'X-XSRF-TOKEN', // mặc định
// `onUploadProgress` cho phép xử lý sự kiện tiến trình tải lên
onUploadProgress: function (progressEvent) {
// Xử lý sự kiện tiến trình gốc
},
// `onDownloadProgress` cho phép xử lý sự kiện tiến trình tải xuống
onDownloadProgress: function (progressEvent) {
// Xử lý sự kiện tiến trình gốc
},
// `maxContentLength` định nghĩa kích thước tối đa cho nội dung phản hồi được phép
maxContentLength: 2000,
// `validateStatus` định nghĩa xem mã trạng thái HTTP cho trước có nên resolve hay reject promise. Nếu `validateStatus` trả về `true` (hoặc được thiết lập thành `null` hoặc `undefined`), promise sẽ được resolve; ngược lại, promise sẽ bị reject
validateStatus: function (status) {
return status >= 200 && status < 300; // mặc định
},
// `maxRedirects` định nghĩa số lần chuyển hướng tối đa được follow trong node.js
// Nếu được thiết lập thành 0, sẽ không follow bất kỳ chuyển hướng nào
maxRedirects: 5, // mặc định
// `httpAgent` và `httpsAgent` lần lượt được sử dụng trong node.js để định nghĩa proxy tùy chỉnh được sử dụng khi thực hiện http và https. Cho phép cấu hình tùy chọn như sau:
// `keepAlive` mặc định không được kích hoạt
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' định nghĩa tên máy chủ và cổng của máy chủ proxy
// `auth` chỉ định xác thực HTTP cơ bản nên được sử dụng để kết nối proxy và cung cấp凭证
// Điều này sẽ thiết lập một tiêu đề `Proxy-Authorization`, ghi đè bất kỳ tiêu đề `Proxy-Authorization` tùy chỉnh nào đã thiết lập thông qua `header`.
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'johndoe',
password: 'password123'
}
},
// `cancelToken` chỉ định cancel token được sử dụng để hủy yêu cầu
// (xem phần Cancellation sau để biết thêm chi tiết)
cancelToken: new CancelToken(function (cancel) {
})
}