1.Fetch

很有名的一篇博文，供參考：傳統(tǒng)的ajax已死谷市，fetch永生

fetch API 是基于 Promise 設(shè)計,舊瀏覽器不支持 Promise蛔垢，需要使用 polyfill es6-promise 。
fetch 不需要額外的安裝什么東西或引入文件迫悠，直接可以使用鹏漆。

請求方式：get

    const app = new Vue({
        el: '#app',
        data: {
        },
        mounted() {
            //普通函數(shù)
            fetch('https://www.daxunxun.com/douban').then(function(res) {
                console.log(res);//得到的是promise對象
                //Response {type: "cors", url: "https://www.daxunxun.com/douban", redirected: false, status: 200, ok: true, …}
                return res.json();//將promise對象轉(zhuǎn)換為json數(shù)據(jù)
            }).then(function(data) {
                console.log(data);//json數(shù)據(jù)
            });

            //箭頭函數(shù)更為簡便
            fetch('https://www.daxunxun.com/douban')
            .then(res => res.json()) 
            //也可將數(shù)據(jù)轉(zhuǎn)為text格式
             //fetch(url).then(res => res.text()).then(data => {console.log(data)})
            .then(data => {
                console.log(data);
            })
        }
    });

請求方式：post

    const app = new Vue({
        el: '#app',
        data: {
        },
        created() {
            
             //headers為：'Content-Type': 'application/x-www-form-urlencoded'
            fetch('https://www.daxunxun.com/users/register', {
                method: 'post',//設(shè)置請求方式
                headers: { //應(yīng)該你要根據(jù)你們自己的接口來判斷，本案例中適合'application/x-www-form-urlencoded'，不是'application/json'
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: 'username=12345678912&password=123456',
            }).then(res => res.json()).then(data => {
                console.log(data);
            });


            //headers為：'Content-Type': 'application/json'
            fetch('https://www.daxunxun.com/users/register', {
              method: 'post',
              headers: {
                'Content-Type': 'application/json'
              },
              body: JSON.stringify({ //由于這里傳參的數(shù)據(jù)格式需要為json艺玲，所以需要轉(zhuǎn)換成json格式在上傳
                username: 12345678912,
                password: 123456
              })
            }).then(res => res.json()).then(data => {
              console.log(data);
            })
        }
    });

2.axios

axios中文文檔

必須得引入 axios.js 文件或安裝模塊之后才能使用 npm install axios

請求方式：get

    const app = new Vue({
        el: '#app',
        data: {
            name: '',
        },
        mounted() {
            axios.get('https://www.daxunxun.com/castsDetail').then(res => {
                console.log(res.data);//與fetch不同括蝠，數(shù)據(jù)在res.data中
            });
        }
    });

請求方式：post

    const app = new Vue({
        el: '#app',
        data: {

        },
        mounted() {
            axios.post('https://www.daxunxun.com/users/login',{
                username: '12345678932',
                password: '123456',
            }).then(res => {
                console.log(res.data);
            });
        }
    });