axios的基本使用

Axios是一个基于promise的http数据库，可以在浏览器和node.js中使用。

特征

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持承诺API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF

axios常用的配置字段

• url:请求路径，string类型
• method:请求方法，string类型
• header：自定义请求头
• params:于请求一起发送的url参数(一般只用于get请求) 一般是对象类型
• data：作为请求主体被发送数据（一般用于post请求） 一般是对象类型
• method:创建请求时使用的方法
• proxy：代理服务器主机名称和端口 使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

vue中使用axios

在js文件中引入axios <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 在js文件中引入vue <script src="./js/vue@2.6.14.js"></script>

基本API

• 执行get请求

          //将参数直接写在url中
           axios.get("https://autumnfish.cn/api/joke/list?num=6")
           .then(function(response){
               console.log(response);
           },function(err){
               console.log(err);
           })

• 执行post请求 注意执行post请求的入参，不需要写在params字段中

        axios.post("https://autumnfish.cn/api/user/reg",
            {username:"西蓝花"})
            .then(function(response){
                console.log(response);
            },function(err){
                console.log(err);
            })

• axios必须先导入才可以使用
• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应式内容，或错误信息

案例

• axios回调函数中的this以及无法改变，无法访问到data中数据
• 把this保存起来，回调函数中直接使用保存的this即可
• 和本地用的最大的区别就是改变数据来源

<script>
        /* 
        接口：随机获取一条笑话
        请求地址：https://autumnfish.cn/api/joke
        请求方法：get
        请求参数：无
        响应内容：随机笑话
        */
        var vm=new Vue({
           el:'#app',
           data:{  //服务器响应数据
               joke:"很好笑的笑话"
           },
           methods:{  //方法接口
               getJoke:function(){  //随机获取一条笑话
                //    console.log(this.joke);
                   var that=this;  //在外部传递一个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>