TypeScript对比JavaScript最大的区别就是TypeScript是强类型的。这种强类型相比弱类型，可以在编译期间发现并纠正错误，降低了试错的成本（智能提示）也提升了代码的规范性。
axios封装
//http.ts
import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from 'axios'
const config = {
baseURL: /*读取配置文件*/process.env.VUE_APP_BASE_API_URL,
timeout: 10 * 1000,
withCredentials: true
};
const requestInterceptor = (config: AxiosRequestConfig): AxiosRequestConfig => {
//请求拦截器，自定义
return config;
};
const http: AxiosInstance = axios.create(config);
http.interceptors.request.use(requestInterceptor, error => Promise.reject(error))
http.interceptors.response.use(response => Promise.resolve(response), error => Promise.reject(error))
export function httpRequest<T>(config: AxiosRequestConfig): Promise<T> {
const promise = http.request<T, AxiosResponse<T>>(config);
return convertAxiosResponse(promise);
}
export function httpGet<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const promise = http.get<T, AxiosResponse<T>>(url, config);
return convertAxiosResponse(promise);
}
export function httpDelete<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const promise = http.delete<T, AxiosResponse<T>>(url, config);
return convertAxiosResponse(promise);
}
export function httpHead<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const promise = http.head<T, AxiosResponse<T>>(url, config);
return convertAxiosResponse(promise);
}
export function httpOptions<T>(url: string, config?: AxiosRequestConfig): Promise<T> {
const promise = http.options<T, AxiosResponse<T>>(url, config);
return convertAxiosResponse(promise);
}
export function httpPost<T, D>(url: string, data?: D, config?: AxiosRequestConfig): Promise<T> {
const promise = http.post<T, AxiosResponse<T>, D>(url, data, config)
return convertAxiosResponse(promise);
}
export function httpPut<T, D>(url: string, data?: D, config?: AxiosRequestConfig): Promise<T> {
const promise = http.put<T, AxiosResponse<T>, D>(url, data, config);
return convertAxiosResponse(promise);
}
export function httpPatch<T, D>(url: string, data?: D, config?: AxiosRequestConfig): Promise<T> {
const promise = http.patch<T, AxiosResponse<T>, D>(url, data, config);
return convertAxiosResponse(promise);
}
/**
* @param axiosPromise AxiosResponse<T>
*/
function convertAxiosResponse<T>(axiosPromise: Promise<AxiosResponse<T>>): Promise<T> {
return new Promise(function (resolve, reject) {
axiosPromise.then(response => {
resolve(response.data)
}).then(err => {
reject(err)
});
});
}
接口返回实体
因为是强类型的，支持泛型，所有我们可以把数据封装成一个实体类（或接口），这样参数就一目了然，类似Java中JavaBean的使用。
如果接口返回有统一的格式，如：
{
"code": 200,
"msg": "success",
"data": any
}
那么就可以定义一个Base类（或接口），data以泛型参数传入。
//api-bean.ts
export interface ApiResponse<T = any> {
code: number;
msg: string;
data: T;
}
export interface UserInfoBean {
createdAt: string;
id: number;
userId: string;
userType: string;
username: string;
}
/**
* 登录使用
*/
export interface UserLoginBean {
userId: string;
password: string;
userType: string;
}
使用示例
import {httpGet, httpPost} from "@/util/http"
import {ApiResponse, UserInfoBean, UserLoginBean} from "@/bean/api-bean";
httpGet<ApiResponse<UserInfoBean[]>>("/srs_rtc/user/getAllUserInfo")
.then((response) => {
console.log("httpGet:", response)
})
const login: UserLoginBean = {
userId: "test",
password: "1",
userType: "0"
}
httpPost<ApiResponse<UserInfoBean>, UserLoginBean>("/srs_rtc/user/userLogin", login).then(response => {
console.log("httpPost:", response)
}).then(error => {
//
})
使用的时候就有智能提示了，相比JavaScript是不是爽很多？
示例
本人刚刚入手TypeScript，如有使用不当之处，欢迎指正。
