一、axiosdelete简介
在开发中，我们经常需要与服务器交互数据。而axios是一种基于Promise的HTTP客户端，可以用于浏览器和Node.js平台。它的特点是从浏览器中创建XMLHttpRequests。
使用axiosdelete可以异步地删除数据并返回一个Promise对象，Promise对象的状态为resolved，表示删除请求成功，状态为rejected，表示请求失败。删除请求成功后，我们可以对返回的结果进行处理，例如跳转到其他页面、更新相关数据等。
二、axiosdelete实现方式
使用axiosdelete与使用axios.get和axios.post有些许不同，因为我们需要传递一个参数来表示需要删除的数据。下面是一个关于axiosdelete删除数据的基本例子：
axios.delete('/api/xxx/1', {
data: {
a: 1,
b: 2
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
上面的代码中，我们使用axios.delete方法提交删除请求，URL为/api/xxx/1，表示需要删除的资源的路径，data参数传递一个对象，该对象包含要删除的数据。如果请求成功，我们可以在.then()中对返回的结果进行处理，如果请求失败，我们可以在.catch()中处理错误信息。
三、axiosdelete示例
1、删除数据
假如我们有一个web应用，需要实现一个删除功能，删除指定ID的用户数据。我们先通过axios.get请求获取到所有用户信息，然后在页面上展示这些信息，每个用户数据会附带一个删除按钮。用户点击删除按钮时，将会发送一个axios.delete请求来删除这个用户。
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<h1>用户列表</h1>
<table>
<tbody id="user-list">
</tbody>
</table>
<script>
axios.get('/api/users').then(function (response) {
var userList = document.getElementById('user-list');
response.data.forEach(function (user) {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var delBtn = document.createElement('button');
delBtn.innerText = '删除';
delBtn.onclick = function () {
axios.delete('/api/users/' + user.id).then(function (response) {
console.log(response);
tr.parentNode.removeChild(tr);
}).catch(function (error) {
console.log(error);
});
};
td1.innerText = user.id;
td2.innerText = user.name;
td3.appendChild(delBtn);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
userList.appendChild(tr);
});
}).catch(function (error) {
console.log(error);
});
</script>
</body>
</html>
上面的代码中，我们通过axios.get请求获取到所有用户信息，并在页面上展示这些信息。每个用户数据中都含有一个删除按钮，点击该按钮时，将发送一个axios.delete请求，实现删除操作。如果删除请求成功，我们将会从页面上删除该用户数据。
2、更新数据
在有些情况下，我们需要更新已存在的数据。假设我们的web应用需要更新一个用户的姓名。我们将会发送一个带有新姓名的axios.put请求来更新该用户的信息。
<html>
<head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<label>用户ID: </label><input type="text" id="user-id"><br>
<label>新姓名: </label><input type="text" id="user-name"><br>
<button id="update-btn">更新</button>
<script>
var updateBtn = document.getElementById('update-btn');
updateBtn.onclick = function () {
var userId = document.getElementById('user-id').value;
var newName = document.getElementById('user-name').value;
axios.put('/api/users/' + userId, {
name: newName
}).then(function (response) {
console.log(response);
}).catch(function (error) {
console.log(error);
});
};
</script>
</body>
</html>
上面的代码中，我们展示了一个表单，供用户输入用户的ID和新的姓名。通过点击更新按钮，将会发送一个axios.put请求来更新该用户信息。请求成功后，我们可以在.then()中处理返回的数据，例如给出一些提示。
3、插件/库
有些情况下，我们需要提交复杂的请求，例如带有参数、请求头、授权等的请求。在这种情况下，我们可以使用一些插件或库来简化请求的编写。例如，我们可以使用axios-auth-refresh来在请求授权过期时刷新授权令牌:
var refreshAuthLogic = failedRequest => axios.post('/api/token/refresh')
.then(tokenRefreshResponse => {
failedRequest.response.config.headers['Authorization'] = 'Bearer ' + tokenRefreshResponse.data.token;
return Promise.resolve();
});
axiosAuthRefresh.interceptors.response.use(undefined, function (err) {
const originalRequest = err.config;
if (err.response.status === 401 && !originalRequest._retry) {
originalRequest._retry = true;
return axiosAuthRefresh.post('/api/token/refresh').then(res => {
if (res.status === 407) {
window.location.replace('/login');
return Promise.reject(err);
}
if (res.status === 200) {
store.dispatch(SET_ACCESS_TOKEN, res.data.access_token);
originalRequest.headers['Authorization'] = 'Bearer ' + res.data.access_token;
return axios(originalRequest);
}
}).catch(error => {
window.location.replace('/login');
return Promise.reject(error);
});
}
// 返回接口返回的错误信息
return Promise.reject(err);
});
axios.interceptors.request.use(config => {
const accessToken = ...
if (accessToken) {
config.headers.Authorization = `Bearer ${accessToken}`;
}
return config;
});
上面的代码中，我们使用了axios-auth-refresh库来刷新认证令牌。在每个请求发送之前，我们都会对请求的令牌进行检查并尝试刷新。如果刷新成功，我们将会使用新的令牌来发送之前的请求。如果刷新令牌失败，我们将会跳转至登录页面。使用这种方案，我们可以轻松地管理授权令牌，防止过期等情况的出现。
