《前端开发框架》课件——第7章 网络请求和状态管理.pptxVIP

7.1.2安装Axios先定一个小目标！掌握Axios的安装方法，能够在项目中安装Axios

7.1.2安装AxiosAxios的安装方式主要有两种，一种是通过标签引入，另一种是使用包管理工具安装。通过标签引入使用包管理工具安装使用Unpkg或jsDelivr的内容分发网络服务提供的Axios文件，也可以将Axios文件下载至本地再引入。使用npm或yarn包管理工具安装Axios。

7.1.2安装Axios1.通过标签引入①使用Unpkg的CDN服务引入Axios。scriptsrc=/axios/dist/axios.min.js/script②使用jsDelivr的CDN服务引入Axios。scriptsrc=/npm/axios/dist/axios.min.js/script注意

7.1.2安装Axios2.使用包管理工具安装使用npm或yarn包管理工具安装Axios。#使用npm包管理工具安装npminstallaxios--save#使用yarn包管理工具安装yarnaddaxios--save

7.1.2安装Axios在Vue3项目中使用yarn安装Axios打开命令提示符，切换到D:\vue\chapter07目录，使用yarn创建一个名称为my-axios的项目。步骤1yarncreatevite--templatevue项目名称步骤2步骤3

7.1.2安装Axios在Vue3项目中使用yarn安装Axios在命令提示符中，切换到my-axios目录，为项目安装所有依赖。步骤1cdmy-axiosyarn步骤2步骤3

7.1.2安装Axios在Vue3项目中使用yarn安装Axios在my-axios目录下使用yarn安装Axios。步骤1yarnaddaxios--步骤2步骤3项目运行时依赖@1.2.1表示安装Axios的版本号

7.1.2安装Axios在Vue3项目中使用yarn安装Axios使用VSCode编辑器打开my-axios目录，执行命令启动服务。yarndev步骤1步骤2步骤3项目启动后，会默认开启一个本地服务，地址为:5173/。

7.1.3使用Axios先定一个小目标！掌握Axios的使用方法，能够在项目中使用Axios

7.1.3使用AxiosAxios安装完成后，如何使用呢？

7.1.3使用Axios在项目中使用Axios时，通常的做法是先将Axios封装成一个模块，然后在组件中导入模块。

7.1.3使用Axios①将Axios封装成模块，创建src\axios\request.js文件。importaxiosfromaxiosconstrequest=axios.create({timeout:2000})exportdefaultrequest②在组件中导入模块，在src\App.vue文件中导入模块。importrequestfrom./axios/request.js

7.1.3使用AxiosAxios常用的请求方式：get请求和post请求。①使用Axios发送get请求的基本语法格式。②使用Axios发送post请求的基本语法格式。request({request({url:请求路径,method:get,params:{参数}}).then(res={console.log(res)}).catch(error={console.log(error)})url:请求路径,method:post,data:{参数}}).then(res={console.log(res)}).catch(error={console.log(error)})

7.1.4Axios图书列表案例先定一个小目标！掌握Axios图书列表案例的实现，能够使用Axios完成网络请求

7.1.4Axios图书列表案例使用Axios实现图书列表案例，图书列表页面初始效果如下图所示。

7.1.4Axios图书列表案例单击上图中“请求数据”按钮，数据请求成功页面效果如下图所示。

7.1.4Axios图书列表案例图书列表案例的实现分为以下2步。模拟数据请求数据12

7.1.4Axios图书列表案例模拟数据：为了方便演示，使用mockjs模拟后端接口，下面讲解如何安装mockjs，以及编写模拟数据和配置模拟数据的相关信息。

7.1.4Axios图书列表案例使用mockjs模拟后端接口在my-axios目录下，使用yarn安装mockjs。步骤1步骤2yarnaddmockjs@1.1.0--save步骤3步骤4

7.1.4Axios图书列表案例使