封装简易axios

   <button class="reg-btn">注册</button>
    <script>
        function myAxios(config) {
            return new Promise((resolve, reject) => {
                if (config.params) {
                    const obj = new URLSearchParams(config.params)
                    config.url += `?${obj.toString()}`
                }
                const xhr = new XMLHttpRequest()
                xhr.open(config.method || 'GET', config.url)
                xhr.addEventListener('loadend', () => {
                    if (xhr.status >= 200 && xhr.status < 300) {
                        resolve(JSON.parse(xhr.response))
                    }
                    reject(new Error(xhr.response))
                })
                if (config.data) {
                    //设置请求头'Content-Type', 'application/json'
                    xhr.setRequestHeader('Content-Type', 'application/json')
                        //请求体携带json字符串
                    xhr.send(JSON.stringify(config.data))
                } else {
                    xhr.send()
                }
            })
        }

        document.querySelector('.reg-btn').addEventListener('click', () => {
            myAxios({
                url: 'r',
                method: 'post',
                data: {
                    username: 'mingming12333',
                    password: '123456'
                }
            }).then(res => {
                console.log(res);
            }).catch(err => {
                // console.log(err);
            })
        })
    </script>
封装简易axios的方法如下: 1. 首先,创建一个axios实例。我们可以使用axios.create()方法来创建一个实例,这样我们可以对实例进行配置,比如设置基础请求地址、请求超时时间、是否携带cookie等。 示例代码: ```javascript const serviceAxios = axios.create({ baseURL: "", // 基础请求地址 timeout: 10000, // 请求超时设置 withCredentials: false, // 跨域请求是否需要携带cookie }); ``` 2. 接下来,我们可以使用实例来发起请求。axios实例有get、post等方法,可以根据不同的请求类型来发送请求。比如,可以使用实例的get方法发送GET请求,使用实例的post方法发送POST请求。 示例代码: ```javascript serviceAxios.get("/api/data") .then(response => { // 处理请求成功的响应 console.log(response.data); }) .catch(error => { // 处理请求失败的错误 console.error(error); }); serviceAxios.post("/api/data", { name: "John", age: 25 }) .then(response => { // 处理请求成功的响应 console.log(response.data); }) .catch(error => { // 处理请求失败的错误 console.error(error); }); ``` 3. 除了基本的GET和POST请求,封装简易axios还可以包括其他常见的业务需求,比如处理请求拦截、响应拦截、错误处理等。 示例代码: ```javascript // 请求拦截器,可以在发送请求前进行一些处理,比如添加请求头 serviceAxios.interceptors.request.use(config => { // 在请求发送之前做一些处理 config.headers["Authorization"] = "Bearer token"; return config; }, error => { // 请求错误时的处理 console.error(error); return Promise.reject(error); }); // 响应拦截器,可以在接收到响应后进行一些处理,比如统一处理错误提示 serviceAxios.interceptors.response.use(response => { // 在接收到响应后做一些处理 return response; }, error => { // 响应错误时的处理 console.error(error); return Promise.reject(error); }); ``` 综上所述,封装简易axios的方法包括创建axios实例、使用实例发送请求以及添加请求拦截、响应拦截等处理。这样可以更好地全局控制所有请求的相关配置,提高代码的可维护性和复用性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值