vue基础（axios，fetch等）

最新推荐文章于 2024-08-17 10:51:54 发布

竹本色

最新推荐文章于 2024-08-17 10:51:54 发布

阅读量241

点赞数

本文链接：https://blog.csdn.net/zhoushugege/article/details/100122798

版权

axios && fetch

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

数据请求

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

     Vue.prototype.$http = axios

fetch vs axios
- axios 对已获得的数据进行了一层封装 XSRF
  - axios底层自动对数据进行了格式化
- fetch并没有进行封装，拿到就是格式化后的数据
  - fetch进行了多一层的格式化
    - res.json()
    - res.blob() 格式化二进制
    - res.text()

 Axios总结
    1.get方法
    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项目使用的博客
https://blog.csdn.net/hefeng6500/article/details/81456975

3.2 计算属性

computed 是Vue中的一个选项

作用：？

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

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

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 )
        }
      }
    }

组件

了解前端组件化发展历史
- 前后端耦合
  - 前后端不分离项目
    - 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>
```
- 组件要想合法化，必须注册解析
- 组件的注册【创建】
  - 全局注册
  - 局部注册
- 组件的规则
- is属性 - 动态组件 - 动态缓存组件
- template模板标签
  - 直接子元素有且仅有一个
- 组件的嵌套