(精华2020年5月4日更新) vue教程篇 axio的使用

地址为本地，需要请求数据科研自己搭建后端api，或者用mock

<!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>

(精华2020年5月4日更新) vue教程篇 axio的使用相关推荐

(精华2020年5月4日更新) vue教程篇 v-for的使用
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
(精华2020年5月17日更新) vue实战篇手写vue底层源码
MYvue.js 主要作用监听属性变化 class MYvue {constructor(options) {this.$options = options;this.$data = options. ...
(精华2020年6月9日更新)Angular实战篇 axio的封装
首先先建个axio服务 ng g service 文件目录 ts文件 import { Injectable } from '@angular/core'; import axios from 'ax ...
(精华2020年6月2日更新) TypeScript的数据类型
第一种:布尔类型(boolean) var flag:boolean=true;flag = false; //正确 flag = '你好typescript'; //错误第二种:数字类型(numb ...
2020年阴阳师服务器维护,2020阴阳师2月19日更新官方公告及内容汇总
小编今天给各位玩家朋友们带来的是2020阴阳师2月19日更新官方公告及内容汇总,阴阳师今天进行了版本更新,大家期待已久的超鬼王活动也是正式上线了,那么还有哪些精彩的活动?哪些新的内容呢?相信不少的玩家 ...
重装战姬服务器维护,重装战姬2020年10月1日更新维护公告_重装战姬2020年10月1日更新了什么_玩游戏网...
在重装战姬手游中2020年10月1日更新了什么呢?本次更新的的情况内容又是什么呢?不清楚的小伙伴们,接下来就让我们一起来看一下吧! 亲爱的各位团长: 我们将于以下时间,对全平台服务器实施维护,进行游戏 ...
csgo跑图文件_一键跑图！极为方便的CSGO跑图工具（附2020年5月28日更新）
原标题:一键跑图!极为方便的CSGO跑图工具(附2020年5月28日更新) 太长不看版 2020年5月28日更新日志极为方便的CSGO跑图工具,分享给大家 2020年5月28日CSGO更新日志翻译: ...
csgo 放置机器人_一键跑图！极为方便的CSGO跑图工具（附2020年5月28日更新）
太长不看版2020年5月28日更新日志极为方便的CSGO跑图工具,分享给大家 2020年5月28日CSGO更新日志翻译:MeDusA 注:关于国服客户端更新的问题,目前已反馈V社,将尽快修复.国服 ...
利用rfcomm实现树莓派与手机通信_树莓派资源整理汇总(2020年2月18日更新)
本文收集了树莓派使用过程中经常需要用到的资源,主要包括树莓派系统镜像.树莓派硬件介绍.树莓派GPIO引脚编号.树莓派电路原理图下载.树莓派应用.树莓派工具等等,非常值得收藏. 一.快速上手树莓派快速 ...
紫禁繁花服务器维护一般多久,紫禁繁花手游2020年12月30日更新公告
国力庆典活动即将开启!上线即可领取新服饰哦!那么本次版本更新了哪些有趣的内容呢?下面就让我们一起来看一下吧~! 紫禁繁花手游2020年12月30日更新公告国力庆典活动参与[国力庆典]活动有机会获 ...

(精华2020年5月4日更新) vue教程篇 axio的使用

(精华2020年5月4日更新) vue教程篇 axio的使用相关推荐

最新文章

热门文章