axios和fetch网络请求

人狠话不多,直接上代码

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            msg: "今晚Da老虎"
        },
        created() {
            //axios 网络请求
            this.getaxios1()         // 简写  get 请求方法1 
            this.getaxios2()         //get 请求方式  参数可以携带多个params

            this.post1_axios()      //使用post请求 默认是application/json格式
             this.post2_axios()     //使用post方式 ,默认是application/x-www-form-urlencoded  表单格式


             this.post1_axios()      //常规方法
             this.get_axios()


            // 网络请求fetch
             this.post_fetch()
             this.get_fetch()    //默认就是get 请求方式
             this.post1_fetch()  //post表单编码格式

        },
        methods: {
            getaxios1() {
                axios.get('https://api.i-lynn.cn/college?id=100').then(res => {
                    console.log(res.data.data);
                })
            },
            //使用get 请求方式2 可用于请求多个参数------------------------
            getaxios2() {
                axios.get('https://api.i-lynn.cn/college', {
                    params: {
                        name: '王珊珊',
                        age: 18
                    }
                }).then(res => {
                    console.log(res);
                })
            },
            //-------------------------------------------------------------
            post1_axios() {
                axios.post('https://api.i-lynn.cn/college', {
                    name: '吴永谊',
                    age: 18
                }).then(res => { console.log(res); })
            },

            // 表单格式默认为  application/x-www-form-urlencoded----------
            post2_axios() {
                axios.post('https://api.i-lynn.cn/college', 'name=张三&age18').then(res => { console.log(res); })
            },


            // 常规格式--------------------------------
            post1_axios() {
                axios({
                    methods: 'post',
                    url: 'https://api.i-lynn.cn/college',
                    data: 'name=张三&age=18',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                }).then(res => {
                    console.log(res)
                })
            },
            // get 常规格式---------------------------------
            get_axios() {
                axios({
                    method: "get",
                    url: 'https://api.i-lynn.cn/college',
                    params: {
                        name: '吴永谊',
                        age: 18
                    }
                }).then(res => {
                    console.log(res)
                })
            },

            //--------------------------------------------------
            // fetch网络请求
            post_fetch() {
                fetch('https://api.i-lynn.cn/college', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ name: '吴永谊', age: 18 })
                }).then(res => {
                    return res.json()
                }).then(res => {
                    console.log(res);
                })
            },
            get_fetch() {
                fetch('https://api.i-lynn.cn/college').then(res => {
                    return res.json()
                }).then(res => {
                    console.log(res);
                })
            },
            // post表单编码格式
            post1_fetch() {
                fetch('https://api.i-lynn.cn/college', {
                    method: 'post',
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    },
                    body: 'name=吴永谊&age=100'
                }).then(res => {
                    return res.json()
                }).then(res => {
                    console.log(res);
                })
            }
        },
    })
</script>