axios基础

什么是axios

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

axios的特性

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

axiso的安装

使用 npm:

 npm install axios

使用 bower:

 bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

案例

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

<input type="button" value="get请求" class="get">
    <input type="button" value="post请求" class="post">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <a href="https://autumnfish.cn/api/joke/list"></a>
    <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")
            // axios.get("https://autumnfish.cn/api/joke/list12424?num=6")//错误的地址回调到404
            .then(function(response){
     
                console.log(response);
            },function(err){
     
                console.log(err);
            })
        },

/* 接口2：用户注册
       
        // 请求方法：post
        // 请求参数：username(用户名，字符串)
        // 响应内容：注册成功或失败*/
        document.querySelector(".post").onclick = function(){
     
            axios.post("",
            
            .then(function(response){
     
                console.log(response);
            },function(err){
     
                console.log(err);
            })
        }