组件生命周期
生命周期：指的是Vue组件自其开始创建到其被销毁完毕这段时间范围。
在生命周期的这个范围内，作者将其4个重要阶段，同时作者为了方便开发者指定组件在特定时间做一些特定的操作，对外暴露了一些特定名称的函数，这些函数我们称之为生命周期钩子函数。**常用的生命周期钩子函数一共有10个，外加1个不常用的错误边界周期，共11个生命周期函数。**本节我们将依据其四个阶段，来学习其中最常见的8个周期函数。
- 组件创建阶段
- beforeCreate
- created
- 组件挂载阶段
- beforeMount
- mounted
- 组件更新阶段（如果强制执行该阶段周期，可以this.$forceUpdate()）
- beforeUpdate
- updated
- 组件销毁阶段（如果期望手动效果组件，可以执行this.$destroy()）
- beforeDestroy
- destroyed
网络请求
- xhr xmlHttpRequest
- jQuery
- $.get
- $.post
- $.ajax
- $.getJSON
- fetch，语法：fetch(url,{})
基础语法
支持Promise
良好的兼容性
支持拦截器 统一处理请求和响应
对json格式的数据处理十分友好
能够根据请求体格式自动设置请求头
- 当请求体是普通js对象格式时，
axios自动设置请求头为application/json - 当请求体是查询字符串时，
axios自动设置请求头为application/x-www-form-urlencoded
支持对请求进行取消
支持restful规范中涉及到的请求动词
axios是一个第三方库，如果需要在项目中使用则需要先安装：
npm i axios
安装好后即可在项目中的组件里进行使用，例如我们可以按照下面的语法发送一个get请求：
import axios from "axios" export default { created(){ axios.get(可带问号参数的请求地址).then(res => {}) // axios的get参数支持与请求地址分离，因此下面的语法也是可以的 // axios.get(不带问号参数的地址,{params: {参数名:值,...}}).then(res => {}) } }
如果需要使用axios来发送一个post请求，则：
import axios from "axios" export default { created(){ // 请求参数支持： // - 查询字符串，如：id=1&age=22&name=zhangsan // - 普通js对象，如：{id: 1,age: 22,name: 'zhangsan'} // 请求头Content-Type会被根据参数类型自动设置 axios.post(请求地址,参数).then(res => {}) } }
除了通过axios.*这种方式进行请求，axios还支持：
import axios from "axios" export default { created(){ axios({ baseURL: 基础地址 url: 请求路径, method: 请求动词, data: 参数, timeout: 超时时间, headers: {} // ... }) } }
请求的then回调中我们可以获取到结果对象：
{ config：axios请求配置信息 data：响应体 headers：响应头信息 request：xhr请求对象 status：HTTP响应码 statusText: 状态文本信息 }
案例：请使用axios库在组件中访问https://api.i-lynn.cn/college，并传入参数page来获取指定页码的数据，随后通过之前学习过的知识点展示在视图上
拦截器
拦截器主要的作用就是拦截，用于拦截请求和响应：
- 请求拦截器
- 用于拦截请求，在请求发出去之前拦截。
- 响应拦截器
- 用于拦截响应，在收到响应之后、then之前拦截。
不管是请求拦截器还是响应拦截器，主要的好处体现在后续项目的封装中，到时候我们会对axios进行封装，这样一来，拦截器就成了全局的拦截器了。
在全局的环境下，我们可以通过拦截器做很多有用的操作，例如：
- 通过请求拦截器去设置统一的请求头
- 通过响应拦截器中去，可以在这里做错误提示
// 请求拦截器 axios.interceptors.request.use(cfg => { // 设置请求头 cfg.headers.Abc = "abcdefg" return cfg }) // 响应拦截器 axios.interceptors.response.use(res => { return res.data })
取消网络请求
在开发中还是经常容易遇到的，一般在离开组件的时候可能需要做网络请求的取消操作。在axios中取消网络请求通过cancelToken这个方式进行取消。
- 1、获取到source对象，该对象中有俩个成员属性
- cancelToken配置项要的值：token
- 后续取消请求的方法：cancel()
- 2、需要将source.token给到后续可能需要取消的网络请求的cancelToken这个配置项
- 3、在合适的时机去执行取消网络请求方法source.cancel()
综合案例：通过axios发送一个网络请求https://api.iynn.cn/ip，判断本地是否有缓存数据，如果有直接使用缓存并且取消网络请求；如果本地没有这个数据的缓存，则发起请求去获取，请求到后缓存数据。要求使用拦截器
