11-Vue之网络应用axios使用_11-vue axios-优快云博客

1. 使用格式

get请求：axios.get（地址?key=value&key2=value2）.then(function(response)},function(err){}）
post请求：axios.post（地址,{key1:value1,key2:value2}）.then(function(response){}，function(err){})

2. 使用实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 导入axios库 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <input type="button" value="get请求" id="get">
    <input type="button" value="post请求" id="post">
    <script>
        /*
        接口1：随机笑话
        请求地址：https://autumnfish.cn/api/joke/list
        请求方法：get
        请求参数：num（笑话条数，数字）
        响应内容：随机笑话
        */
        document.querySelector('#get').onclick=function(){
            axios.get('https://autumnfish.cn/api/joke/list?num=5')
            // 错误的url 走err
            // axios.get('https://autumnfish.cn/api/joke/list11?num=5')
            .then(
                function(response){                  
                    console(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){
                    alert(response.data);
                },
                function(err){
                    console.log(err);
                }
            )
        }
    </script>
    
</body>
</html>