Vue--axios数据请求、fetch、vue-resoure数据请求

目录

• axios数据请求
  • 特点
• 不带参数的数据请求
  • get
  • post
  • mock模拟数据
• 带参数的数据请求
  • get
  • post
• vue-resoure数据请求
• fetch数据请求
  • 特点
  • get
  • post
• 计算属性
• 侦听属性

1.axios数据请求

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>//引入axios
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>//引入vue

• 概念
  • axios是XMLHTTPRequest对象
  • 底层是node.js的http模块
  • 也是Promise(用到then catch)
  • 对数据进行了封装
  • 可以防止XSRF脚本攻击
• 数据请求可以放在Vue实例中的methods选项中，也可以Vue实例放在数据请求中

1.不带参数的数据请求

• 不带参数的数据请求方式

  //1.
  axios.get(url).then((res)=>console.log(res)).catch((err)=>console.log(err))
  
  //2.
  axios({
      url:'',
      其他选项
  })
  .then((res) => console.log(res))
  .catch((err) => console.log(err))
  

• 静态数据请求
  • 理解静态请求
    • 因为我们现在流行的是前后端分离，所以当后端还没有给我们接口的时候，我们也需要正常进行
      开发，所以我们需要进行数据模拟

      <button @click = "getStatic"> 静态请求 </button>
  
      getStatic () {
              axios({
                  url:'./mock/mockData.json',
                  method:'GET',
              })
              .then((res) => console.log(res))
              .catch((err) => console.log(err))
          }
  

• 数据模拟
  • 方法
    • 爬取线上的，拷贝
      • Network–>XHR–>response–>右键拷贝
    • 使用mock.js生成
      • 进入mockjs官网
      • 安装命令

    • 使用easy mock(线上静态网站，用于接口暴露)

• get数据请求

      <button @click = 'get'> 动态数据 - 接口 - get </button>
  
      get () {
              axios({
                  url: 'http://localhost:3000/shop'
              }).then( res => console.log( res ))
                .catch( err => console.log( err ))
          },
  

• post数据请求
  • 不带参数，不需要设置请求头
  • 存在跨域现象(端口不一样)，在路由文件中解决跨域
    • 设置请求头
    • 引入中间件(cors)

      <button @click = 'post'> 动态数据 - 接口 - post </button>
      
      post () {
              axios({
                  url: 'http://localhost:3000/shop',
                  method: 'POST'
              }).then( res => console.log( res ))
                .catch( err => console.log( err ))
          }
  

2.带参数的数据请求

• get数据请求(利用params)

      get () {
              axios({
                  url:'http://localhost:3000/login',
                  method:'GET',
                  params:{
                      name:'zhangsan',
                      age:100
                  }
              })
              .then((res) => console.log(res))
              .catch((err) => console.log(err))
          },
  

• post数据请求
  • 利用官网上的会有bug
  • 一定要设置请求头(统一设置、分开设置)

  //1.统一设置请求头
  axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
  
      post () {
      
              //2.生成params实例，利用params实例传参
              let params = new URLSearchParams();
              params.append('name','zhangsan');
              params.append('age',100);
              
              axios({
                  url:'http://localhost:3000/login',
                  method:'POST',
                  
                  //3.传params对象
                  data:params
              })
              .then((res) => console.log(res))
              .catch((err) => console.log(err))
          }
  

2.vue-resoure数据请求

• 相关概念
  • vue-resoure使用形式和axios有90%以上相似
  • vue-resoure是vue的插件，它直接挂在了Vue原型上

  //直接挂在了Vue原型上
  Vue.prototype.$http = axios
  

  • vue-resoure有json数据类型，但是axios没有

//引入标签对
<script src="https://cdn.bootcss.com/vue-resource/1.5.1/vue-resource.min.js"></script>

 new Vue({
       el: '#app',
       methods: {
           getStatic () {
           //将axios换成this.$http
            this.$http({
                url: './mock/data.json',
            }).then( res => console.log( res ))
              .catch( err => console.log( err ))
           }
       }
   })

3.fetch数据请求

• 相关概念
  • fetch是原生js提供的
  • fetch也是Promise
  • fetch对数据是没有进行封装的，安全性不高(输出Vue实例没有添加别的东西)
  • fetch默认是get数据请求方式
  • 有两个then
    • 第一个then:对数据进行格式化
      • data.json() json类型数据格式化
      • data.text() 文本类型数据格式化，普通字符串
      • data.blob() 二进制数据格式化(视频 音频 图片)
    • 第二个then：格式化后的数据
• 获取静态数据

      getStatic () {
              fetch('./mock/data.json')
                  .then( data => data.json())
                  .then( res => console.log( res ))
                  .catch( err => console.log( err ))
          }
  

• get获取数据

      get() {
              //fetch中get通过url路径传输数据
              fetch('http://localhost:3000/login?name=zhangsan&age=100')
                  .then(data => data.text())//文本类型数据格式化
                  .then((res) => console.log(res))
                  .catch((err) => console.log(err))
          }
  

• post获取数据

    post() {
              fetch('http://localhost:3000/login', {
                  method: 'POST',
                  //设置请求头
                  headers: new Headers({
                      'Content-Type': 'application/x-www-form-urlencoded' // 指定提交方式为表单提交
                  }),
                  //传参(键值)
                  body: new URLSearchParams([["foo", 1], ["bar", 2]]).toString()
              })
                  .then((res) => {
                      return res.text()
                  })
                  .then((res) => {
                      console.log(res)
                  })
              }
  

4.计算属性

• 思考：如果我们想要让一个字符串反向，应该如何操作
  • 第一种方式：直接在html解构中结合模板语法写

   数据反向：{{ info.split('').reverse().join('') }} 
  

  • 第二种方法：利用计算属性

  computed:{
          change () {
              return this.info.split('').reverse().join('')
          }
      }
      
   计算属性数显数据反向：{{ change }} 
  

• 计算属性
  • 引入的原因
    • 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护

     数据反向：{{ info.split('').reverse().join('') }} 
    

  • 计算属性的用法
    • 在一个计算属性里可以完成各种复杂的逻辑，包括运算、函数调用等，只要最终返回一个结果就可以。

    change () {
            return this.info.split('').reverse().join('')
        }
    

    • 计算属性可以直接当成全局变量来用

     计算属性数显数据反向：{{ change }} 
    

注意：计算属性不能和data里面的变量名重名

• 计算属性实现的原理
  • 每一个计算属性都包含一个getter 和一个setter ，计算属性的默认用法是利用了getter 来读取
  • 在你需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作
  • 例如

  <div id="app">
      姓：<br>
      名：<br>
      全名：
  div>
  

   new Vue({
      el:'#app',
      data:{
          firstName:'',
          lastName:''
      },
      computed: {//计算属性
          fullName: {
              get () {
                  //输入姓和名得到全名
                  return this.firstName + this.lastName
              },
              set ( val ) {
                  //输入全名得到姓和名
                  this.firstName = val.slice( 0,1 );
                  this.lastName = val.slice( 1 )
              }
          }
      }
  })
  

侦听属性

• 小栗子

<div id="app">
    姓：<br>
    名：<br>
    全名：
div>

new Vue({
    el: '#app',
    data: {
        firstName:'',
        lastName:'',
        fullName:''
    },
    watch: {
        firstName ( val ) {//val为修改后的值
            console.log(val)//文本框里修改后的值
            this.fullName = val + this.lastName;
        },
        lastName ( val ) {
            console.log(val);
            this.fullName = this.firstName + val;
        }
    }
})

注意：watch中的firstName必须与需要监听的data属性名一致才能实现有效的监听。