面向对象ajax函数的封装

Posted 2021-06-20 贪吃ღ大魔王

面向对象ajax函数的封装

1 提取参数,进行穿递
2 找到get和post异同点
一样的地方公用 不一样的区别处理

    class axios {
            static get(url, data, cb) {
                axios.http('get', url, data, cb);
            }
            static post(url, data, cb) {
                axios.http('post', url, data, cb);
            }
            static http(type, url, data, cb) {
            // 参数样式   name=zs&age=18
                let param = '';
                for (let attr in data) {
                //console.log(attr, data[attr]);
                    param += attr + '=' + data[attr] + '&';
                }
                param = param.slice(0, param.length - 1);
                let xhr = new XMLHttpRequest;
                // 设置请求
                url = type == 'get' ? url + '?' + param : url;
                xhr.open(type, url);
                 // 设置请求头
                type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')
                 // 发送请求
                xhr.send(type == 'post' && param);
                // 监听请求
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status == 200) {
                            cb(xhr.response);
                        }
                    }
                }
            }
        }

  axios.get('./ajax.php', { name: 'zs', age: 18 }, (res) => {
            console.log(111);

        })
        axios.post('./ajax.php', {
            name: 'zs', age: 18
        }, (res) => {
            console.log(999);

        })

实现：

---

promise对封装的ajax改造：

 class axios {

      static get(url, data, cb) {
        return axios.http('get', url, data, cb);
      }
      static post(url, data, cb) {
        return axios.http('post', url, data, cb)
      }
      static http(type, url, data, cb) {
        return new Promise(function (resolve, reject) {
          // 参数样式   name=zs&age=18
          let param = '';
          for (let attr in data) {
            //console.log(attr, data[attr]);
            param += attr + '=' + data[attr] + '&'
          }
          param = param.slice(0, param.length - 1);

          // console.log(param);
          // return;
          let xhr = new XMLHttpRequest();
          // 设置请求
          url = type == 'get' ? url + '?' + param : url;
          // console.log(url);


          xhr.open(type, url);
          // 设置请求头
          type == 'post' && xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')

          // 发送请求
          xhr.send(type == 'post' && param);

          // 监听请求
          xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
              if (xhr.status == 200)
                //  console.log(xhr.response);
                // cb(xhr.response);
                resolve(xhr.response)
              else
                reject('服务器挂了....')
            }
          }
        })

      }
    }

    axios.get('./12-server.php', {
      name: 'zs',
      age: 18
    }).then(res => {
      console.log(res);

    }).catch(res => {
      console.log(res);

    })