Thực hiện ajax trong vòng lặp trong vue js

05/10/2022 01:19 340

Ví dụ tác vụ dưới đây sử dụng ajax trong vòng lặp

Mình sẽ sử dụng axios cho các request bất đồng bộ mà quen gọi là ajax vậy code của nó ra sao, ngay sau đây là code tham khảo

Chúng ta dùng for để lặp vòng lặp, trước tên function anh chị cần async và trước axios anh chị cần xài await

async sendToAPI(){
			this.sendToAPIText = '<i class="fa fa-spinner fa-spin"></i>&nbsp;Gửi API'
			for (const item of this.selection) {
				const data = this.jsonToFormData({
					action: 'sendToAPI',
					stocksItem: this.list[item]
				})
				this.list[item].status = 1				
				await axios({
					url: check_stocks_code_vars.ajax_url,
					method: 'post',
					data: data
				}).then((res) => {
					const response = res.data.data
					if(response.code === 200){
						this.list[item].status = 2
					}else{
						this.list[item].status = 3
					}
					
					console.log(response)
				})
				.catch((err) => {
					console.log(err)
				})
			}
			this.sendToAPIText = '<i class="fa fa-paper-plane" aria-hidden="true" ></i>&nbsp;Gửi API'
			this.NOTIFY("Đã gửi xong tất cả link đến API!",1)
			
		}

async sendToAPI(){

this.sendToAPIText = '<i class="fa fa-spinner fa-spin"></i> Gửi API'

for (const item of this.selection) {

const data = this.jsonToFormData({

action: 'sendToAPI',

stocksItem: this.list[item]

})

this.list[item].status = 1

await axios({

url: check_stocks_code_vars.ajax_url,

method: 'post',

data: data

}).then((res) => {

const response = res.data.data

if(response.code === 200){

this.list[item].status = 2

}else{

this.list[item].status = 3

}

console.log(response)

})

.catch((err) => {

console.log(err)

})

}

this.sendToAPIText = '<i class="fa fa-paper-plane" aria-hidden="true" ></i> Gửi API'

this.NOTIFY("Đã gửi xong tất cả link đến API!",1)

}

còn jsonToFormData thực chất la function tạo dữ liệu form thôi mình chia sẽ luôn

buildFormData(formData, data, parentKey) {
		if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {
		  Object.keys(data).forEach(key => {
			this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);
		  });
		} else {
		  const value = data == null ? '' : data;
	
		  formData.append(parentKey, value);
		}
	  },
	jsonToFormData(data) {
		const formData = new FormData();
	
		this.buildFormData(formData, data);
	
		return formData;
	}

buildFormData(formData, data, parentKey) {

if (data && typeof data === 'object' && !(data instanceof Date) && !(data instanceof File)) {

Object.keys(data).forEach(key => {

this.buildFormData(formData, data[key], parentKey ? `${parentKey}[${key}]` : key);

});

} else {

const value = data == null ? '' : data;

formData.append(parentKey, value);

}

jsonToFormData(data) {

const formData = new FormData();

this.buildFormData(formData, data);

return formData;

}

còn check_stocks_code_vars.ajax_url chính là url ajax của wordpress được định nghĩa trong

wp_localize_script( 'check-stocks-code-init',
            'check_stocks_code_vars',
            array(
               'ajax_url' => admin_url( 'admin-ajax.php', 'relative' ),
			   'files_url' => CHECKSTOCKSCODE_FILES_URL
            ) 
        );

wp_localize_script( 'check-stocks-code-init',

'check_stocks_code_vars',

array(

'ajax_url' => admin_url( 'admin-ajax.php', 'relative' ),

'files_url' => CHECKSTOCKSCODE_FILES_URL

)

);

5/5 (1 Đánh giá)

Các bài viết khác có thể hữu ích với bạn

Gửi Phản Hồi

0 Bình Luận

có thể bạn cần xem:

Tạo modal để thay thế cho vue-js-modal trong vuejs 2 [ 25/02/2023 12:39 ]
Tạo event click ngoài một element trong vue js [ 10/12/2022 02:09 ]
Dùng datetime picker plugin jquery trong vuejs [ 04/11/2022 02:41 ]
Cách tạo form multi field row dùng vue js [ 16/10/2022 03:47 ]
Làm option settings wordpress bằng vue js [ 15/10/2022 09:39 ]
Import file excel tới data dùng thư viện php excel và vue js [ 01/10/2022 07:45 ]
Live search trong array với vue js [ 19/09/2022 03:44 ]
Phát hiện detect sự kiện out click cho một element trong vue js [ 19/09/2022 01:14 ]
Sử dụng filter trong array để làm chức năng tìm kiếm cho vue js [ 09/09/2022 07:20 ]
Vue js trong một bài viết [ 10/08/2022 08:21 ]

Thực hiện ajax trong vòng lặp trong vue js

có thể bạn cần xem:

Đăng ký nhận bài viết mới

Hướng dẫn thiết kế theme

Thiết kế theme wordpress phần 8

Thiết kế theme wordpress phần 7

Thiết kế theme wordpress phần 6

Thiết kế theme wordpress phần 5

Thiết kế theme wordpress-phần 4

Các functions thường dùng

Function xử lý upload to media wordpress

Function get ip address

Thay thế file_get_contents

Code tích hợp acf vào theme và plugin

Một số function thường dùng khi làm theme wordpress (some functions popular for work do theme worpdress)