Vue.js 超详细入门与项目实战（微课视频版）课件 第09章 接口

第9章接口课件V1.0

教学内容第一节

接口介绍第二节全局配置第三节

数据缓存知识目标教学目标理解和掌握axios对象安装的方法掌握axios对象实例创建和配置的过程理解掌握使用axios对象请求数据的方法知识点预览#节知识点难点重点应用9C09-01接口介绍1、初识和安装Axios模块

2、使用Axios模块C09-02全局配置1、创建axios实例2、配置对象结构3、默认配置和响应结构4、全局配置axiosC09-03数据缓存1、请求数据2、缓存数据3、缓存优化

Axios模块可以用于浏览器和node框架中，在浏览器中，它创建XHR对象，在node中它创建http请求；它支持Promise对象中的API，可参拦截、转换、响应和取消请求，并自动转成JSON格式数据，也支持跨站请求伪造简称“XSRF”。

在Vue3中，如果需要发送异步请求获取数据，通常使用Axios模块，使用之前必须先安装该模块，可以在指定项目的根目录下局部安装。初识和安装Axios模块

安装axios模块的目的是使用该模块发送请求，获取请求返回的数据，使用该模块时，可以传递相关配置项来创建请求，格式有以下几种：axios(config)上述方法中，只有一个config配置对象，请求时的全部配置项都可以通过该对象进行配置，包括url，data，method等axios(url[,config])上述方法是一种简写的格式，使用这种格式时，默认method是GET方式，通常只用于以GET方式快速请求数据时使用别名请求为了更加方便开发者的使用，可以直接使用请求的别名来完成请求，在axios中，所有支持的请求方法都提供了别名使用Axios模块虽然在Vue3项目中安装了axios模块后，就可以在任意的组件中导入它，并使用它请求数据，但考虑到代码的复用性和后期维护的方便，通常自己会创建一个axios实例，并配置这个实例，用于整个项目中的全部数据请求，如下所示。//根据配置对象创建一个axios实例axios.create([config])上述格式代码中，config是一个可选项的配置对象，如果在使用这个实例时，还有指定的配置对象，那么，指定的配置对象将会与实例的配置对象进行合并，并按照配置的优先级来执行，配置对象的优先级执行顺序如下图所示：创建axios实例请求的config实例的defaults模块库的默认值

无论是创建实例化对象，还是发送请求，配置对象都是必须要考虑的内容，在整个axios配置对象中，url属性是必须要填写的，method属性默认值为GET方式。

配置对象结构

配置对象可以在发送请求和实例化axios对象时进行配置，也可以通过defaults对象，设置默认的配置值，该配置值的优先级高于模块库的默认值，将会作用于每一个请求，除非在请求时，通过config对象进行变更。

创建一个axios实例后，也可以修改设置的默认配置。

除了设置和修改默认配置之外，发送一次请求后，无论成功与失败，都将会返回响应的数据，并通过then或catch函数来获取。默认配置和响应结构

在vue3中，可以使用app.config.globalProperties来注册全局属性的对象，其中app是通过createApp()方法创建后的Vue实例化对象，它替代了Vue2中的Vtotype方式，无论是Vue3中的组件式API还是选项式API，都可以轻松访问到它的值。

如果需要在Vue3项目中全局配置axios对象，只需要在main.js文件中添加如下代码：import{createApp}from'vue'importAppfrom'./App.vue'importGlobalfrom'./components/ch6/Global'importrouterfrom'./router/index'importrequestfrom'./plugins/axios';letapp=createApp(App);app.config.globalProperties.$http=request;ponent("Global",Global);app.use(router);app.mount('#app')

全局配置axios

配置好全局性的axios实例对象后，请求数据就变得十分简单，只需在组件中，通过this这个对象，调用$http属性，就可以获取配置好的axios实例化对象，再通过这个对象发送异步请求，并在then函数中获取响应的数据，下面通过一个完整的实例来演示请求过程。请求数据

localStorage是HTML5标准中新增的一个用于数据缓存的对象，它的最大缓存体积为5M的字符内容，它是一个永久性的浏览器缓存对象，除非人为删除，否则，一直存在于浏览器中，即使是关闭浏览器后，再次打开，缓存对象依然存在于浏览器中。

localStorage有三个常用的操作方法，分别用于设置、读取和删除指定名称的缓存内容。//1.设置一个key值为cacheData的localStorage对象localStorage.setItem("cacheData","tgrong");//2.获取key值为cacheData的localStorage对象localStorage.getItem("cacheData");//3.删除key值为cacheData的localStorage对象localStorage.removeItem("cacheData"))缓存数据效果缓存数据

虽然缓存数据有利用减轻服务端的频繁请求，优化用户的数据请求体验，但如果一直使用缓存的数据，会使信息过于陈旧，无法满足数据即时性的需求，为了解决这个问题，需要对缓存做使用