vue-axios使用,axios是异步请求吗
Axios是Javascript中最流行的HTTP库之一，我们可以用它来调用Vue程序中的API。本文用Vue 3和Axios写了一个坎耶语录的小应用。我们可以用这个小应用学习英语，同时也可以从Kanye的话中得到一些启发。除此之外，我们还可以学习使用Vue异步请求API，这样就可以多做一件事了。为什么不呢？
目录
设置基本HTTP请求
带异步/等待的Axios
Axios的错误处理
发送发布请求
用Axios编写可重用的API调用
最终代码
设置基本 HTTP 请求
首先，在终端中执行以下命令，将Axios安装到项目中：
installaxiosnpminstallaxios
然后，像这样在Vue组件中导入axios。
//App.vie-importingaxios
脚本
“axios”中的重要信息
导出默认值{
setup(){
}
}
/脚本
接下来使用axios.get通过Kanye REST API的URL获取随机报价。之后，您可以使用Promise.then来等待请求返回响应。
//app . vue-sendingourhttp request
脚本
“axios”中的重要信息
导出默认值{
setup(){
axios . get( https://API . kanye . rest/)。然后(response={
//handleresponse
})
}
}
/脚本
现在，您可以从API获得响应。我们先来看看它的含义。将其保存为名为quote的引用。
//App.vue-storingtheresponse
脚本
“axios”中的重要信息
从“vue”导入{ ref }
导出默认值{
setup(){
axios . get( https://API . kanye . rest/)。然后(response={
//handleresponse
报价.价值=回应
})
返回{
引用
}
}
}
/脚本
最后，输出到模板并以斜体显示，用引号括起来。此外，您需要将报价来源添加到此报价中。
//app . vue-模板代码
模板
差异
我“{ quote } }”/I
p-坎耶韦斯特/p
/div
/模板
在浏览器中检查内容。
我们可以看到随机返回的Kanye的报价，以及一些附加信息，比如请求的响应代码等。
对于我们的小应用程序，我们只对这个data.quote值感兴趣，所以我们需要在脚本中指定响应访问的属性。
//App.vue-gettingonlyourquote
axios . get( https://API . kanye . rest/)。然后(response={
//handleresponse
报价.值=响应.数据.报价
})
你可以通过上面的代码得到想要的内容：
Axios 配合 async/await
Axios和异步/等待模式可以在Vue程序中结合使用。
在安装过程中，首先注释掉当前的GET代码，然后创建一个名为loadQuote的异步方法。在内部，您可以使用相同的axios.get方法，但是我们希望等待它完成async，然后将结果保存在一个名为response的常量中。
然后设置报价的值。
//App.vue-asyncAxios
constloadQuote=async()={
const response=awaitkanyeapi . getquote()
报价.值=响应.数据.报价
}
它的工作方式与前面的代码完全一样，但是这次它使用异步模式。
Axios 的错误处理
在async-await模式下，可以通过try和catch为API调用添加错误处理：
//errorhandlingwithsync/await
尝试{
const response=awaitkanyeapi . getquote()
报价.值=响应.数据.报价
}catch(err){
console.log(错误)
}
如果使用原来的promises语法，可以添加。在API调用后捕捉请求中的任何错误。
//errorhandlingwithworks
axios . get( https://API . kanye . rest/)。然后(response={
//handleresponse
报价.值=响应.数据.报价
}).catch(错误={
console.log(错误)
})
发送POST请求
让我们来看看如何发送帖子请求。这里我们使用JSONPlaceholder模拟API调用。
他们的文档提供了一个post接口来测试post请求。
接下来，我们需要创建一个按钮，单击它将触发我们的API调用。在模板中创建一个名为“createPost”的按钮，点击后调用名为Create Post的方法。
差异
我“{ quote } }”/I
p-坎耶韦斯特/p
p
按钮@click=createPost 创建帖子/按钮
/p
/div
/模板
下面的代码创建createPost方法，然后从setup返回。
这个方法，类似于前面的得到请求，只需要调用axios.post并传入网址（即https://jsonplaceholder.typicode.com/posts)就可以复制粘贴文档中的数据了。
//App.vue
constcreatePost=()={
axios。帖子( https://jsonplaceholder。typicode。com/posts)、JSON.stringify({
标题：“foo”，
正文："酒吧",
userId:1，
})).然后(响应={
console.log(响应)
})
}
单击按钮试一下，可以看到控制台输出了大量信息，告诉我们邮政请求已成功完成。
用 Axios 编写可复用的 API 调用
在项目中通过创建一个src/服务目录，用它来组织所有美国石油学会(美国石油协会)调用。
目录中包含2种类型的文件：
API.js:用来创建一个带有定义的基础地址的爱可信实例，这个实例会用于所有的路由
* {特定功能}*API.js:更具体的文件，可用于将美国石油学会(美国石油协会)调用组织成可重用的模块
这样做的好处是可以方便的在开发和生产服务器之间进行切换，只需修改一小段代码就行了。
创建服务/API.js文件，并将Axios baseURL设置为默认为Kanye REST API。
来自" axios "的API.jsimportaxiosfrom
导出默认值(URL= https://API。坎耶。rest )={
returnaxios.create({
baseURL:url，
})
}
接下来创建一个KanyeAPI.js文件并从2008/API中导入API。在这里我们要导出不同的应用程序接口调用。
调用API()会给得到一个爱可信实例，可以在其中调用。得到或。张贴。
//KanyeAPI.js
"导入来源"。/API
导出默认值{
getQuote(){
returnAPI().get(/)
},
}
然后在App.vue内部，让我们的组件通过可复用的应用程序接口调用来使用这个新文件，而不是自己再去创建Axios。
//App.vue
constloadQuote=async()={
尝试{
const response=awaitkanyeapi。getquote()//-此行
报价。值=响应。数据。报价
}catch(err){
console.log(错误)
}
}
下面把创建帖子移到其自己的可重用方法中。
回到KanyeAPI.js在导出默认设置中添加创建帖子，这会将邮政请求的数据作为参数传递给我们的超文本传送协议请求。
与得到请求类似，通过应用程序接口获取爱可信实例，但这次需要覆盖默认统一资源定位器值并传递JSONplaceholder url。然后就可以像过去一样屌用请求了。
//KanyeAPI.js
导出默认值{
getQuote(){
returnAPI().get(/)
},
创建帖子(数据){
返回pi( https://jsonplaceholder。typicode。com/).帖子(/帖子，数据)
}
}
如此简单
回到App.vue，可以像这样调用新的邮政方法。
//App.vue
constcreatePost=()={
const response=awaitkanyeapi。创建帖子(JSON。stringify({
标题：“foo”，
正文："酒吧",
userId:1，
}))
console.log(响应)
}
现在单击按钮时，可以看到专用的应用程序接口能够正常工作。
把应用程序接口调用移出这些某视频剪辑软件组件并放在它自己的文件的好处在于，可以在整个程序中的任何位置使用这些应用程序接口调用。这样可以创建更多可重用和可伸缩的代码。
最终代码
//App.vue
模板
差异
我" { quote } }"/I
p-坎耶韦斯特/p
p
按钮@click=createPost 创建帖子/按钮
/p
/div
/模板
脚本
" axios "中的重要信息
从“vue”导入{ ref }
importKanyeAPIfrom ./services/KanyeAPI
导出默认值{
setup(){
constquote=ref( )
constloadQuote=async()={
尝试{
const response=awaitkanyeapi。getquote()
报价。值=响应。数据。报价
}catch(err){
console.log(错误)
}
}
loadQuote()
//axios。获取( https://API。坎耶。rest/)
//.然后(响应={
////handleresponse
//引用。价值=响应。数据。引用
//}).接住(错误={
//console.log(错误)
//})
constcreatePost=()={
const response=awaitkanyeapi。创建帖子(JSON。stringify({
标题：“foo”，
正文："酒吧",
userId:1，
}))
console.log(响应)
//axios。帖子( https://jsonplaceholder。typicode。com/posts)、JSON.stringify({
//标题： foo ，
//body:bar ，
//userId:1
//})).然后(响应={
//console.log(响应)
//})
}
返回{
创建帖子，
引用
}
}
}
/脚本
风格
#app{
字体系列：Avenir、Helvetica、阿里亚、无衬线；
-WebKit-字体-平滑：抗锯齿；
-moz-osx-font-smoothing:灰度；
文本对齐：居中；
颜色：# 2c3e50
边距-顶部：60px
}
/风格
//API.js
" axios "中的重要信息
导出默认值(URL= https://API。坎耶。rest )={
returnaxios.create({
baseURL:url，
})
}
//KanyeAPI.js
"导入来源"。/API
导出默认值{
getQuote(){
returnAPI().get(/)
},
创建帖子(数据){
返回pi( https://jsonplaceholder。typicode。com/).帖子(/帖子，数据)
}
}
以上就是如何在某视频剪辑软件中用爱可信异步请求应用程序接口的详细内容，更多关于某视频剪辑软件用爱可信异步请求应用程序接口的资料请关注我们其它相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。