axios的應用

1) 原生Ajax 
        1. Http協議 （B/S架構）
            瀏覽器                    服務器

            http://120.78.164.247:8099/manager/user/findAllUser

            var user = {
                name:'terry',
                gender:'male'
            }

            序列化     對象-> 具備特殊格式字符串
                1) 表單格式 查詢字符串
                    key=val&key=val
                2) json
                    '{"name":"terry","gender":"male"}'
                3) 二進制格式 
                    文件上傳

            請求方(瀏覽器) 
                請求報文
                    請求行 
                        GET /manager/user/findAllUser
                    請求頭
                        HOST                     http://120.78.164.247:8099
                        Accept                text/html;application/json
                        Content-Type     application/x-www-form-urlencoded
                        ...
                        user agent         蘋果電腦火狐瀏覽器
                        user agent         蘋果手機safari瀏覽器
                    請求體
                        name=terry&gender=male
            響應方
                響應報文
                    響應行(狀態行)
                        200 OK
                    響應頭
                        Content-Type         application/json
                        Content-Length     199kb
                        ...
                    響應體
                        '[{},{}]'

            XMLHttpRequest
            1) 建立一個xhr對象
                let xhr = new XMLHttpRequest();
            2) 打開一個鏈接
                xhr.open(method,url);
            3) 設置請求頭信息
                xhr.setRequestHeader('Content-Type','application/json');
            4) 發送請求
                xhr.send(data);
                // data的類型取決於咱們設置的Content-Type,若是content-Type爲json,data必定要序列化爲json字符串。若是content-type爲x-www-form-urlencoded的時候，data必定序列化爲查詢字符串

            5) 監聽響應
                xhr.onreadystatechange = function(){
                    if(this.readyState == 4){
                        if(this.status == 200){

                        }
                    }
                }

                200     請求成功
                404     請求失敗，找不到請求資源
                500     請求失敗，後臺代碼異常
                403     請求失敗，權限被拒絕

        2. 請求類型
            同步請求
                在瀏覽器地址欄中輸入一個地址，點擊回車
                特色：形成頁面所有刷新。請求數據會直接顯示到瀏覽器頁面上
            異步請求 
                ajax發送一個請求
                特色：局部刷新頁面。請求數據沒法直接顯示到瀏覽器頁面上，而是要經過js獲取

            ids:[1,2,3]
            查詢字符串
            ids[]=1&ids[]=2&ids[]=3
            ids[0]=1&ids[1]=2&ids[2]=3     struts2
            ids=1&ids=2&ids=3                        springmvc

            options=[{title:'one',code:1},{title:'two',code:2}]

            options[0].title=one
            options[0].code=1
            options[1].title=two
            options[1].code=2

    2) jQuery ajax
        特色：
            ajax僅屬於jquery中一部分；
            回調函數機制；
            依賴XMLHttpRequest，因此只能運行在瀏覽器中
            自動將data數據轉換爲查詢字符串

        $.ajax({
            url:'',                 請求地址
            method:'get',     請求方式 get/post
            data:'',                 提交數據 post，若是data爲對象，該對象在發送到服務器以前會先被自動轉換爲查詢字符串（因爲contentType默認爲x-www-form-urlencoded）。能夠經過processData選項來阻止這樣的默認轉換行爲

            dataType:'',         指望接受的數據類型 
            async:true             異步
            contentType:'application/x-www-form-urlencoded'
                application/x-www-form-urlencoded
                    查詢字符串 key=val&k2=v2,若是value中有特殊字符，特殊字符使用十六進制表示，好比空格，中文
                multipart/form-data 
                    二進制
                text/plain
                    普通字符串
                =============
                application/json 。 post(),在發送post請求以前先會發送一個options請求。   
            processData:true,     

            beforeSend:function(){},         在調用send方法以前
            success:function(){},             成功
            error:function(){},                 失敗
            complete:function(){}             完成
        })

        1. 有以下數據，以json格式發送到服務器端
            var user = {
                name:'terry',
                gender:'male'
            }

            $.ajax({
                url:"",
                method:"post",
                data:JSON.stringify(user),
                contentType:'application/json?charset=UTF-8',
                processData:false
            })

        2. 有以下數據，以查詢字符串格式發送到服務器端
            var user = {
                name:'terry',
                gender:'male'
            }
            $.ajax({
                url:"",
                method:"post",
                data:user,
            })

            $.ajaxSetup({})
            $.ajax({})
            $.get()
            $.getJSON()
            $.post()

            GET / POST / DELETE / PUT （REST架構）
            GET     查詢
            POST     添加
            DELETE刪除
            PUT     修改

        3. 異步文件上傳
            post
            contentType:'multipart/form-data',
            processData:false,
            ...

    3) axios 
        特色：
            純粹ajax庫；
            應用了promise機制；
            能夠直接運行在node環境下，也能夠運行在瀏覽器下；
            自動將data數據轉換爲JSON

        1. 底層API
            axios({
                baseURL:'http://120.78.164.247:9999'
                url:'/user/findAll'
                method:'get'
                data:{},            //post
                params:{},        //get
                headers:{
                    'Content-Type':'application/json'
                }

                transformRequest:[function(data,headers){
                    return qs.stringify(data);
                }],
                paramsSerializer:function(params){
                    return qs.stringify(params);
                }
            })

            1. 經過id刪除一個用戶信息，get方式傳遞id
                axios({
                    url:'',
                    method:'get',
                    params:{
                        id:1
                    },
                    paramsSerializer:function(params){
                        return qs.stringify(params);
                    }
                })
            2. 保存用戶信息，data格式json
                axios({
                    url:'',
                    method:"post",
                    data:user
                })
            3. 保存用戶信息，data格式查詢字符串
                axios({
                    url:'',
                    method:"post",
                    data:user,
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    transformRequest:[function(data,headers){
                        return qs.stringify(data);
                    }]
                })

                {
                    name:'js',
                    options:[{
                        id:1,
                        name:'String'
                    },{
                        id:2,
                        name:'Number'
                    }]
                }

                name=js&options[0].id=1&options[0].name=String

        2. 快捷API             axios.get()             axios.post()