数据请求相关

ajax

function ajaxFn() {
    // IE5,6用 new ActiveXObject('Microsoft.XMLHTTP');
    var xhr=new XMLHttpRequest();
    /* 所有的浏览器都支持该事件 */
    xhr.onreadystatechange=function(){//这个事件函数放在哪里都可
        if(xhr.readyState===4){//针对open方法可以调用并且接受了全部响应数据
            if(xhr.status===200){//响应的http状态
                console.log(xhr.responseText);
            }
        }
    };
    /* 可以用onload替代上面的onreadystatechange */
    xhr.onload=function(){
        // 处理取回的数据(在 xhr 中找到)  可以打印 xhr  看看有哪些值
    }
    xhr.timeout = 2000; // 超时时间，单位是毫秒(设置的超时值，在请求头中不显示)
    
    /* @des get方式 */
    /* HTTP 协议 不要求也不禁止 GET 请求带 body。
     大多数支持 但是浏览器会抛错 
    */
    xhr.open('get','https://aa.cc.com/api',true); // true表示异步,当设置为同步时，一旦发出，后续的所有代码不再执行，等待接口返回
    xhr.send(null);//将请求发送到服务器

    if ('如果不需要这次请求的值了') {
        xhr.abort();
    }

    /* @des post方式 */
    xhr.open('post', '.com/api',true);
    xhr.setRequestHeader('Content-type','application/json'); 
    xhr.setRequestHeader('Auther','hewitt'); 
    xhr.send(JSON.stringify(data));

    /* @des 设置返回值的格式 */
    // xhr.responseType = 'json';
}

传递 formData 数据

const ajaxFn = () => {
    var xhr=new XMLHttpRequest();
    xhr.onload=function(){
        // 处理取回的数据(在 xhr.response 中找到)
    }
    xhr.timeout = 10000;
    xhr.responseType = 'json';
    xhr.open('post', 'xxxxx.com', true);
    // xhr.setRequestHeader('Content-type','multipart/form-data'); // 这里不要设置 content-type 由浏览器自动匹配  
    const form = new FormData()
    form.append('username', 'xx')
    form.append('password', 123)
    xhr.send(form);
}

status 200表示成功，304表示资源没有修改可以直接使用浏览器缓存

必须在调用open()方法之后且调用send()方法之前调用setRequestHeader()

用原生 ajax 提交 FormData 采用 post 不用加 contentType 浏览器会自动添加，主要是为了自动设置 boundary（用于分割上传的数据字段，就是类似于分隔符）

fetch

是一个现代的概念，等同于 XMLHttpRequest 核心在于对 HTTP 接口的抽象，包括 Request、Response、Headers 和 Body

fetch('http://localhost:1025/121', {
        /* @des 凭证 */
        credentials:'include',
        headers: { 'Content-Type': 'image/jpeg|application/json' }, 
        method: 'get',
        mode: "cors",
    }).then(function (response) {
        /* @des 必须先返回一个数据格式*/
        // response.formData() || response.json()
        return response.text();
    }).then(function (data) {
        console.log(data);
    })

// 包含cookie:"omit"（默认）,"same-origin"以及"include"
// 默认情况下 fetch不会接受或者发送cookies

将对象转换为query String所需格式

function objectToQueryString(obj) {
    const arr = [];
    Object.keys(obj).forEach(key => {
        if(obj[key]) arr.push(`${key}=${obj[key]}`)
    })
    return arr.join('&')
}

queryString 转换为对象 { a: 1, b: 2 }

/**
 * @des 获取 queryString 转换为对象 { a: 1, b: 2 }
 */
export function queryStringToObj (str) {
    str = str || 'xxxx/xx?a=1&b=2'

    const regExp = /(?:\?|&)([^&]*)/g
    let result = ''
    const obj = {}

    while ((result = regExp.exec(str)) !== null) {
        const kv = result[1].split('=')
        obj[kv[0]] = kv[1]
    }

    return obj
}

# 数据请求相关

# ajax

# 传递 formData 数据

# fetch

# 将对象转换为query String所需格式