封装axios完整代码
时间: 2023-11-09 22:01:58 浏览: 43
好的,以下是封装axios的完整代码:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000,
});
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
return config;
},
(error) => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
instance.interceptors.response.use(
(response) => {
// 对响应数据做点什么
return response.data;
},
(error) => {
// 对响应错误做点什么
return Promise.reject(error);
}
);
export default instance;
```
这是一个基本的封装axios的代码,其中包括了设置基础URL、超时时间、请求拦截器和响应拦截器等功能。
相关问题
vue封装axios代码
我可以给你看一下Vue封装Axios的代码,你可以复制并使用它:import axios from 'axios';export default {
install(Vue) {
// 创建axios实例
const instance = axios.create({
baseURL: 'http://www.example.com',
timeout: 1000
}); // 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; // 请求拦截器
instance.interceptors.request.use(config => {
// 这里可以自定义一些config 配置 return config;
}, err => {
// 请求出错
return Promise.reject(err);
}); // 响应拦截器
instance.interceptors.response.use(response => {
return response;
}, err => {
// 响应错误
return Promise.reject(err);
}); // 将axios实例添加到Vue的原型上
Vue.prototype.$http = instance;
}
};
typescript封装axios代码
好的,以下是一个简单的 TypeScript 封装 Axios 的代码示例:
```typescript
import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
class HttpClient {
private readonly instance: AxiosInstance;
constructor(baseURL: string, headers?: Record<string, string>) {
this.instance = axios.create({
baseURL,
headers,
});
this.instance.interceptors.response.use(this.handleSuccess, this.handleError);
}
private handleSuccess(response: AxiosResponse) {
return response.data;
}
private handleError(error: any) {
console.error(error);
return Promise.reject(error);
}
public get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
return this.instance.get<T>(url, config);
}
public post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.post<T>(url, data, config);
}
public put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T> {
return this.instance.put<T>(url, data, config);
}
public delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T> {
return this.instance.delete<T>(url, config);
}
}
export default HttpClient;
```
这个类封装了 Axios 的常用 HTTP 方法,可以通过传入 baseURL 和 headers 来创建一个实例。在构造函数中,我们还添加了一个响应拦截器,用于处理成功和失败的响应。