Vue前端开发-axios对象安装的方法

在Vue3中，通过安装Axios模块来实现数据的异步请求和接收，Axios模块是一个基于Promise网络请求库，可以用于服务端和浏览器中，当用于浏览器时，本质是将XHR对象进行了封装，因此，它的核心依然是XHR对象，接下来详细介绍该模板的使用。

初识和安装Axios模块

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

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

安装成功后，在项目的package.json中，可以查看到安装成功后的模块版本，如下图9-3所示。

当然，除了在项目根目录下的局部安装外，也可以在任意目录下进行全局安装，只需要在安装axios模块时，添加一个-g参数即可，如下图9-4所示。

无论是全局安装，还是局部安装，只要安装成功，就可以在项目中直接引入axios模块，并通过该模块发送异步请求，接收响应数据。

使用Axios模块

安装axios 模块的目的是使用该模块发送请求，获取请求返回的数据，使用该模块时，可以传递相关配置项来创建请求，格式有以下几种：

axios(config)

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

csharp 复制代码

axios({
	method: 'POST',
	url: 'http://api.com',
	data: {
		firstName: 'tao',
		lastName: 'guorong'
	}
})

上述代码将以POST方式，向指定的url地址发送了两个名称分别为"firstName"和"lastName"的数据，发送后，可以通过链式写法，并调用then函数获取发送请求后，服务端响应后返回的数据，如下代码所示：

csharp 复制代码

axios({...省略配置对象内容...}).then(res=>{
	console.log("返回数据",res)
})

在上述代码中，then函数中的res对象，就是服务端响应后返回的内容，可以将该内容赋值给组件中的变量，再将变量显示在视图中，则完成视图显示请求数据的功能。

axios(url [,config])

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

csharp 复制代码

axios('http://api.com').then(res=>{
	console.log("返回数据",res)
})

别名请求

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

csharp 复制代码

// 以GET 方式请求数据
axios.get(url[, config]);
// 以POST方式请求数据
axios.post(url[, config])
// 根据请求删除指定数据
axios.delete(url[, config])
// 根据配置对象创建一个axios实例
axios.create([config])

需要说明的是：如果使用了别名，那么，url，method，data这些属性不需要在配置对象config中指定，极大方便了代码的编写，因此，这种格式也成为主流数据请求的格式。