博客

只做一件事：发送请求

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://xxxxx'
            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://XXXXX'
            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://XXXXXX',
                // 使用 axios 发送 get 请求携带的参数叫 params
                params: {
                    id: 1
                },
            }).then(function(res) {
                console.log(res.data);
            })
        })

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

        $('#btn4').click(function() {
            axios({
                method: 'post',
                url: 'http://XXXXX',
                // 使用 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才是我们真正需要的数据对象