Vue前端开发-axios对象实例创建和配置的过程

在Vue 3中，由于所有的组件都可能去请求数据，因此，针对axios模块的配置应该是全局性的，在进行axios模块的全局配置之前，需要了解axios实例的创建、配置对象和响应对象的结构内容，接下来我们分别来进行介绍。

创建axios实例

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

csharp 复制代码

// 根据配置对象创建一个axios实例
axios.create([config])

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

**需要说明的是：**多个配置对象的属性是合并的，如果在合并过程中，存在相同的属性名称，则按配置对象的优先级来执行。

接下来演示创建一个新axios实例的过程，先在src目录下创建一个名为plugins的子目录，并在子目录下添加一个名为axios的js文件，并在该文件中加入如下代码：

csharp 复制代码

import axios from "axios";

const request = axios.create({
    baseURL: "http://rttop.cn/api",
    timeout: 2000
})

在上述代码中，先导入axios模块，再调用导入模块中的create方法，创建一个自定义的axios实例对象，在创建时，配置了baseURL属性和timeout属性，其中，配置对象中baseURL属性值将会自动添加到url属性前面，除非url属性是一个绝对路径，通过该属性的配置，为axios实例传递了一个全局统一的相对URL地址。

另外，timeout属性表示请求超时的时间，单位是毫秒，如果请求的时间超过了这个指定的毫秒数，那么请求就会被中断，该属性默认值为0，表示永不超时。

配置对象结构

无论是创建实例化对象，还是发送请求，配置对象都是必须要考虑的内容，在整个axios配置对象中，url属性是必须要填写的，method属性默认值为GET方式，对象中其余常用的属性名称如下列代码所示。

csharp 复制代码

{
baseURL: "http://rttop.cn/api",
    timeout: 2000,
    url: "/",
    method: "POST",
    transformRequest: [(data, headers) => {
        console.log(data, headers)
    }],
    transformResponse: [(data) => {
        console.log(data)
    }],
    headers: {},
    params: {
        id: 123
    },
    data: {
        firstName: "tao"
    },
    responseType: "json",
    responseEncoding: "utf8",
    onUploadProgress: (progressevent => {
        console.log(progressevent)
    }),
    onDownloadProgress: (progressevent => {
        console.log(progressevent)
    })
}

针对上述配置对象中的常用属性，下面分别进行介绍：

url: 用于设置请求服务器的地址，如果设置了baseURL属性值，那么，该地址将会在baseURL属性值的后面，组合成一个新的请求地址。
method: 创建请求时使用的发送方式，默认值是GET方式。
transformRequest: 在向服务器发送数据之前，允许修改发送数据和请求头部信息，它只适用于POST、PUT和PATCH方式的请求，它的值是一个数据，且数组中函数的最后一个参数必须返回一个字符串，如Buffer实例，ArrayBuffer，FormData。
transformResponse: 在传递给then或catch之前，允许修改响应数据，可以对响应的返回数据做任意格式的调整，最后返回一个处理后数据。
headers: 可以自定义请求的头部信息，包括Authorization、Content-Type、User-Agent等发送请求时相关的信息。
params: 它是一个与请求地址一起发送的URL参数，因此，必须是一个简单的对象或一个URLSearchParams 对象。
data: 它是一个作为请求体被发送的数据，只适用于POST、DELETE 、PUT和PATCH方式的请求，在没有设置transformRequest属性时，浏览器请求时，它的类型是FormData、File和Blob中之一。
responseType: 用于设置响应数据的类型，可以是arraybuffer、 document、 json和text、stream类型中的一种，默认类型是json。
responseEncoding: 用于设置响应数据的编码格式，默认值为utf8编码格式。
onUploadProgress: 用于响应浏览器上传文件时的进度事件，如果上传文件时需要处理进度数据，可以设置该事件。
onDownloadProgress: 用于响应浏览器下载文件时的进度事件，如果下载文件时需要获取进度数据，可以添加该事件。