vue之axios基本使用

文章目录

1. axios 网络请求库
2. axios+vue

1. axios 网络请求库

在这里插入图片描述

<body>
<input type="button" value="get请求" class="get">
<input type="button" value="post请求" class="post">
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>/*接口1:随机笑话请求地址:https://autumnfish.cn/api/joke/list请求方法:get请求参数:num(笑话条数,数字)响应内容:随机笑话*/document.querySelector(".get").onclick = function () {axios.get("https://autumnfish.cn/api/joke/list?num=3")//测试错误触发事件// axios.get("https://autumnfish.cn/api/joke/list1234?num=6").then(function (response) {console.log(response);},function(err){console.log(err);})}/*接口2:用户注册请求地址:https://autumnfish.cn/api/user/reg请求方法:post请求参数:username(用户名,字符串)响应内容:注册成功或失败*/document.querySelector(".post").onclick = function () {axios.post("https://autumnfish.cn/api/user/reg",{username:"雲兮动人"}).then(function(response){console.log(response);},function (err) {console.log(err);})}</script>
</body>

get请求结果，获取到三条笑话结果
get请求，指定不存在的接口，返回错误信息
post请求，指定 username
再次注册时，发现已经存在同名，不能注册了
把post请求地址api改成不存在的，结果返回错误，跟get请求的回调函数一样返回错误的信息
在控制台的Network下查看是不是基于Ajax，点击get、post请求，查看

2. axios+vue

在这里插入图片描述

案例：获取笑话

<body>
<div id="app"><input type="button" value="获取笑话" @click="getJoke"><p> {{ joke }}</p>
</div>
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>/*接口:随机获取一条笑话请求地址:https://autumnfish.cn/api/joke请求方法:get请求参数:无响应内容:随机笑话*/var app = new Vue({el:"#app",data:{joke:"很好笑的笑话"},methods: {getJoke:function(){// console.log(this.joke);var that = this;axios.get("https://autumnfish.cn/api/joke").then(function(response){//console.log(response)console.log(response.data);// console.log(this.joke);that.joke = response.data;},function (err) {  })}},})
</script>
</body>