用原生方法封装axios(get+post)

316 阅读2分钟

首先先讲一下我们需要用到的XMLHttpRequest,他是浏览器内置的一个构造函数

axios 中的 axios.get()、axios.post()、axios() 方法,都是基于 XMLHttpRequest(简称:XHR) 封装出来的

使用XMLHttpRequest发起请求四部曲

1 创建异步xhr对象
2 调用xhr.open()函数
3 调用xhr.send()函数
4 监听load事件

接下来我们可以使用以上方法封装一个函数

    function myaxios(target) {
        //   用容器承载客户带来的数据
        method = target.method//方法
        url = target.url
        data = target.data
        parmas = target.parmas
        // 函数
        finish = target.finish

        //   创建异步对象
       ** let xhr = new XMLHttpRequest()**

        // 2.发起请求
        // 2.1设置请求行
        //    开始之前,都先要得到url地址以及方法
        // get请求自带参数/get不带参数/get带参数但需要我们接(我们需要考虑这几种情况)
        if (method.toLowerCase('get') && parmas) {
            //如果get请求带参数,只能接到url的后面...
            url = url + '?' + Objtostring(parmas)

        }
        // 请求行
       ** xhr.open(method, url)**
        // 2.2设置请求头
        // 请求头(get不需要请求头,而post需要根据情况来写)
        // 一般post带参数,要么是formdata,要么是字符串,要么是对象,针对不同情况做判断
        if (method.toLowerCase('post') && data) {
            // 如果传入的是字符串
            if (typeof data == 'string') {
                **xhr.setRequestHeader**(
                    'Content-Type',
                    "application/x-www-form-urlencoded"
                )
                // 2.3请求体
               ** xhr.send(data)**
            }

            // 如果传入的是对象
            else if (typeof data == 'object') {
                xhr.setRequestHeader(
                    'Content-Type',
                    "application/JSON"
                )
                // 请求体(json对象转字符串)
                xhr.send(JSON.stringify(data))
            }

            // 如果传入的是formdata
            else {
                //formdata不需要转,因为只要是formdata就会默认添加formdata:application/multipart-formdata
                xhr.send(data)
            }
        }
        //这个是get的↓
        else {
            xhr.send(data)
        }

        // 响应
        xhr.addEventListener('load', function () {
            let result = JSON.parse(xhr.response)
            // 获得数据

            // 得到数据,然后把数据返回给客户进行使用
            finish(result)
        })
    }


    // 如果带来的使用parmas承装的一个对象,我们需要把它解析成键值对到url后面↓
    function Objtostring(obj) {
        let arr = []
        for (let key in obj) {
            arr.push(`${key}=${obj[key]}`)
        }
        return arr.join('&')  //要形成参数=参数值&参数=参数值这种形式
    }