Vue学习之axios的使用方法实例分析
本文实例讲述了Vue学习之axios的使用方法。分享给大家供大家参考，具体如下：
Axios 是一个用于实现网络数据请求的JavaScript库，可以用在网页和 node.js 中，用于创建 XMLHttpRequests，vue官方支持使用axios代替vue--resourse来实现网络数据请求。
使用前需要在你的项目中安装axios，例如通过npm安装库：
npm install --save axios
接着在项目中引入axios：
import axios from 'axios'
1、get请求
直接使用axios的全局变量来调用get方法，get中第一个参数传递url，第二个参数是相关配置，在其中可以传递params参数（参数以？形式加在url末尾），进行header的设置等。使用.then接收返回值，可以采用函数来处理返回结果res，其中res.data或者res.body是返回的数据。使用.catch捕获异常，并可以打印错误信息参数error。
axios.get('data/zodiac.json',{
params:{
id:"101"
},
header:{
token:"axios"
}
}).then(res =>{
this.msg=res.data;
}).catch(error =>{
console.log(error);
})
2、post请求
post方法调用、回掉、异常捕获的使用与get类似。不同的是其参数分为三个，第一个是url地址，第二个是要传递的数据，第三个是传输选项配置。与get方法不同，post专门使用第二个参数进行数据传递，而不像get中将数据设置在配置选项params中。
axPost(){
axios.post('./data/test.php', //url
{ //发送的数据
userId:'105'
},
{ //option选项
headers:{
token:"axPost"
}
}
).then(res =>{ //接收结果
this.msg=res.data;
}).catch(err=>{ //处理错误
this.msg=err;
})
}
3、HTTP请求
也可以直接使用http进行数据请求，直接进行url、method、data、headers、params等的设置，例如使用http发送post请求：
axios({
url:"http://localhost:63342/Web/Learning/Javascript/Vue/VueStart/data/zodiac.json",
method:"post",
data:{
userId:"106"
},
headers:{
token:"axHttp"
}
}).then(res=>{
this.msg=res.data;
})
4、拦截器
axios也提供了在网络请求发送前与数据返回时进行拦截的函数interceptors，以便进行相关处理。例如在发送前使用request.use拦截，进行你想要的执行的操作后再将config返回出去，在请求返回时使用response.use进行拦截，操作后再将结果返回：
axios.interceptors.request.use(config =>{
console.log("axois请求");
return config;
});
axios.interceptors.response.use(res =>{
console.log("axois回调");
return res;
})
希望本文所述对大家vue.js程序设计有所帮助。
- vue 使用axios 数据请求第三方插件的使用教程详解
- Vue二次封装axios为插件使用详解
- vue下axios拦截器token刷新机制的实例代码
- vue 对axios get pust put delete封装的实例代码
- Vue axios 将传递的json数据转为form data的例子
- Vue 设置axios请求格式为form-data的操作步骤
- 关于Vue中axios的封装实例详解
- vue中axios的二次封装实例讲解
- vue+axios实现post文件下载
- vue + axios get下载文件功能
- Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
- vue简单封装axios插件和接口的统一管理操作示例
相关文章
这篇文章主要介绍了vue中如何使用math.js问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了封装一下vue中的axios，本文通过示例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2020-02-02
vue作为前端主流的3大框架之一,目前在国内有着非常广泛的应用,下面这篇文章主要给大家介绍了关于Vue实战之项目开发时常见的几个错误汇总的相关资料,对大家学习或者使用vue具有一定的参考学习价值,需要的朋友可以参考下2023-03-03
下面小编就为大家分享一篇vue中改变选中当前项的显示隐藏或者状态的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了django使用channels2.x实现实时通讯，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-11-11
这篇文章主要介绍了Vuex中的Mutation使用详解,当我们想修改状态值,想传入的值进而进行修改时,你可以向 store.commit 传入额外的参数,即 mutation 的 载荷,需要的朋友可以参考下2023-11-11
公司最近有微信公众号的需求,那么微信登录授权和如何使用WX-JSSDk实现分享等等肯定是最头疼的问题,这篇文章主要给大家介绍了关于在vue2中使用weixin-js-sdk的详细步骤,需要的朋友可以参考下2024-07-07
Vue数组中出现__ob__:Observer无法取值问题的解决方法
__ob__: Observer这个属性其实是Vue监控变量产生的,下面这篇文章主要给大家介绍了关于Vue数组中出现__ob__: Observer无法取值问题的解决方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue中配置后端接口服务信息详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
这篇文章主要介绍了vue如何根据数值判断颜色问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
最新评论