axios的使用

只做一件事：傳送請求

axios外掛別的作用沒有，只是用來傳送ajax請求，所以它的使用也很簡單
axios有專門的文件，點選這裡檢視axios文件
其實只要把 jQuery 裡面封裝的ajax請求搞會了，這個也不成問題

1. get請求

語法：axios.get(url, {params：obj}).then(callback)

1. 第一個引數是 url 地址
2. 第二個引數是 攜帶的引數，注意是物件裡面包含了params屬性，屬性值為攜帶的資料物件
3. .then()裡面放上回撥函式

注意：

回撥函式裡面返回的 res 是axios封裝的 返回值，我們真正需要的在 res.data 裡面。

程式碼展示

        /* 測試 GET 請求  */
        // 1. 註冊點選事件
        $('#btn1').click(function() {
            // 2. 準備資料和URL
            let url = 'http://www.liulongbin.top:3006/api/getbooks'
            let paramsObj = {
                bookname: '三國演義'
            }

            // 3. 使用 axios 傳送請求
            // 第一個引數是 URL 地址
            // 第二個引數是攜帶的資料(傳送GET請求時 引數可以不帶)
            // 最後 .then（callback）表示響應的回撥函式
            axios.get(url, {
                params: paramsObj
            }).then(function(res) {
                // console.log(res); // res 是 axios 封裝的，真正的結果是 res.data
                console.log(res);
            })
        })

返回的 res 物件

而我們真正需要的是其中的data

2. post請求

語法：axios.post(url, paramsObj).then(callback)

注意：

其他的引數都和 get 請求一樣,第二個引數沒有了外面的大括號，直接放要傳送的資料物件

        /* 測試 POST 請求 */
        // 1. 註冊點選事件
        $('#btn2').click(function() {
            let url = 'http://www.liulongbin.top:3006/api/addbook'
            let paramsObj = {
                bookname: '老李學ajax的第四天',
                author: '老李',
                publisher: '黑馬'
            }

            // 2. 傳送 POST 請求
            axios.post(url, paramsObj).then(function(res) {
                console.log(res.data);
            })
        })

3. axios請求

先放程式碼展示

        $('#btn3').click(function() {
            axios({
                method: 'get',
                url: 'http://www.liulongbin.top:3006/api/getbooks',
                // 使用 axios 傳送 get 請求攜帶的引數叫 params
                params: {
                    id: 1
                },
            }).then(function(res) {
                console.log(res.data);
            })
        })

        /* ----------------------------------------------------------------------- */

        $('#btn4').click(function() {
            axios({
                method: 'post',
                url: 'http://www.liulongbin.top:3006/api/addbook',
                // 使用 axios 傳送 post 請求攜帶的引數叫 data
                data: {
                    bookname: '李雲龍日記',
                    author: '李雲龍',
                    publisher: '獨立團出版社'
                },
            }).then(function(res) {
                console.log(res.data);
            })
        })

引數說明

1. method：請求型別（get / post）
2. url：請求地址
3. 攜帶引數：get請求裡面的引數作為 params 屬性的值；post請求裡面的引數作為 data 屬性裡面的值
4. then(callback)：回撥函式裡面的res.data才是我們真正需要的資料物件