Vue（day3）axios、fetch语法、computed与watched、组件（重要）

最新推荐文章于 2024-06-09 16:54:00 发布

xy1677707153

最新推荐文章于 2024-06-09 16:54:00 发布

阅读量471

点赞数

分类专栏： Vue.js

原文链接：https://blog.csdn.net/weixin_41640944/article/details/89462053

版权

Vue.js 专栏收录该内容

8 篇文章 1 订阅

订阅专栏

Vue基础（Day3）

3.1 axios && fetch

目的：是在框架中使用数据请求

回顾：
  	1. 封装ajax
    		2. jquery 【  $$.get  $$ .post   $$.ajax     $$ .load 】
框架：

数据请求
使用原生js提供的fetch
使用第三方封装库： axios（上bootCDN上复制script链接即可）
Vue中可以统一对axios进行挂载
  Vue.prototype.$http = axios
fetch vs axios

axios 对已获得的数据进行了一层封装 XSRF
axios底层自动对数据进行了格式化

fetch并没有进行封装，拿到就是格式化后的数据
fetch进行了多一层的格式化
res.json()
res.blob() 格式化二进制
res.text()

Axios总结
    1.get方法
如果设置了Vue.prototype.$http = axios，那么axios可以用this.$http来替代
    A: 无参数
        axios.get(url).then(res=>console.log(res).catch(error=>conosle.log(error))
    B: 有参数
        axios({
            url: 'http://xxx',
            method: 'get' //默认就是get,这个可以省略，
            params: {
                key: value
            }
        })

    2.post
        注意： axios中post请求如果你直接使用npmjs.com官网文档， 会有坑
        解决步骤： 
                1. 先设置请求头 
                2. 实例化 URLSearchParams的构造器函数得到params对象
                3. 使用params对象身上的append方法进行数据的传参


// 统一设置请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; 
let params = new URLSearchParams()

// params.append(key,value)

params.append('a',1)
params.append('b',2)

axios({
    url: 'http://localhost/post.php',
    method: 'post',
    data: params，
      headers: {  //单个请求设置请求头
       'Content-Type': "application/x-www-form-urlencoded"
    }
})
.then(res => {
    console.log( res )
})
.catch( error => {
    if( error ){
    throw error
}
})


Fetch
1.get

fetch('http://localhost/get.php?a=1&b=2')
    .then(res=> res.text()) // 数据格式化 res.json() res.blob()
    .then(data => {
        console.log( data )
    })
    .catch(error => {
        if( error ){
        throw error
    }
})

注意事项：
    A: fetch 的 get 请求的参数是直接连接在url上的， 我们可以使用Node.js提供的url或是qureystring模块来将
        Object --> String
    B: fetch 的请求返回的是Promise对象，所以我们可以使用.then().catch(),但是要记住.then()至少要写两个， 第一个then是用来格式化数据的，第二个then是可以拿到格式化后的数据
        格式化处理方式有
fetch('./data.json')
.then(res=>{
    res.json() //res.text() res.blob()
})
.then( data => console.log(data))
.catch( error => console.log( error ))


2.post
fetch 文档
https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch#%E8%BF%9B%E8%A1%8C_fetch_%E8%AF%B7%E6%B1%82

// 通过fetch获取百度的错误提示页面
fetch('https://www.baidu.com/search/error.html', {
    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)
  })
  
fetch项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975

封装一个fetch！！！！封装一个fetch！！！！封装一个fetch！！！！
/**
 * 将对象转成 a=1&b=2的形式
 * @param obj 对象
 */
function obj2String(obj, arr = [], idx = 0) {
  for (let item in obj) {
    arr[idx++] = [item, obj[item]]
  }
  return new URLSearchParams(arr).toString()
}
 
/**
 * 真正的请求
 * @param url 请求地址
 * @param options 请求参数
 * @param method 请求方式
 */
function commonFetcdh(url, options, method = 'GET') {
  const searchStr = obj2String(options)
  let initObj = {}
  if (method === 'GET') { // 如果是GET请求，拼接url
    url += '?' + searchStr
    initObj = {
      method: method,
      credentials: 'include'
    }
  } else {
    initObj = {
      method: method,
      credentials: 'include',
      headers: new Headers({
        'Accept': 'application/json',
        'Content-Type': 'application/x-www-form-urlencoded'
      }),
      body: searchStr
    }
  }
  fetch(url, initObj).then((res) => {
    return res.json()
  }).then((res) => {
    return res
  })
}
 
/**
 * GET请求
 * @param url 请求地址
 * @param options 请求参数
 */
function GET(url, options) {
  return commonFetcdh(url, options, 'GET')
}
 
/**
 * POST请求
 * @param url 请求地址
 * @param options 请求参数
 */
function POST(url, options) {
  return commonFetcdh(url, options, 'POST')
}

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

3.2 计算属性

computed 是Vue中的一个选项

作用：？

业务：如果我想让一个字符串反向，如何实现？

