vue3+ts封装axios
时间: 2023-08-17 17:11:58 浏览: 51
在Vue3+TypeScript中封装Axios可以按照以下步骤进行:
1. 首先,安装Axios依赖,可以使用npm或者yarn进行安装:`npm install axios`。
2. 创建一个`request.ts`文件,用于封装Axios实例和请求函数。
3. 在`request.ts`文件中,引入Axios并创建一个实例,同时设置基地址和请求超时时间。例如:
```typescript
import axios from 'axios'
const baseURL = 'https://ilovesh.com' // 基地址
const instance = axios.create({
baseURL,
timeout: 3000 // 请求超时时间 (3秒超时)
})
export { baseURL, instance }
```
4. 在需要发送请求的地方,引入封装好的Axios实例和请求函数。例如,在`index.ts`文件中:
```typescript
import { instance } from './utils/request'
class ZJRequest {
instance: AxiosInstance
constructor() {
this.instance = instance
}
request<T>(url: string, method: string, params?: any) {
return this.instance.request<T>({
url,
method,
params
})
}
}
export default ZJRequest
```
5. 现在,你可以在Vue组件中使用封装好的Axios实例和请求函数了。例如,在组件中发送一个GET请求:
```typescript
import ZJRequest from './index'
const request = new ZJRequest()
request.request<{ data: any }>('/api/data', 'get')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error(error)
})
```
这样,你就成功封装了一个可以在Vue3+TypeScript中使用的Axios实例和请求函数。请注意,以上代码只是一个示例,你可以根据自己的需求进行修改和扩展。\[1\]\[2\]\[3\]
#### 引用[.reference_title]
- *1* [Vue3+TS封装axios](https://blog.csdn.net/qq_55928824/article/details/128548171)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [TS+Axios的封装(vue3.x环境)](https://blog.csdn.net/u011690675/article/details/130160009)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v4^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]