ajax 封装原生请求

2019-04-27  本文已影响0人  237房间
<script>
         function ajax(options){
             // 定义一个操作对象
            var pramas = {
                url:'',
                type: 'get',
                data: {},
            success: function (data) {},
            error: function (err) {},
            }
            // 对象属性覆盖
            options = Object.assign(pramas, options)
            // 传入了要请求的地址才会开始做其他的事情
            if(options.url){
                // 拿到请求对象
                var xhr = XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP")
                var url = options.url,    //  htpp://www.baidu.com
                    type = options.type.toUpperCase(), // GET
                    data = options.data,    // {name:"kk",age:12}
                    dataArr = [];            // []
                // 遍历data对象
                for(let key in data){
                    let value = key + '='+ data[key]
                    dataArr.push(value)
                }
                // dataArr = ["name=kk","age=12"]

                // 判断是否为get方式请求
                if(type === "GET"){
                    url = url + "?" + dataArr.join('&')
                    // url = http://www.baidu.com?name=kk&age=12
                    // 初始化请求
                    xhr.open(type, url, true)
                    // 发送请求
                    xhr.send()
                }
                // 判断是否为post请求方式
                if(type === "POST"){
                    // 初始化一个请求
                    xhr.open(type,url, true)

                    // 设置请求头
                    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
                    
                    // 发送请求
                    xhr.send(dataArr.join('&'))
                }

                // 监听后台返回过来的数据
                xhr.onreadystatechange = function(ev){
                  // console.log(ev)
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {  // 304未修改
              // 如果请求成功之后,回调我们的success函数
                            options.success(xhr.responseText)
          }else {
                          // 如果请求失败之后,回调我们的error函数
              options.error(xhr.responseText)
          }
                }
            }
        }
    
         ajax({
             url: "https://easy-mock.com/mock/5cb68c827ccf7c060b2270da/api/newgoods",
             success:function(res){
                 console.log("这里是ok的")
                 console.log(res)
             }
         })
     
    </script>
上一篇下一篇

猜你喜欢

热点阅读