【前端工程师2022】学习笔记（一）

最新推荐文章于 2022-10-19 23:15:01 发布

HAZEL644

最新推荐文章于 2022-10-19 23:15:01 发布

阅读量528

点赞数

分类专栏： JavaScript 文章标签：前端学习 javascript

本文链接：https://blog.csdn.net/HAZER644/article/details/127032302

版权

这篇博客主要介绍了前端工程师在2022年对于Ajax的封装过程，包括ajax.js中发送请求的实现，constants.js中定义的相关常量，defaults.js中设定的默认值，以及utils.js中的一系列工具方法。同时，博主强调了对index.js的入口调用文件和constants.js的修改以实现Promise的改进，以提升异步处理的效率。

摘要由CSDN通过智能技术生成

——封装Ajax——

文件：

ajax.js

constants.js

utils.js

defaults.js

index.js

——ajax.js——发送请求

// 封装ajax
// 将一般步骤重复写的代码封装到一个，直接调用
//思路：
// 结合module和class
//
// 内部：构造函数constructor
// 常量
import {
    HTTP_GET,
    CONTENT_TYPE_FORM_URLENCODED,
    CONTENT_TYPE_JSON
} from './constants.js';

// 工具函数
import { serialize, addURLData, serializeJSON } from './utils.js';

// 默认参数
import DEFAULTS from './defaults.js';

// 
// 定义Ajax类
class Ajax {
    // 构造函数的参数：url（ajx发送请求地址），options用户传进来的配置参数
    constructor(url, options) {
        // 保存到this上，可以在这个类的其它方法中使用,否则就是构造Fn的局部变量
        // 
        this.url = url;
        // 用户参数的处理
        // 凡是有参数的地方都需要设定默认参数，优先使用默认参数。
        // Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
        // Object.assign(target, ...sources)
        //  参数： target--->目标对象
        //  source--->源对象
        //  返回值：target，即目标对象
        // 后面的目标对象会覆盖前面的，优先options，再是DEFAULTS
        this.options = Object.assign({}, DEFAULTS, options);

        // 调用初始化
        this.init();
    }
    // 初始化
    init() {
        // 第一步创建xhr对象
        const xhr = new XMLHttpRequest();

        // 想要在背的方法中访问xhr
        this.xhr = xhr;

        // 绑定响应事件处理程序
        this.bindEvents();

        // 创建一个新的http请求，并指定此请求的方法、URL以及验证信息
        // XMLHttpRequest.open(method: string, url: string, async: boolean, username: string, password: string)
        // 在创建的时候因为请求头的信息需要加到url上所以需要在url后判断是否有需要加的数据（addParam()方法用来处理地址上的数据）
        xhr.open(this.options.method, this.url + this.addParam(), true);

        // 设置 responseType
        this.setResponseType();

        // 设置跨域是否携带 cookie
        this.setCookie();

        // 设置超时
        this.setTimeout();

        // 发送请求
        // 发送的步骤对数据有很多的处理，在一个方法中统一处理
        this.sendData();
    }

    // bindEvents
    // 所有请求的时间都子啊此方法中绑定
    bindEvents() {
        // 作用域：没法直接浏览xhr
        const xhr = this.xhr;
        // 取options解构赋值
        const { success, httpCodeError, error, abort, timeout } = this.options;
        xhr.addEventListener(
            'load',
            // 如果考虑兼容性，则要使用readystatechange事件
            // 判断状态码是否正常可