本文详细讲解如何在 Vue 项目中集成 Axios 库进行异步 HTTP 请求。内容涵盖从基础安装、GET 与 POST 请求的具体实现，到结合 async/await 语法优化代码结构，以及通过 try-catch 处理错误响应。此外，文章还演示了如何将 API 调用封装为可复用模块，通过创建独立的 service 目录实现代码解耦与复用，提升应用的可维护性。
配置基础 HTTP 请求
首先，在终端中运行以下命令将 Axios 安装到项目依赖中：
install axiosnpm install axios随后，在 Vue 组件文件中引入 axios 模块。
//App.vie - importing axios
<script>
import axios from 'axios'
export default {
setup () {
}
}
</script>接着，利用 axios.get 方法向 Kanye REST API 的 URL 发起请求以获取随机语录。之后，可以使用 Promise 的 .then 方法等待并处理返回的响应数据。
//App.vue - sending our HTTP request
<script>
import axios from 'axios'
export default {
setup () {
axios.get('https://api.kanye.rest/').then(response => {
// handle response
})
}
}
</script>成功获取 API 响应后，首先分析其结构。将获取到的数据保存到一个名为 quote 的响应变量中。
//App.vue - storing the response
<script>
import axios from 'axios'
import { ref } from 'vue'
export default {
setup () {
axios.get('https://api.kanye.rest/').then(response => {
// handle response
quote.value = response
})
return {
quote
}
}
}
</script>最后，将该数据输出到模板中，并设置为斜体显示，同时用引号包裹。此外，还需要在界面中展示语录的来源信息。
//App.vue - template code
<template>
<div>
<i>"{{ quote }}"</i>
<p>- Kanye West</p>
</div>
</template>检查浏览器中的渲染效果。
我们可以看到随机返回的侃爷语录，以及包含请求状态码等额外信息的响应对象。
针对当前的小型应用，我们仅关注 data.quote 属性，因此需要在脚本中明确指定从 response 对象中提取的具体属性。
//App.vue - getting only our quote
axios.get('https://api.kanye.rest/').then(response => {
// handle response
quote.value = response.data.quote
})通过上述代码调整，即可获取到所需的内容数据：
Axios 结合 async/await 语法
在 Vue 应用中，可以将 Axios 与 async/await 异步模式结合使用。
在代码设置阶段，首先注释掉原有的 GET 请求代码，然后定义一个名为 loadQuote 的异步方法。在该方法内部，依然使用 axios.get 方法，但通过 async/await 语法等待请求完成，并将结果存储在一个名为 response 的常量中。
接着，设置 quote 变量的值。
//App.vue - async Axios
const loadQuote = async () => {
const response = await KanyeAPI.getQuote()
quote.value = response.data.quote
}其运行原理与前文代码完全一致，但此次采用了异步编程模式。
Axios 错误处理机制
在 async/await 模式下，可以通过 try 和 catch 块为 API 调用添加完善的错误处理逻辑：
//Error handling with async/await
try {
const response = await KanyeAPI.getQuote()
quote.value = response.data.quote
} catch (err) {
console.log(err)
}如果使用原始的 Promise 语法，可以在 API 调用链后追加 .catch 方法来捕获请求过程中发生的任何错误。
//Error handling with Promises
axios.get('https://api.kanye.rest/')
.then(response => {
// handle response
quote.value = response.data.quote
}).catch(err => {
console.log(err)
})发送 POST 请求
接下来演示如何发送 POST 请求。此处我们将使用 JSONPlaceholder 模拟 API 进行调用。
其官方文档提供了一个用于测试 POST 请求的 /posts 接口。
接下来需要创建一个按钮，当用户点击该按钮时触发 API 调用。在模板中定义一个名为 “Create Post” 的按钮，并绑定点击事件以调用名为 createPost 的方法。
<div>
<i>"{{ quote }}"</i>
<p>- Kanye West</p>
<p>
<button @click="createPost">Create Post</button>
</p>
</div>
</template>随后在代码逻辑中定义 createPost 方法，并将其从 setup 函数中返回。
该方法与前面的 GET 请求类似，只需调用 axios.post 并传入目标 URL（即 https://jsonplaceholder.typicode.com/posts ）即可。同时，将文档示例中的数据直接复制粘贴作为请求体。
//App.vue
const createPost = () => {
axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
})).then(response => {
console.log(response)
})
}点击按钮进行测试，可以看到控制台输出了大量信息，表明 POST 请求已成功完成。
编写可复用的 API 调用模块
在项目中创建一个 src/services 目录，用于集中管理所有的 API 调用逻辑。
该目录主要包含两种类型的文件：
- API.js：用于创建一个定义了 baseURL 的 Axios 实例，该实例将用于所有路由请求。
- *{具体功能}*API.js：更具体的文件，用于将 API 调用组织成可重用的模块。
这样做的好处是可以方便地在开发环境和生产服务器之间切换，只需修改少量代码即可。
创建 services/API.js 文件，并将 Axios 的 baseURL 默认设置为 Kanye REST API。
API.jsimport axios from 'axios'
export default(url='https://api.kanye.rest') => {
return axios.create({
baseURL: url,
})
}接下来创建一个 KanyeAPI.js 文件，并从 ./API 中导入 API 模块。在此文件中，我们将导出不同的 API 调用方法。
调用 API() 函数会返回一个 Axios 实例，可以在该实例上直接调用 .get 或 .post 方法。
//KanyeAPI.js
import API from './API'
export default {
getQuote() {
return API().get('/')
},
}随后在 App.vue 内部，让组件通过调用这个新创建的可复用 API 文件来执行请求，而不是在组件内部重复创建 Axios 实例。
//App.vue
const loadQuote = async () => {
try {
const response = await KanyeAPI.getQuote() // <--- THIS LINE
quote.value = response.data.quote
} catch (err) {
console.log(err)
}
}接下来，将 createPost 方法迁移到其专属的可复用模块中。
回到 KanyeAPI.js 文件，在默认导出中添加 createPost 方法，该方法将 POST 请求的数据作为参数传递给 HTTP 请求。
与 GET 请求类似，通过 API 获取 axios 实例，但此次需要覆盖默认的 URL 值，并传递 JSONPlaceholder 的 URL。随后即可像之前一样使用 Axios 进行 POST 操作。
//KanyeAPI.js
export default {
getQuote() {
return API().get('/')
},
createPost(data) {
return API('https://jsonplaceholder.typicode.com/').post('/posts', data)
}
}如此简单
回到 App.vue，可以像以下方式调用新的 post 方法。
//App.vue
const createPost = () => {
const response = await KanyeAPI.createPost(JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}))
console.log(response)
}现在点击按钮时，可以看到专用的 API 模块能够正常工作。
将 API 调用从 Vue 组件中移出并放置在独立文件中的好处在于，可以在整个程序的任何位置复用这些 API 调用。这有助于创建更具可重用性和可扩展性的代码结构。
最终代码
// App.vue
<template>
<div>
<i>"{{ quote }}"</i>
<p>- Kanye West</p>
<p>
<button @click="createPost">Create Post</button>
</p>
</div>
</template>
<script>
import axios from 'axios'
import { ref } from 'vue'
import KanyeAPI from './services/KanyeAPI'
export default {
setup () {
const quote = ref('')
const loadQuote = async () => {
try {
const response = await KanyeAPI.getQuote()
quote.value = response.data.quote
} catch (err) {
console.log(err)
}
}
loadQuote()
// axios.get('https://api.kanye.rest/')
// .then(response => {
// // handle response
// quote.value = response.data.quote
// }).catch(err => {
// console.log(err)
// })
const createPost = () => {
const response = await KanyeAPI.createPost(JSON.stringify({
title: 'foo',
body: 'bar',
userId: 1,
}))
console.log(response)
// axios.post('https://jsonplaceholder.typicode.com/posts', JSON.stringify({
// title: 'foo',
// body: 'bar',
// userId: 1,
// })).then(response => {
// console.log(response)
// })
}
return {
createPost,
quote
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
//API.js
import axios from 'axios'
export default(url='https://api.kanye.rest') => {
return axios.create({
baseURL: url,
})
}
//KanyeAPI.js
import API from './API'
export default {
getQuote() {
return API().get('/')
},
createPost(data) {
return API('https://jsonplaceholder.typicode.com/').post('/posts', data)
}
}以上就是如何在 Vue 中用 Axios 异步请求API的详细内容，更多关于Vue 用 Axios 异步请求API的资料请关注本站其它相关文章！