来个大白话Vue的axios讲解

axios是Vue用来实现异步通信的，从Vue.js 2.0 版本开始推荐使用 axios 来完成 ajax 请求。
axios 其实是一个网络请求库（内部封装ajax）
Github开源地址： https://github.com/axios/axios
常用于结合网络数据开发应用，如接受外部api开发应用等。
先看一下格式：
在这里插入图片描述
学过jquery的话会发现axios的实现和jqurey的ajax很像，甚至感觉比后者还要简单一点，先解释一下这个格式：

1.使用axios

第一句是引入axios，

第二句是使用get方式获取数据，括号中的是get参数，then中的第一个function是成功通信的回调函数（就是通信成功后执行的函数），第二个function是通信失败时的回调函数（就是通信失败后执行的函数）
ajax通信只有两个结果，要么成功要么失败

第三句是使用post方式获取数据，传递参数使用的是 { 键：值 } 对象的形式，其他的都与get一样

来看一个例子：
（为了针对axios，所以并没有使用vue的其他功能，解释在注解）

    <!-- 官网提供的 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=6") //?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 () {
			 //{username:"小笨猪"}是参数，代表要接入的用户 *post方法传递的参数必须是对象形式
            axios.post("https://autumnfish.cn/api/user/reg",{username:"小笨猪"})
            .then(function(response){
                console.log(response);
            },function (err) {
                console.log(err);
              })
          }

    </script>
</body>

结果：
在这里插入图片描述

2.使用axios+Vue

在vue中使用axios
首先需要注意几点：
在这里插入图片描述
下面是代码，注意看注解

<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);
					//将外部this占存为that
                    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>

结果：
在这里插入图片描述

Incimo

原创文章 31 获赞 30 访问量 7099

关注私信