vue中使用axios发送请求及响应结果

2024-01-21 07:07| 来源: 网络整理| 查看: 265

axios的基本语法

案例1: 一个简单的get发送请求案例

axios({ methods: 'GET', url: 'https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/user' }).then((ret) => { console.log(ret.data.data); })

发送get请求以及传参

get传参用params :{ }

post传参数用data :{ }

案例1: get传参传递一个参数 id等于1

案例2:

async btn2 (){ console.log(2); axios.get(`${'https://接口根地址'}/user`, { params: { id: 12311111, name: '爬楼梯的前端小白' } }).then(function(ret) { console.log(ret.data.data); console.log(ret.config.params); }) }

点击按钮之后显示：

在.html文件中如下

要引入axios

区别一个加了点击事件一个直接打印如果在vue中想直接打印就复制下面方法放在export外面放里面会报错

axios.get(`${'https://接口根地址'}/user`, { params: { id: 123, name: 'yanyan' } }).then(function(ret) { console.log(ret.data.data); console.log(ret.config.params); })

发送 post请求以及传参

案例1: 点击发送请求按钮控制台显示接收的参数

里面的data 是传递进去的参数

发起post请求 document.querySelector('#btnPost').addEventListener('click', function() { axios({ method: 'POST', url: 'https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/api', data: { name: '小明同学', age: 20 } }).then(function(ret) { console.log(ret.data); //打印接口里的参数 console.log(ret.config.data); //自己传递进去的参数 config. }) })

案例2:

在.html文件中

在这里 post通过URLSearchParams()；传递参数不过data也能传递参数而且相对比这个简单

var params = new URLSearchParams(); params.append('uname', 'zhangsan'); params.append('pwd', '111'); axios.post(`${'https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api'}/uname`, params).then(function(ret) { console.log(ret.data.data); console.log(ret.config.data); })

axios的响应结果的属性 data：实际响应回来的数据headers：响应头信息status：响应状态码statusText：响应状态信息 // axios 响应结果与全局配置 axios.get('https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/user').then(function(ret) { console.log(ret); })

axios拦截器

axios.interceptors.request.use(function(config) { console.log(config.url) config.headers.mytoken = 'nihao'; //不能是中文不然报错 return config; }, function(err) { console.log(err); }) axios.get('https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/user').then(function(data) { console.log(data); })

axios响应式拦截器

在获取数据之前对数据做一些加工处理

axios.interceptors.response.use(function(res) { //这里是要返回的数据 var data = res.data return data; }, function(err) { console.log(err); }) axios.get('https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/user').then(function(data) { console.log(data.data); })

返回的接口里的内容

【本文地址】

公司简介

联系我们