分析：反向 -> 数组【 reverse 】

使用： 1.在选项中定义一个computed 属性，属性值是一个对象，对象中存储都是方法，这些方法必须有返回值
          2. 在vm实例范围内，直接当做全局变量一样使用这个方法名称
          3. 注意，方法名后不加 （）
经验： 帮助你确定何时是用计算属性
    
      具备两个条件
          1. 有逻辑
          2. 实例中直接当做全局变量处理
          <p> 计算属性： {{ newMsg }} </p>
   computed: {
      newMsg () {
        return this.msg.split('').reverse().join('')
      }
    }

3.2.1 侦听属性

watch 是Vue中一个选项

作用：？

监听数据的变化，当数据发生改变时，我们完成一些操作

业务：

watch: {
      firstName ( val ) {
        this.fullName = val + this.lastName
      },
      lastName ( val ) {
        this.fullName = this.firstName + val 
      },
      num: {
        deep: true, // 深度监听      
        handler ( val ) {
          //  当num发生改变时，触发的方法
          console.log( val )
        }
      }
    }

总结： methods vs computed vs watch
- 项目中如何使用
  - 1. 事件处理程序： methods
  - 1. watch
      
      有大量数据交互和异步处理时进行
  - 1. computed
      - 有逻辑处理
      - V中像全局变量一样使用

3.3 混入【青铜】

minxin

混入的形式
- 全局混入【不推荐】
- 局部混入
混入的作用：
- 1. 将选项中某一个或是多个单独分离出去管理，让职能更加单一高效，符合模块化思想
局部混入的使用
```
选项  minxins
```
全局混入
```
Vue.mixin({})
```

3.4 组件【王者】

了解前端组件化发展历史
- 前后端耦合
  - 前后端不分离项目
    - 1. 找后台搭建项目开发环境
    - 1. 寻找项目目录中的静态资源目录
        js
        img
        css
    - 1. 同步修改css
- 前后端分离
- 前端团队合作项目的出现
  - 组件化为了解决多人协作冲突问题
  - 复用
组件的概念
- 组件是一个html 、 css 、js 、img 等的一个聚合体

Vue中的组件属于扩展性功能

通过 Vue.extend() 来扩展的

ƒ Vue (options) {
    if (!(this instanceof Vue)
       ) {
        warn('Vue is a constructor and should be called with the `new` keyword');
    }
    this._init(options);
}
ƒ VueComponent (options) {
    this._init(options);
}

VueComponet这个构造函数我们不进行new实例化，我们希望组件是以标签化的形式展示
```
<Hello/> -->  <div></div>
<Banner></Banner>
```

标签形式应该小写，因为解析的时候会把标签默认解析为小写
```

组件要想合法化，必须注册解析
组件的注册【创建】

全局注册

     Vue.component('Hello',{
    template: '<div> hello 组件 </div>'
     })

局部注册

  new Vue({
    el: '#app',
    components: {
      // 组件的名称: 组件的选项
      'Hello': {
        template: '<div> hello </div>'
      }
    }
  })

组件的规则

is属性 - 动态组件 - 动态缓存组件

    在 html / h5中有一些标签， 它的父子级元素是规定的，这个时候如果我们使用组件，那么久打破了这个规则，就会出错
    这类型标签有： 
        ul li
        ol li
        dl dt dd 
        table tr td 
        selcet  option 
        ...  
    解决： 使用is属性来绑定一个组件
    <tr is = "Hello"></tr>

template模板标签
- 直接子元素有且仅有一个

组件的嵌套

new Vue({
    el: '#app',
    data: {
      comp: 'UserLogin'
    },
    components: {
      'Father': {
        template: '#father',
        components: {
          'Son': {
            template: '#son'
          }
        }
      }
    }
  })

3.5 作业

面试题： ajax 和 fetch 有什么区别？【提问率： 60% 】

（1）、ajax是针对MVC的编程,不符合现在前端MVVM的浪潮

（2）、ajax基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案；fetch是基于promise实现的，也可以结合async和await

（3）、fetch比较与ajax有着更好更方便的写法,fetch 是全局量 window 的一个方法

（4）、fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理、只有网络出错导致请求不能完成时，fetch才会被reject。ajax是200，304时才会成功请求

（5）、fetch没有办法原生监测请求的进度，而XHR可以

（6）、fetch符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里

（7）、fetch请求默认是不带cookie的，需要设置fetch（URL，{credentials:’include’})。
Credentials有三种参数：same-origin，include，*
了解前后端耦合，前后端分离

xy1677707153

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
Vue（day3）axios、fetch语法、computed与watched、组件（重要）

Vue基础（Day3）3.1 axios && fetch目的：是在框架中使用数据请求回顾： 1. 封装ajax 2. jquery 【 $$.get $$ .post $$.ajax $$ .load 】框架：数据请求使用原生js提供的fetch使用第三方封装库： axios（上bootCDN上复制script链接即可...
复制链接

扫一扫