The request library umi-request intro

1. UMI-REQUEST
UMI-REQUEST

2. OUTLINE
OUTLINE
umi-request vs axios
the core conception in umi-request
working principle in umi-request
umi-request's execute process
practice in umi-request

3. UMI-REQUEST VS AXIOS/FETCH
UMI-REQUEST VS AXIOS/FETCH

4. FETCH VS XHR
FETCH VS XHR
Pros
promise rst
isomorphic(xhr and http in axios)
Cons
fetch can not abort and terminate or
implement onTimeout functionality(Can be
achieved with the experimental feature
AbortController)
no upload and download progress

5. XHR
XHR
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';
xhr.onload = function() {
console.log(xhr.response);
};
xhr.onerror = function() {
console.log("Oops, error");
};
xhr.send();

6. FETCH
FETCH
fetch(url).then(function(response) {
return response.json();
}).then(function(data) {
console.log(data);
}).catch(function(e) {
console.log("Oops, error");
});

7. THE CORE CONCEPTION IN UMI-REQUEST
THE CORE CONCEPTION IN UMI-REQUEST
Onion model**
Middleware*
interpreter
ErrorHandler

8. ONION MODEL
ONION MODEL

9. MIDDLEWARE
MIDDLEWARE

10. WORKING PRINCIPLE IN UMI-REQUEST
WORKING PRINCIPLE IN UMI-REQUEST
The core code
working process

11. REQUEST INTERCEPTOR
REQUEST INTERCEPTOR

12. PRESETS MIDDLEWARES
PRESETS MIDDLEWARES

13. THE CORE FETCH MIDDLEWARES
THE CORE FETCH MIDDLEWARES

14. THE INVOKE ORDER OF MIDDLEWARES
THE INVOKE ORDER OF MIDDLEWARES

15. DO REQUEST
DO REQUEST

16. UMI-REQUEST'S EXECUTE PROCESS
UMI-REQUEST'S EXECUTE PROCESS

17. PRACTICE IN UMI-REQUEST
PRACTICE IN UMI-REQUEST
AXIOS MIDDLEWARE
AXIOS MIDDLEWARE

18. CANCELLATION MIDDLEWARE
CANCELLATION MIDDLEWARE

20. RECAP
RECAP
umi-request uses fetch instead of xhr so progress
and true cancellation are not supported natively.
umi-request strings the entire request process
through the promise and onion model, the execute
order is req-interceptors -> custom middleware ->
default middleware -> global middleware -> core
middleware -> response interceptor(core fetch
middleware) -> errorHandler(any promise before
errorHandler reject will enter).
The extensions of umi-request are recommended
to be extended through Middleware. Reason: pure,
easy to test.

21. After replacing the core Middleware, the logic of
response interceptors needs to be compatible.