一、fetch

全局请求不需要引入直接使用即可，浏览器内置的

支持 get 和 post 请求，默认get

语法：

fetch(url)
.then(res=>{return res.json()})
.then(res=>{res是数据})

注：第一个then的res需要使用json方式处理成promise对象

举例：

<div id="root">
        <p>{{msg}}</p>
</div>

<script>
    const vm = new Vue({
        data: {
            msg:'我是fetch请求'
        },
        mounted() {
            // 挂载后触发fetch get请求
            this.getOriDate()
            // 触发fetch post请求 - json
            this.postOriDate1()
            // 触发fetch post请求 - 表单编码
            this.postOriDate2()
        },
        methods: {
            // get请求
            getOriDate(){
                fetch('https://api.i-lynn.cn/college')
                .then(res=>{return res.json()})
                .then(res=>{console.log('默认get请求',res)})
            },
            // post请求 - json格式
            postOriDate1(){
                fetch('https://api.i-lynn.cn/college',{
                    method:'POST',
                    headers:{
                        'Content-Type':"application/json"
                    },
                    body:JSON.stringify({name:'王霜',age:20})
                })
                .then(res=>{ return res.json()})
                .then(res=>{console.log('post请求json格式',res)})
            },
            // post请求 - 表单编码格式
            postOriDate2(){
                fetch('https://api.i-lynn.cn/college',{
                    method:'POST',
                    headers:{
                        'Content-Type':'application/x-www-form-urlencoded'
                    },
                    body:'name=小李&age=18'
                })
                .then(res=>{return res.json()})
                .then(res=>{console.log('post请求表单编码格式',res)})
            }
        },
    }).$mount('#root')
</script>

二、axios

需要下载axios插件引入js文件

特点： 相较于fetch，只需要一个then获取数据，更方便

使用率高 - vue和react都会使用axios

语法：

get请求：

一个参数：直接跟在url后面

多个参数：params:{存放多个参数}

post请求：

json：直接第二个形参放成对象 {参数数据}

表单编码：直接第二个形参放成字符串 '参数数据&参数数据'

常规请求：（常用）

get:

axios({

methods:'get',

url:'地址',

params:{数据},

})

post:

axios({

methods:'post',

url:'地址',

headers:{

'Content-Type':'application/x-www-form-urlencoded'/'application/json'

}

data:{数据},

})

举例：

<div id="root">
        <p>{{msg}}</p>
</div>

<script>
    const vm = new Vue({
        data: {
            msg:'我是axios请求'
        },
        mounted() {
            // axios get - 无参数/一个参数
            this.getOriDate1()
            // axios get - 多个参数
            this.getOriDate2()
            // axios post - json
            this.postOriDate1()
            // axios post - 表单编码
            this.postOriDate2()
            // axios 常规方法 - 包含get 和 post
            this.OriDate1()
            this.OriDate2()
        },
        methods: {
           // axios get - 无参数/一个
            getOriDate1(){
                axios.get('https://api.i-lynn.cn/college?id=100')
                .then(res=>{console.log('get请求无参数/一个',res)})
                .catch(error=>console.log(error))
            },
            // axios get - 多个参数 params
            getOriDate2(){
                axios.get('https://api.i-lynn.cn/college',{
                    params:{
                        name:'小李',
                        age:20
                    }
                }).then(res=>{console.log('get请求多个参数params：',res)})
                .catch(error=>{console.log(error)})
            },
            // axios post - json
            postOriDate1(){
                axios.post('https://api.i-lynn.cn/college',{
                    name:'小李',
                    age:20
                }).then(res=>{console.log('post请求json：',res)})
                .catch(error=>{console.log(error)})
            },
            // axios post - 表单编码
            postOriDate2(){
                axios.post('https://api.i-lynn.cn/college','name=冰墩墩&age=1')
                .then(res=>{console.log('post请求表单编码：',res)})
            },
            // axios 常规方法 - post
            OriDate1(){
                axios({
                    methods:'post',
                    url:'https://api.i-lynn.cn/college',
                    data:{
                        name:'小李',
                        age:20
                    },
                    headers:{
                        'Content-Type':'application/json'
                    }
                }).then(res=>{console.log('常规post请求：',res)})
            },
            // axios 常规方法 - get
            OriDate2(){
                axios({
                    methods:'get',
                    url:'https://api.i-lynn.cn/college',
                    params:{
                        name:'小李',
                        age:20
                    },
                }).then(res=>{console.log('常规get请求：',res)})
            }
        },
    }).$mount('#root')
</script>

vue网络请求

一、fetch

语法：

举例：

二、axios

语法：

举例：