vue 组件通信 请求数据的三种方式

Review

组件定义

组件注册

组件通信

父子组件通信：

父传子：使用 props

子传父：使用事件

跨组件通信：

转换为父子组件通信的方式（繁琐）enent-bus （事件总线）

事件总线

借助一个中间对象，来实现数据的挂载及传递：以事件的方式实现，通过绑定自定义事件来挂载数据并处理数据，通过触发事件的执行来传递数据。借助的中间对象实际上是一个空的 Vue 实例

const bus = new Vue()

在需要接收数据的组件中绑定事件（入），使用 bus.$on(事件名称，事件处理程序)

在需要传递数据的组件中触发事件（出），使用 bus.$emit(事件名称，传递输入)

生命周期

组件从创建到消亡的整个过程

在生命周期中，利用 钩子函数 可以执行额外的一些操作

create 阶段

beforeCreate()

created()

通常在 created 钩子函数中发起异步请求（ajax）

mount 阶段

beforeMount()

mounted()

通常要使用页面中挂载的 DOM 元素，到该钩子函数中获取

update 阶段

beforeUpdate()updated()

destroy 阶段

beforeDestroy()destroyed()

异步请求

ajax：

创建 XMLHttpRequest 实例open(method, url, async)，建立连接send(params)，发送请求。如果要像表单一样 POST 数据，需要在 send 前调用 setRequestHeader()处理响应。xhr.onreadystatechange readyState – 就绪状态码，4 表示请求处理完毕，响应就绪status – HTTP 状态码，2xx，成功responseText – 响应文本

fetch

Fetch API

发送请求或者获取资源，需要使用 WindowOrWorkerGlobalScope.fetch() 方法，fetch() 必须接受一个参数——资源的路径。无论请求成功与否，它都返回一个 Promise 对象，resolve 对应请求的 Response，一旦 Response 被返回，就可以使用一些方法来定义内容的形式（比如使用 .json() 方法获取 JSON 格式的数据），以及应当如何处理内容。

fetch('http://jsonplaceholder.typicode.com/todos') .then(res => { console.log('response:', res) return res.json() }) .then(data => { console.log('data:', data) // 后继数据处理逻辑 data = data.filter(item => item.userId === 2) console.log('filter: ', data) }) .catch(err => console.log(err))

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

const request = axios.create({ baseURL: 'http://jsonplaceholder.typicode.com' }) // 响应拦截 request.interceptors.response.use(res => { if (res.status === 200) { return res.data // if (res.data.res_code === 0) { // return res.data.res_body // } // return Promise.reject(res.data) } return Promise.reject(res) }) // 发起请求 request.get('/todos') .then(res => console.log(res)) request.get('/users') .then(res => console.log(res))

Promise

三种状态：pending（等待）、fulfilled（成功）、rejected（失败）

new Promise((resolve, reject) => {

​ // 通常执行异步任务

​ // 在调用 resolve/reject 函数前 Promise 的状态为 pending

​ // 调用 resolve 是将状态修改为 fulfilled

​ // 调用 reject 是将状态修改为 rejected

})

Promise.prototype.then(onFulfilled, onRejected)

Promise.prototype.catch(onRejected)

Promise.all()

Promise.resolve()

Promise.reject()