XMLHttpRequest、jquery、fetch、axios发送网络请求

XMLHttpRequest网络请求

created() {		//vue的声明周期函数
                // 发送网络请求
                // 使用xhr对象
                // 1.创建xhr对象
                var xhr = new XMLHttpRequest();
                // 2.装载请求(注意this指向，用箭头函数)
                xhr.onreadystatechange = () => {
                        // 判断是否成功
                        if (xhr.readyState == 4 & xhr.status == 200) {
                            // 将数据赋给list
                            this.list = JSON.parse(xhr.responseText).list;
                        }
                    }
                    // 3.打开请求
                xhr.open('get', 'https://api.i-lynn.cn/college');
                // 如果post需要传参

                // 4.发送请求
                xhr.send();
            }

jquery发送网络请求

 // 创建vue实例
        new Vue({
            // 设置实例选项
            el: "#app",
            data: {
                list: []
            },
            created() {
                $.get('https://api.i-lynn.cn/college', (data) => {
                    this.list = data.list;
                }, 'json')
            }
        })

fetch发送网络请求

// 创建vue实例
        new Vue({
            // 设置实例选项
            el: "#app",
            data: {
                list: []
            },
            created() {
                // 发送请求
                fetch('https://api.i-lynn.cn/college').then(res => res.json()).then(data => this.list = data.list);
            }
        })

axios发送网络请求

 // 创建vue实例
        new Vue({
            // 设置实例选项
            el: "#app",
            data: {
                list: []
            },
            created() {
                axios.get('https://api.i-lynn.cn/college').then(ret => {
                    console.log(ret);
                    // axios返回结果的ret是一个对象，包含以下属性
                    // config：请求配置对象
                    // data：返回结果信息
                    // request：请求信息
                    // headers：头信息
                    // status：响应状态码
                    // statusText：状态相应信息
                    this.list = ret.data.list
                    console.log(this.list);
                })
            }

        })

目前最多采用axios的方法进行发送网络请求

最后

以上就是知性树叶为你收集整理的XMLHttpRequest、jquery、fetch、axios发送网络请求的全部内容，希望文章能够帮你解决XMLHttpRequest、jquery、fetch、axios发送网络请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。