美文网首页工作生活
Vue中的数据请求--fetch和axios

Vue中的数据请求--fetch和axios

作者: 尤雨溪的大迷弟 | 来源:发表于2019-07-03 22:53 被阅读0次

1.Fetch

很有名的一篇博文,供参考:传统的ajax已死,fetch永生

fetch API 是基于 Promise 设计,旧浏览器不支持 Promise,需要使用 polyfill es6-promise 。
fetch 不需要额外的安装什么东西或引入文件,直接可以使用。

请求方式:get

    const app = new Vue({
        el: '#app',
        data: {
        },
        mounted() {
            //普通函数
            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对象转换为json数据
            }).then(function(data) {
                console.log(data);//json数据
            });

            //箭头函数更为简便
            fetch('https://www.daxunxun.com/douban')
            .then(res => res.json()) 
            //也可将数据转为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',//设置请求方式
                headers: { //应该你要根据你们自己的接口来判断,本案例中适合'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({ //由于这里传参的数据格式需要为json,所以需要转换成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不同,数据在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);
            });
        }
    });

相关文章

网友评论

    本文标题:Vue中的数据请求--fetch和axios

    本文链接:https://www.haomeiwen.com/subject/vayhhctx.html