vue3中如何使用axios发送请求

如果我们想要在vue3中使用axios，首先需要使用命令npm i axios,然后就可以直接在想要使用的组件中使用import axios from 'axios'即可。如果觉得每次都需要写相同的地址觉得麻烦，我们可以创建一个utils文件夹，在其下面创建一个axios.ts文件，然后如下：

import axios from 'axios';

const baseURL = 'https://jsonplaceholder.typicode.com' ;

const axiosInstance = axios.create( { baseURL, } )

export default axiosInstance

这样我们就获得了一个axios实例，然后在main.ts中导入axiosInstance,再使用app.provide(’axios‘,axiosInstance)实现实例的共享。

在子组件中我们使用inject接收实例，然后就可以使用get等方法，但是在vue3的组合式api它会提醒你axios的类型未知，我们需要使用import type {AxiosInstance} from 'axios'，然后：const axios = inject('axios') as AxiosInstance 表示这是一个axios的实例，其中引入时的type不要忘记添加，不然又要被提醒了。值得提醒的是，我们获取的相应数据应该从response.data中获取。