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

第9章接口;教学内容;知识目标;知识点预览;Axios模块可以用于浏览器和node框架中，在浏览器中，它创建XHR对象，在node中它创建http请求；它支持Promise对象中的API，可参拦截、转换、响应和取消请求，并自动转成JSON格式数据，也支持跨站请求伪造简称“XSRF”。

在Vue3中，如果需要发送异步请求获取数据，通常使用Axios模块，使用之前必须先安装该模块，可以在指定项目的根目录下局部安装。;安装axios模块的目的是使用该模块发送请求，获取请求返回的数据，使用该模块时，可以传递相关配置项来创建请求，格式有以下几种：

axios(config)

上述方法中，只有一个config配置对象，请求时的全部配置项都可以通过该对象进行配置，包括url，data，method等

axios(url[,config])

上述方法是一种简写的格式，使用这种格式时，默认method是GET方式，通常只用于以GET方式快速请求数据时使用

别名请求

为了更加方便开发者的使用，可以直接使用请求的别名来完成请求，在axios中，所有支持的请求方法都提供了别名

;虽然在Vue3项目中安装了axios模块后，就可以在任意的组件中导入它，并使用它请求数据，但考虑到代码的复用性和后期维护的方便，通常自己会创建一个axios实例，并配置这个实例，用于整个项目中的全部数据请求，如下所示。

//根据配置对象创建一个axios实例

axios.create([config])

上述格式代码中，config是一个可选项的配置对象，如果在使用这个实例时，还有指定的配置对象，那么，指定的配置对象将会与实例的配置对象进行合并，并按照配置的优先级来执行，配置对象的优先级执行顺序如下图所示：

;无论是创建实例化对象，还是发送请求，配置对象都是必须要考虑的内容，在整个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}fromvue

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实例对象后，请求数据就变得十分简单，只需在组件中，通过this这个对象，调用$http属性，就可以获取配置好的axios实例化对象，再通过这个对象发送异步请求，并在then函数中获取响应的数据，下面通过一个完整的实例来演示请求过程。;localStorage是HTML5标准中新增的一个用于数据缓存的对象，它的最大缓存体积为5M的字符内容，它是一个永久性的浏览器缓存对象，除非人为删除，否则，一直存在于浏览器中，即使是关闭浏览器后，再次打开，缓存对象依然存在于浏览器中。

localStorage有三个常用的操作方法，分别用于设置、读取和删除指定名称的缓存内容。

//1.设置一个key值为cacheData的localStorage对象

localStorage.setItem(cacheData,tgrong);

//2.获