axios用法

axios的基本特性

axios是一个基于Promise用于浏览器和node.js的HTTP客户端 它具有以下特性
  • 支持浏览器和Node.js
  • 支持Promise
  • 能拦截请求和相应
  • 自动转换JSON数据
axios.get('/url')
	.then(ret=>{
	//data属性名称是固定的,用于获取后台相应的数据
	console.log(ret.data)
})

axios的常用API

  • get:查询数据
  • post:添加数据
  • put:修改数据
  • delete:删除数据

GET传递参数

  • 通过URL传递参数
  • 通过Parms选项传递参数

通过url传递参数

axios.get('/url?id=123')
	.then(ret=>{
	console.log(ret.data)
});

通过Parms传递参数

axios.get('/url',{
	parms:{
	id:123
}
}).then((ret)=>{
	console.log(ret)
})

POST传递参数

通过选项传递参数(默认传递的是JSON格式的数据)

axios.post('/url',{
	name:'李四',
	pwd:123
}).then((ret)=>{
	console.log(ret)
});

axios的相应结果

  • data:实际相应回来的数据
  • headers:响应头信息
  • status:响应状态码
  • statusText:响应状态信息

axios的全局配置

axios.defaults.timeout=3000; //超时时间
axios.defaults.baseURL='http://localhost:3000/app'; //默认地址
axios.defaults.headers['mytoken']='请求头';   //设置请求头
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue中使用axios进行数据请求的用法如下: 1. 首先,在项目的main.js文件中导入axios并将其挂载到Vue的原型上,以便在整个项目中都可以使用axios进行请求。例如:import axios from 'axios' Vue.prototype.$axios = axios。 2. 在需要发送请求的组件中,可以通过this.$axios来调用axios的各种方法进行数据请求。 - 使用get方法发送get请求,可以通过传入请求的url和可选的参数进行请求。例如:this.$axios.get(url, params)。 - 使用post方法发送post请求,可以通过传入请求的url和需要发送的数据进行请求。例如:this.$axios.post(url, data)。 - 使用put方法发送put请求,可以通过传入请求的url和需要修改的数据进行请求。例如:this.$axios.put(url, data)。 - 使用delete方法发送delete请求,可以通过传入请求的url和可选的参数进行请求。例如:this.$axios.delete(url, params)。 3. 可以通过axios的拦截器来对请求或响应进行处理。 - 使用axios的请求拦截器,可以在请求发送前对请求的配置进行修改。例如:axios.interceptors.request.use(config => return config)。 - 使用axios的响应拦截器,可以对服务器返回的数据进行处理并返回处理后的数据。例如:axios.interceptors.response.use(res => return res.data)。 4. 创建axios实例可以通过axios.create({})来创建,可以传入一些参数进行配置,如baseUrl、method和timeout等。例如:axios.create({})。 5. 可以通过axios.defaults来设置全局的默认配置,例如设置baseUrl、method和timeout等。例如:axios.defaults.xxx。 6. 使用axios取消请求,可以通过创建取消请求的错误对象和取消请求的token对象来实现。例如:axios.CancelToken()和axios.isCancel()。 7. 使用axios.all可以批量执行多个异步任务,传入多个promise对象进行执行。例如:axios.all(promise)。 综上所述,以上是Vue中使用axios进行数据请求的一些常用用法。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vue-axios使用](https://blog.csdn.net/m0_57391092/article/details/126405908)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [vue axios用法教程详解](https://download.csdn.net/download/weixin_38513669/12776235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值