在前端开发中，我们经常需要通过 HTTP 请求和服务器进行数据交互。而 axios 是一款流行的 HTTP 请求库，它可以帮助我们更方便地发送和处理 HTTP 请求。在 Vue.js 中，我们可以使用 axios 发送 HTTP 请求来获取数据并更新页面。
安装 axios
在使用 axios 之前，我们需要先安装它。可以通过 npm 命令来安装：
npm install axios发送 GET 请求
发送 GET 请求是最常见的 HTTP 请求方式之一。我们可以使用 axios.get() 方法来发送 GET 请求。例如，我们可以向服务器请求一份用户列表：
axios.get('/api/users') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) })
在上面的代码中，我们使用 axios.get() 方法向服务器发送了一个 GET 请求。请求的 URL 是 /api/users。在请求成功后，我们打印了响应数据 response.data。如果请求失败，我们打印了错误信息 error。
发送 POST 请求
发送 POST 请求通常用于向服务器提交数据。我们可以使用 axios.post() 方法来发送 POST 请求。例如，我们可以向服务器提交一份新的用户数据：
-- -------------------- ---- ------- ------------------------ - ----- ----- ----- ---- -- -- -------------- -- - -------------------------- -- ------------ -- - ------------------ --展开代码
在上面的代码中，我们使用 axios.post() 方法向服务器发送了一个 POST 请求。请求的 URL 是 /api/users，请求体是一个包含 name 和 age 属性的对象。在请求成功后，我们打印了响应数据 response.data。如果请求失败，我们打印了错误信息 error。
发送 PUT 请求
发送 PUT 请求通常用于更新服务器上的数据。我们可以使用 axios.put() 方法来发送 PUT 请求。例如，我们可以更新一份用户数据：
-- -------------------- ---- ------- ------------------------- - ----- ----- ----- ---- -- -- -------------- -- - -------------------------- -- ------------ -- - ------------------ --展开代码
在上面的代码中，我们使用 axios.put() 方法向服务器发送了一个 PUT 请求。请求的 URL 是 /api/users/1，请求体是一个包含 name 和 age 属性的对象。在请求成功后，我们打印了响应数据 response.data。如果请求失败，我们打印了错误信息 error。
发送 DELETE 请求
发送 DELETE 请求通常用于删除服务器上的数据。我们可以使用 axios.delete() 方法来发送 DELETE 请求。例如，我们可以删除一份用户数据：
axios.delete('/api/users/1') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) })
在上面的代码中，我们使用 axios.delete() 方法向服务器发送了一个 DELETE 请求。请求的 URL 是 /api/users/1。在请求成功后，我们打印了响应数据 response.data。如果请求失败，我们打印了错误信息 error。
拦截器
axios 还提供了拦截器（interceptor）功能，可以在发送请求或接收响应前对其进行拦截和处理。例如，我们可以在请求头中添加一个 Authorization 字段：
axios.interceptors.request.use(config => { config.headers.Authorization = 'Bearer ' + localStorage.getItem('token') return config })
在上面的代码中，我们使用 axios.interceptors.request.use() 方法来添加一个请求拦截器。拦截器会在发送请求前执行，我们在其中对请求头添加了一个 Authorization 字段，值为 localStorage 中的 token。在拦截器处理完后，需要返回 config 对象。
错误处理
在发送 HTTP 请求时，可能会出现一些错误，例如网络错误、服务器错误等。我们可以通过 catch() 方法来捕获这些错误并进行处理。例如，我们可以在请求失败时显示一个错误提示：
axios.get('/api/users') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) alert('请求失败，请稍后再试') })
在上面的代码中，我们使用 catch() 方法来捕获请求失败的错误。在错误处理函数中，我们打印了错误信息 error，并显示了一个错误提示。
总结
通过本文的介绍，我们了解了如何使用 axios 在 Vue.js 中发送 HTTP 请求。我们学习了如何发送 GET、POST、PUT 和 DELETE 请求，以及如何使用拦截器和错误处理。希望这篇文章对你有所帮助，能够让你更加轻松地处理 HTTP 请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65f3a2152b3ccec22fc143c9
