vue里面 fetch和 axios

最新推荐文章于 2024-05-03 10:45:40 发布

独秀攻城狮

最新推荐文章于 2024-05-03 10:45:40 发布

阅读量1.2k

点赞数

分类专栏： vue 文章标签： fetch axios vue

本文链接：https://blog.csdn.net/qq_45407978/article/details/100025932

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue 里面 axios 和 fetch 的请求方式
目的：是在框架中使用数据请求 vue 渲染数据的方法
回顾：
封装ajax jquery 【 $.get $ .post $.ajax $ .load 】

框架：数据请求
使用原生js提供的fetch 使用第三方封装库： axios

数据分成静态数据和动态数据库数据

    1. 请求静态数据 【 模拟假数据 - mock数据 】
       *  线上拷贝相似字段数据
       * 使用第三方 mock.js 来生成json数据 【 用代码来生成数据 】
       * esay mock线上网站

    2. 请求动态数据 【 通过后端接口来请求数据 】
       * php      * java   * node   * c

我们进行axios 的数据请求
静态数据 get动态数据 post动态数据

<button @click = "static"> 静态数据 </button>

<button @click = "get"> 动态数据 - get </button>

<button @click = "post"> 动态数据 - post </button>

<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

<body>
    <section id="root">
        <button @click="static"> 静态数据 </button>
        <button @click="get"> 动态数据 - get </button>
        <button @click="post"> 动态数据 - post </button>
        <ul>
            <li v-for="item in list">    //利用循环进行渲染
                <!-- <img :=src "ltrm.poster">
                <h3>{{ltem.name}}</h3> -->
                {{item['name']}}                
            </li>
        </ul>


    </section>
    <!-- 自己开始写通过第三方库，来渲染 买电影票的小程序 -->
    <script>
        axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
        //设置全部请求头
        Vue.prototype.$http = axios

        new Vue({
            el: '#root',
            data: {
                list: null     //点击时候刷新 vue 看有没有获取到数据              
            },
            methods: {
                static() {
                    const p = axios({
                            url: './daa/mp.json'
                        })
                        // .then(res => {
                        //     console.log(res.data.data.films);
                        //     // this.list = res.data.data.films;
                        //     this.list = res.data.data.films;
                        //     console.log(this.list);
                        // })
                        //     .catch(error => console.log(error))
                        //静态的第一种写法为什么，我的this指向不管用

                    // this.$http
                    //     .get('./daa/mp.json')
                    //     .then(res => {
                    //         console.log(res)
                    //         this.list = res.data.data.films                //赋值语句
                    //     })
                    //     .catch(error => console.log(error))
                    //静态等会从新写没有成功，写作业
                },
                get() { //注意跨域问题，这个服务器不稳定                要建立后端服务器的
                    axios({
                            url: 'http://127.0.0.1/node/node06/php/get.php',
                            params: {
                                a: 3,
                                b: 6
                            }
                        }).then(res => console.log(res))
                        .catch(error => console.log(error))
                },
                //请求头有单一设置(headers{})和 全部设置 
                post() {
                    let params = new URLSearchParams(); //这里是new 东西来设置 进行数据传递
                    params.append('a', 1);
                    params.append('b', 2); //一个params 在这里传输一个键值对
                    axios({
                            url: 'http://127.0.0.1/node/node06/php/post.php',
                            method: 'post',
                            data: params,
                        }).then(res => console.log(res))
                        .catch(error => close.log(error))
                }

            }
        })
    </script>


 fetch 的请求  

 <div id="app">
      <button @click = "static"> 静态数据 </button>
      <button @click = "get"> 动态数据 - get </button>
      <button @click = "post"> 动态数据 - post </button>
      <ul>
          <li v-for = "item in list">
            <div>
              <img :style = "{ width: '100px',height: '100px'}" :src="item.pic" alt="">
            </div>
            <div>
              <h3> {{ item.d_title }} </h3>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
            </div>
          </li>
        </ul>
  </div>
</body>
<script>
  new Vue({
    el: '#app',
    data: {
      list: []
    },
    methods: {
      static () {
        fetch('./data/list.json')     //静态获取的数据
          .then( res => res.json() ) //将获得的json数据格式化 (json字符串格式化) 格式许多没有用的 ，那个封装防止攻击的
          .then( data => {
            this.list = data.data.content
          })
          .catch( error => console.log( error ))
      },
      get () {
        fetch('http://localhost/get.php?a=1&b=2')
          .then( res => res.text() )
          .then( data => console.log( data ))
          .catch( error => console.log( error ))
      },
      post () {
        fetch('http://localhost/post.php',{
          method: 'POST',
          headers: new Headers({            //设置局部的请求头
            'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
          }),
          body: new URLSearchParams([['a',1],['b',2]]).toString()
        }).then( res => res.text() )
          .then( data => console.log( data ))
          .catch( error => console.log( error ))
      }
    }
  })
</script>

使用原生js提供的fetch 使用第三方封装库： axios
Vue中可以统一对axios进行挂载 Vue.prototype.$http = axios

fetch axios 的区别 jq ajax
axios 对已获得的数据进行了一层封装 XSRF 防止攻击
axios底层自动对数据进行了格式化
可以在node.js中使用
提供了并发请求的接口
支持Promise API

fetch并没有进行封装，拿到就是格式化后的数据
1 fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()
2 要手动拼接参数
3 基于e6 的promise
4 脱离了XHR，是ES规范里新的实现方式

    jqery  ajax  的请求

本身是针对MVC的编程,不符合现在前端MVVM的浪潮
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）

Vue1.0数据请求我们使用的是一个第三方的封装库，这个封装库叫做 vue-resource
vue-resource现在已经淘汰了,它的作者也推荐我们使用axios
vue-resource使用形式和axios一样的
this. $h t t p . g e t t h i s .$ http.post
this.$http({})
vue-resource有jsonp方法,而axios是没有的
Vue2.0
axios [ 可以说是目前最好的数据请求的封装库 ]
fetch

独秀攻城狮

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue里面 fetch和 axios

vue 里面 axios 和 fetch 的请求方式目的：是在框架中使用数据请求 vue 渲染数据的方法回顾：封装ajax jquery 【 $.get $ .post $.ajax $ .load 】框架：数据请求使用原生js提供的fetch 使用第三方封装库： axios数据分成静态数据和动态数据库...
复制链接

扫一扫

专栏目录