vue axio的使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>发送AJAX请求</title><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script><script>window.onload = function () {new Vue({el: '#app',data: {user: {name: 'xut',age: 29},uid: '',loginMsg: {}},methods: {getUserById() {axios.get(`https://api.github.com/users/${this.uid}`).then(resp => {this.loginMsg = resp.data;});},sendJSON() {axios({method: 'get',url: 'user.json',// data:{}}).then((res) => {console.log(res);}).catch((resp) => {console.log('请求失败' + resp.status, resp.statusText);})},sendGet() {axios.get('http://localhost:3000/info', {params: {name: 'song',age: '10',id: 1}}).then((res) => {console.log(res);}).catch((resp) => {console.log('请求失败' + resp.status, resp.statusText);})},sendPost() {axios({method: 'post',url: 'http://localhost:3000/info',data: {name: 'song',age: '10',id: 1}}).then((res) => {console.log(res);}).catch((resp) => {console.log('请求失败' + resp.status, resp.statusText);})// axios.post('http://localhost:3000/info',{//     name:'song',//     age:'10',//     id:1// }).then((res)=>{//     console.log(res);// }).catch((resp)=>{//     console.log('请求失败'+resp.status,resp.statusText);// })},sendPostFormData() {//  axios.post('http://localhost:3000/info','name=alice&age=20') //方式一axios.post('http://localhost:3000/info', this.user, { //transformRequest转化transformRequest: [function (data) {// 对 data 进行任意转换处理// {//     name:'alice',//     age:19// }// 把json数据转化成formDatavar params = '';for (var index in data) {params += index + '=' + data[index] + '&'}console.log(params)return params;}]}).then((res) => {console.log(res);}).catch((resp) => {console.log('请求失败' + resp.status, resp.statusText);})// 方式三：qs.stringify}}});}</script>
</head><body><div id="app"><button @click="sendJSON">发送AJAX请求</button><button @click="sendGet">GET方式发送AJAX请求</button><button @click="sendPost">POST方式发送AJAX请求</button><button @click="sendPostFormData">POST方式发送AJAX请求 -- FormData</button><hr><br>GitHub ID： <input type="text" v-model="uid"><button @click="getUserById">获取指定GitHub账户信息并显示</button><br>姓名：{{loginMsg.login}} <br>头像：<img :src="loginMsg.avatar_url" alt="" style="width:200px;"></div>
</body></html>

vue axio的使用相关推荐

vue中Axios网络请求之Vue知识点归纳(十)
本文描述 vue 中 Axios 简述 vue 中使用 Axios 发起 get 请求 vue 中使用 Axios 发起 post 请求 1 简述 Axios是一个基于Promise(ES6中用于处理 ...
Webpack 大法之 Code Splitting
今天,大家要学习的内容是 Webpack 大法中的 Code Splitting . Code Splitting 是什么以及为什么在以前,为了减少 HTTP 请求,通常地,我们都会把所有的代码都打 ...
Vue 面试题 (全)
vue用的什么web模板引擎? jade模板,后来由于商标原因改成了pug v-model的原理? 数据双向绑定的指令,同步控件输入值到data属性更新data绑定属性,更新控件的值. view层和 ...
vue+node前后端分离接口调用（初学者）
一.node编写接口 (设定你已使用Node+express搭建好了项目,可参照我的上一篇博客) 我们就在users.js下进行接口编写 router.get('/getUserInfo',funct ...
vue添加axios及页面的导航、搜索、分页
1.K15项目案例-登录功能步骤1: 添加axios库 npm install axios 步骤2: 在main.js导入 import axios from 'axios' //导入本地库中的 a ...
Javaweb后端开发必学(HTML、CSS、JS、Vue)
Javaweb HTML.CSS CSS引入方式 < span >标签 CSS选择器: 页面布局表格表单标签表单项 JavaScript JavaScript引入方式 JS语法变量 ...
vue 获取id元素_.vue组件中获取DOM元素问题
一.问题引入原项目把一块内容直接写在了模块中(浏览器显示的一整个页面),现在想把它提成一个单独组件,而且把其中使用document.getElementById('id')改为ref获取元素的形式. ...
撸一个基于VUE的WEB管理后台（一）
最近需要一个BS架构的管理后台,对工作过程中产生的调研资料进行登记.查询和导出.我们的调研资料都是人工收集,每年的产生量大概也就是万级,用户人数也不过百,从需求上来看并没有什么架构压力,正好适合我这样 ...
【Vue】学习笔记-数据交互
[Vue]学习笔记-数据交互概述安装axios 通过axios向后台获取数据数据交互的实现常见错误总结概述基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的.官方推荐使用A ...
Vue 基础学习 1.0
Vue基础网上整理的笔记链接第一个Vue程序 123 <!DOCTYPE html> <html lang="en"><head><m ...

vue axio的使用

vue axio的使用相关推荐

最新文章

热门文章