Fetch 基本操作 Get Post Delete Put
//删除请求 async function DeleteModel(model: Customer) { let url = `http://localhost:57679/api/Customers/${model.id}` await fetch(url, { method: 'delete' }) .then((response) => { if (!response.ok) { console.log(response) throw new Error() } }) .then(() => { tableData.value.splice( tableData.value.findIndex((m) => m.id == model.id), 1 ) ElMessage.info('删除成功!') }) .catch((err) => { console.log('catch') console.log(err) ElMessage.error(`删除失败${err.message}`) }) }
//批量删除 async function BatchDelete() { let rows = multipleTableRef.value?.getSelectionRows() as Array<Customer> if (rows.length == 0) { ElMessage('请选择需要删除的记录') return } isSaved = false const ids = rows.map((m) => m.id).join(',') const url = `http://localhost:57679/api/Customers/BatchDelete/${ids}` await fetch(url, { method: 'Delete', headers: { 'Content-Type': 'application/json' } }) .then((res) => { if (!res.ok) { return res.text() } isSaved = true return res.json() }) .then((data) => { if (isSaved) { rows.forEach((row) => { tableData.value.splice( tableData.value.findIndex((m) => m.id == row.id), 1 ) }) ElMessage.error(`已成功删除 ${data} 条记录`) } else { ElMessage.error(data) } }) .catch((err) => { ElMessage.error(err.message) }) return false }
async function Add() { let isOk = false const url = `http://localhost:57679/api/Customers` await fetch(url, { method: 'Post', body: JSON.stringify(ruleForm), headers: { 'Content-Type': 'application/json' } }) .then((res) => { isOk = res.ok if (!res.ok) { return res.text() } return res.json() }) .then((data) => { if (isOk) { resultCustomer = data } else { ElMessage.error(data) } }) .catch((err) => { ElMessage.error(err.message) }) return isOk } async function Edit() { let isOk = false const url = `http://localhost:57679/api/Customers` await fetch(url, { method: 'Put', body: JSON.stringify(ruleForm), headers: { 'Content-Type': 'application/json' } }) .then(async (res) => { isOk = res.ok if (!res.ok) { return res.text() } return res.json() }) .then((data) => { if (isOk) { resultCustomer = data } else { ElMessage.error(data) } }) .catch((err) => { ElMessage.error(err.message) }) return isOk }
async function LoadData() { tableData.value.splice(0, tableData.value.length) let url = `http://localhost:57679/api/Customers/${paging.pageSize}/${paging.currentPage}` try { await fetch(url, { method: 'post', body: JSON.stringify(formInline), headers: { 'Content-Type': ' application/json-patch+json' } }) .then((response) => { if (response.ok) { return response.json() } if (response.status == 404) { paging.total=0 throw new Error('没有找到任何数据') } throw new Error(`请求失败:${response.status},${response.statusText}`) }) .then((data) => { console.log(data) paging.total = data.total tableData.value = data.data }) .catch((err) => { console.log(err) ElMessage.error(err.message) }) } catch (error) { console.error(error) } }