// 堆代码 duidaima.com const inst = axios.create({ baseURL: 'https://example.com/' }) inst.interceptors.response.use(response => { if (response.status === 200) { return response.data } throw new Error(response.status) }) interface Resp { id: number } inst.get<Resp>('/xxx').then(result => { data.data })不知道Axios是故意的还是忽略了。在上面发起的GET请求中,响应数据结果的类型一直是axios.AxiosResponse<Resp>,但是我们在响应拦截器中返回了response.data。这导致陷入混乱的响应数据类型。
// axios <template> <div v-if="loading">Loading...</div> <div v-else-if="error" class="error"> {{ error.message }} </div> <div v-else>{{ data }}</div> </template> <script setup> import axios from 'axios'; import { ref, onMounted } from 'vue'; const loading = ref(false); const error = ref(null); const data = ref(null); const requestData = () => { loading.value = true; axios.get('http://xxx/index').then(result => { data.value = result; }).catch(e => { error.value = e; }).finally(() => { loading.value = false; }); } onMounted(requestData); </script> // alova <template> <div v-if="loading">Loading...</div> <div v-else-if="error" class="error"> {{ error.message }} </div> <div v-else>{{ data }}</div> </template> <script setup> import { createAlova, useRequest } from 'alova'; const pageData = createAlova({ baseURL: 'http://xxx' }).Get('/index'); const { loading, data, error } = useRequest(pageData); </script>在axios中,你需要创建相应的请求状态并自行维护,而Alova为你接手了这项工作。
压缩状态下的Alova只有4kb+,只有Axios的30%+
interface Resp { id: number } const pageData = createAlova({ baseURL: 'http://xxx' }).Get<Resp>('/index'); const { data, loading, error, onSuccess, send } = useRequest(pageData); onSuccess(event => { console.log(event.data); }); const handleClick = async () => { const data = await send(); }至此,相对于传统的Promise风格的请求库,你可能对alova的强大有了初步的了解。
// axios axios.get('/index', { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, params: { userId: 1 } }); // alova const todoListGetter = alovaInstance.Get('/index', { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, params: { userId: 1 } }); // axios axios.post('/login', { username: 'xxx', password: 'ppp' }, { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, params: { userId: 1 } }); // alova const loginPoster = alovaInstance.Post('/login', { username: 'xxx', password: 'ppp' }, { headers: { 'Content-Type': 'application/json;charset=UTF-8' }, params: { userId: 1 } });3.2 高性能寻呼请求策略