框架级的数据请求-优快云博客

本文链接：https://blog.youkuaiyun.com/azmingliang/article/details/95531266

本文介绍了框架级的数据请求，包括axios、fetch等方式，讲述了vue数据请求的发展，如vue-resource被弃用及与axios的相似性，还对比了axios和fetch的特点。此外，还讲解了watch的作用，它用于监听data中数据的变化，是一个可设置多种类型键值的对象。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

框架级的数据请求

axios （第三方库）
fetch （ javascript 原生提供）
vue数据请求的发展

vue-resource ( Vue 以前自己封装使用的请求类库 ) ，但是 vue-resource作者已经放弃更新了
vue-resource 作者推荐我们使用 axios
vue-resource 用法和 axios 相似度 90% +
vue2.0我们基本上使用的都是 fetch / axios
vue-resource 是有jsonp的
vue-resource 如果在vue中使用，是挂载当前的实例（组件）的$http属性身上的
- 举例 this. $h t t p (o p t i o n s) t h i s .$ http.get() this.$http.post

axios 和 fetch 没有jsonp数据请求类型的

axios和fetch都是promise
axios会对我们请求来的结果进行在再一次的封装（让安全性提高）
案例

  new Vue({
    el: '#app',
    methods: {
      getData () {
        //进行get请求
        // axios.get()    -- $.get()
        // axios.post()    ---$.post()
        // axios(options)      -- $.ajax(options)

        // var p = axios({
        //   url: './data/data.json'
        // })

        // console.log( p )  Promise对象

        axios({
          url: './data/data.json',
          method: 'get',//默认就是get请求
        })
          .then( res => console.log( res ))
          .catch( error => conosle.log( error ))


      },
      postData () {
        // 进行post请求
      },
      get_myself_php_data () {
        axios({
          url: 'http://localhost/get.php',
          params: {
            a: 1,
            b: 2
          }
        })
          .then( res => console.log( res ))
          .catch( error => console.log( error ))
      },
      get_be_data () {
        // 跨域请求线上数据 - 卖座
        axios({
          url: 'https://m.maizuo.com/gateway',
          headers: {
            'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154549400038873748996477"}',
            'X-Host': 'mall.film-ticket.film.list'
          },
          params: {
            cityId: 330100,
            pageNum: 1,
            pageSize: 10,
            type: 1,
            k: 7675918
          }
        })  
          .then( res => console.log( res ))
          .catch( error => console.log( error ))
      }
    }
  })

axios 中post请求

    var params = new URLSearchParams() //得到params对象，用来接收参数
    // params.append( key, value )  key就是参数名，value就是参数值
    params.append( 'a', 2 )
    params.append( 'b', 2 )
    axios({
      url: 'http://localhost/post.php',
      method: 'post',
      headers: {
        'Content-Type': "application/x-www-form-urlencoded" //请求头设置为表单提交的请求头
      },
      data: params
    })
      .then( res => console.log( res ))
      .catch( error => console.log( error ))

fetch要手动进行一次数据格式化，但是axios是内部进行了数据的格式化
fetch get 方法请求数据，参数要直接连接在url上
fetch 格式化数据有三种处理方法
- .json() 格式化 json 类型数据，将 json类型string转换成json对象
- .text() 格式化文本
- .blob() 格式化二进制数据
fetch post处理
- 设置请求头
- 通过 new URLSearchPrams 来携带参数

watch

作用

用来监听data中定义的数据，当data中定义的数据发生了变化，那么watch中的key就会触发
watch是一个对象
watch：{}
watch中可以设置多个类型的减值

使用方法（重点）
- 方法

  watch: {
    fn () {}
  }

对象：（深度监听）

 watch: {
   fn: {
     handler(){},
     deep: true
   }
 }