526互联

使用Promise改造封装好的AJAX

发布时间 2023-03-30 14:05:32作者: 钟离专属

使用Promise改造封装好的AJAX

修改index.js

import Ajax from 'ajax.js';
import { ERROR_ABOUT } from './封装AJAX4';
import { ERROR_TIMEOUT } from './封装AJAX4';
import { ERROR_REQUESTE } from './封装AJAX4';
import { ERROR_HTTP_CODE } from './封装AJAX4';

const ajax = (url,option) => {
    //return new Ajax(url,option).getXHR();
    let xhr;
    const p = new Promise((resolve,reject) => {
        xhr = new Ajax(url,{
            ...option,
            ...{
                success(response){
                    resolve(response);
                },
                httpCodeError(status){
                    reject({
                        type: ERROR_HTTP_CODE,
                        text:'${ERROR_HTTP_HTTP_CODE_TEXT}:{status}'
                    });
                },
                error(){
                    reject({
                        type: ERROR_REQUESTE,
                        text:ERROR_REQUESTE_TEXT
                    });
                },
                abort(){
                    reject({
                        type: ERROR_ABOUT,
                        text:ERROR_ABOUT_TEXT
                    });
                },
                timeout(){
                    reject({
                        type: ERROR_TIMEOUT,
                        text:ERROR_TIMEOUT_TEXT
                    });
                },
            }
        }).getXHR();
    });
    p.xhr=xhr;
    p.ERROR_HTTP_CODE=ERROR_HTTP_CODE;
    p.ERROR_REQUESTE=ERROR_REQUESTE;
    p.ERROR_TIMEOUT=ERROR_TIMEOUT;
    p.ERROR_ABOUT=ERROR_ABOUT;

    return p;
};

const get = (url,option) => {
    return new ajax(url,{...option,method:'GET'});
}; 

const getJSON = (url,option) => {
    return new ajax(url,{...option,method:'GET',responseType:'json'});
};   

const POST = (url,option) => {
    return new ajax(url,{...option,method:'POST'});
};   

export {ajax,get,getJSON,POST};

 

修改defaults.js

export const HTTP_GET = 'GET';
export const CONTENT_TYPE_FROM_URLENCODED='application/x-www-form-urlencoded';
export const CONTENT_TYPE_JSON='application/json';

export const ERROR_HTTP_CODE=1;
export const ERROR_HTTP_CODE_TEXT='HTTP状态码异常';

export const ERROR_REQUESTE=2;
export const ERROR_REQUEST_TEXT='请求被阻止';

export const ERROR_TIMEOUT=3;
export const ERROR_TIMEOUT_TEXT='请求超时';

export const ERROR_ABOUT=2;
export const ERROR_ABOUT_TEXT='请求终止';

 

新建html

  

使用Promise改造封装好的AJAX.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <title>使用Promise改造封装好的AJAX</title>

    </head>
    <body>
        <script type="module">
            import {ajax,get,getJSON,post}
            from '../封装AJAX3';

            const url = 'https://www.imooc.com/api/http/search/suggest?wirds=js';

            const p = getJSON(url,{
                params:{username:'alex'},
                data:{age:18},
            });

            const{ ERROR_HTTP_CODE,ERROR_REQUESTE,ERROR_TIMEOUT,ERROR_ABOUT}=p;
            p.then(Response=>{
                console.log(Response);
            }).catch(err=>{
                //console.log(err);
                switch(err.type){
                case ERROR_HTTP_CODE:
                    console.log(err.text);
                    break;
                    case ERROR_REQUESTE:
                    console.log(err.text);
                    break;
                    case ERROR_TIMEOUT:
                    console.log(err.text);
                    break;
                    case ERROR_ABOUT:
                    console.log(err.text);
                    break;
                }
            }); 

           
            
        </script>
    </body>
</html>