封装axios
为了方便调用, 因此对axios
作了封装
代码:
import axios from "axios";
import { AxiosRequestConfig } from "axios";
export async function request(config: AxiosRequestConfig) {
// 加载中
// 请求数据
return axios
.request(config)
.then((res) => {
// 请求成功返回
// 取消 加载中
if (!res.data) {
throw new Error("请求错误");
}
// 提示msg的信息
// res.data 是 axios 包装的 AxiosResponse ,再 .data
// 才是你自己定义的 ResponseData;另外尽可能用 Promise.resolve 包裹起来,
// 以防 polyfill 时出现兼容问题。
return Promise.resolve(res.data);
})
.catch((e) => {
console.error(e);
// 请求错误
// 取消 加载中
// 异常捕捉后被你吞了,相当于返回了 Promise;所以需要继续向上抛出。
return Promise.reject(e);
});
}
使用时:
import { request } from "@/utils/request";
// 注意使用这种方法声明, 不能直接为字符串
const method: Method = "GET";
const getData = () => {
const config = {
url: "http://localhost:8080/data/review/cards.json",
method,
params,
};
// IResponse 是返回类型的接口, 内部使用泛型指定ICard[]
// any对应的是data, 由于为get请求, 所以为any
request, any>(config).then((response) => {
if (response.data) {
data.value = response.data;
}
});
};