vue中使用axios发送请求及响应结果 |
您所在的位置:网站首页 › axios获取请求头信息 › vue中使用axios发送请求及响应结果 |
axios的基本语法
案例1: 一个简单的get发送请求案例 axios({ methods: 'GET', url: 'https://www.fastmock.site/mock/7aaea97de62ac6b0b1612b43c4868fc7/api/user' }).then((ret) => { console.log(ret.data.data); }) 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); })在获取数据之前对数据做一些加工处理 返回的接口里的内容 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |