手写事件总线函数和 axios 函数

浅浅的花香味﹌ 2022-09-07 04:58 172阅读 0赞

#### 一、事件总线 ####

1.  事件总线，如下所示：

*  `eventBus`，包含所有功能的事件总线对象
 *  `eventBus.on`，绑定事件监听
 *  `eventBus.emit`，分发事件
 *  `eventBus.off`，解绑指定事件名的事件监听，如果没有指定解绑所有

1.  事件总线的实现，代码如下所示：

export const eventBus = { 
      // 保存类型与回调的容器
      callbacks: { }
    }
    
    // 绑定事件
    eventBus.on = function (type, callback) { 
      // 判断
      if (this.callbacks[type]) { 
        // 如果 callbacks 属性中存在该类型事件
        this.callbacks[type].push(callback);
      } else { 
        // 如果 callbacks 属性中不存在该类型事件
        this.callbacks[type] = [callback];
      }
    }
    
    // 触发事件
    eventBus.emit = function (type, data) { 
      // 判断
      if (this.callbacks[type] && this.callbacks[type].length > 0) { 
        // 遍历数组
        this.callbacks[type].forEach(callback => { 
          // 执行回调
          callback(data);
        });
      }
    }
    
    // 事件的解绑
    eventBus.off = function (eventName) { 
      // 若传入了 eventName 事件类型
      if (eventName) { 
        // 只是删除了 eventName 对应的事件回调
        delete this.callbacks[eventName];
      } else { 
        this.callbacks = { };
      }
    }

1.  手写实现事件总线的应用，代码如下所示：

//eventBus
    eventBus.on('login', data => { 
        console.log( data + '用户已经登录');
    });
    
    eventBus.on('login', data => { 
        console.log( data + '登录数据已经写入');
    });
    
    eventBus.on('logout', data => { 
        console.log( data + '退出登录');
    });
    //触发触发
    // setTimeout(() => { 
    // eventBus.emit('login', '张三');
    // }, 2000)
    
    //解绑事件
    // eventBus.off('login');
    eventBus.off();
    
    console.log(eventBus);

#### 二、axios 函数 ####

1.  `axios` 函数，发送请求。
2.  `axios` 函数的实现，代码如下所示：

export function axios ({ method, url, params, data}) { 
      // 方法转为大写
      method = method.toUpperCase();
      // 返回值
      return new Promise((resolve, reject) => { 
        // 1. 创建对象
        const xhr = new XMLHttpRequest();
        // 2. 初始化
        // 处理 params 对象 a=100&b=200
        let str = '';
        for(let k in params) { 
          str += `${ k}=${ params[key]}&`;
        }
        str = str.slice(0, -1);
        xhr.open(method, url+'?'+str);
        // 3. 发送
        if (method === 'POST' || method === 'PUT' || method === 'DELETE') { 
          // Content-type mime类型设置
          xhr.setRequestHeader('Content-type','application/json');
          // 设置请求体
          xhr.send(JSON.stringify(data));
        } else { 
          xhr.send();
        }
        // 设置响应结果的类型为 JSON
        xhr.responseType = 'json';
        // 4. 处理结果
        xhr.onreadystatechange = function () { 
          if (xhr.readyState === 4) { 
            // 判断响应状态码 2xx
            if (xhr.status >= 200 && xhr.status < 300) { 
              // 成功的状态
              resolve({ 
                status: xhr.status,
                message: xhr.status,
                body: xhr.response
              });
            } else { 
              reject(new Error('请求失败，状态码为' + xhr.status));
            }
          }
        }
      });
    }
    
    
    axios.get = function (url, options) { 
      // 发送 AJAX 请求 GET
      let config = Object.assign(options, { method: 'GET', url: url});
      return axios(config);
    }
    
    axios.post = function (url, options) { 
      // 发送 AJAX 请求 POST
      let config = Object.assign(options, { method: 'POST', url: url});
      return axios(config);
    }
    
    axios.put = function (url, options) { 
      // 发送 AJAX 请求 PUT
      let config = Object.assign(options, { method: 'PUT', url: url});
      return axios(config);
    }
    
    axios.delete = function (url, options) { 
      // 发送 AJAX 请求 DELETE
      let config = Object.assign(options, { method: 'DELETE', url: url});
      return axios(config);
    }

1.  手写实现 `axios` 函数的应用，代码如下所示：

// 函数
    axios({ 
      // 请求的类型
      method: 'POST',
      // 请求的 url
      url: 'https://api.apiopen.top/getJok',
      // url 参数
      params: { 
        a: 100,
        b: 200
      },
      // 请求体
      data: { 
        c: 300,
        d: 400
      }
    }).then(response => { 
      console.log(response);
    }).catch(reason => { 
      console.log(reason);
    });
    
    
    // 调用对象方法
    axios.get('https://api.apiopen.top/getJoke', { 
      params: { 
        a: 100,
        b: 200
      }
    }).then(response => { 
      console.log(response);
    });
    
    axios.post('https://api.apiopen.top/getJoke', { 
      params: { 
        a: 100,
        b: 200
      },
      data: { 
        c: 300,
        d: 400
      }
    }).then(response => { 
      console.log(response);
    });
    
    axios.put('https://api.apiopen.top/getJoke', { 
      params: { 
        a: 100,
        b: 200
      }
    }).then(response => { 
      console.log(response);
    });
    
    axios.delete('https://api.apiopen.top/getJoke', { 
      params: { 
        a: 100,
        b: 200
      }
    }).then(response => { 
      console.log(response);
    });