来个大白话Vue的axios讲解

axios是Vue用来实现异步通信的,从Vue.js 2.0 版本开始推荐使用 axios 来完成 ajax 请求。
axios 其实是一个网络请求库(内部封装ajax)
Github开源地址: https://github.com/axios/axios
常用于结合网络数据开发应用,如接受外部api开发应用等。
先看一下格式:
来个大白话Vue的axios讲解_第1张图片
学过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>

结果:
来个大白话Vue的axios讲解_第2张图片

2.使用axios+Vue

在vue中使用axios
首先需要注意几点:
来个大白话Vue的axios讲解_第3张图片
下面是代码,注意看注解

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

结果:
来个大白话Vue的axios讲解_第4张图片

你可能感兴趣的:(前端,Vue,vue,ajax)