前端面试基础题：Ajax请求发送、防抖和节流…

// ---------- GET 请求 ----------
// 创建xhr对象
var xhr = new XMLHttpRequest();
// 监听onreadystatechange事件
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}
// 调用open函数，指定请求方式与URL地址
// 第三个参数默认为true，表示异步发送请求
xhr.open('GET', 'url');
// 调用send函数，发起ajax请求
xhr.send();

// ---------- POST 请求 ----------
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
        console.log(xhr.responseText);
    }
}
xhr.open('POST', 'url');
// 设置Content-Type属性
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key1=val1&key2=val2');

xhr.timeout = 3000;
xhr.ontimeout = function () { console.log(‘请求超时’) }

var fd = new FormData(form);
xhr.send(fd);

xhr.upload.onprogress = function (e) {
    // e.lengthComputable是一个布尔值，表示当前上传的资源是否局有可计算的长度
    if(e.lengthComputable) {
        // e.loaded已传输的字节
        // e.total需要传输的总字节
        // 当前进度除以总长度，乘以100以百分比输出，通过ceil向上取整
        var percentComplete = Math.ceil((e.loaded / e.total)*100);
        // 在控制台查看进度
        console.log(percentComplete+'%'); 
    }
}

fetch('url')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.log("Oops, error", err))

fetch('url', {
    method: 'GET',  // 请求方法（'POST'）
    mode: 'cors',  // 请求的模式（'no-cors, same-origin'）
    cache: 'no-cache',  //  请求的 cache 模式
    credentials: 'same-origin',  // 请求的 credentials，为了在当前域名内自动发送 cookie，必须提供这个选项
    header: {  // 请求头信息
        'Content-Type': 'application/json'
    },
    redirect: 'follow',  // 可用的 redirect 模式
    body: JSON.stringify(data),  // 请求的 body 信息
})

axios.get('url', { params: {} }).then(callback);
axios.post('url', {}).then(callback)
axios.ajax({
    methods: '请求类型',
    url: '请求URL地址',
    data: { // POST数据 },
    params: { // GET参数 }
}).then(callback)

import axios from 'axios'
// 创建axios实例
const instance = axios.create({
    // axios的一些配置
    baseURL: 'xxxxxxxx',
    timeout: 15000
});
// 配置请求拦截器
axios.interceptors.request.use(req => {
    // 发送请求前需要做的事情
    return req;
}, err => {
    // 在请求错误时要做的事情
    return Promise.reject(err);
});
// 配置响应拦截器
axios.interceptors.response.use(res => {
    // 收到响应后需要做的事情
    return res;
}, err => {
    // 请求错误时要做的事情
    return err;
})

<!-- 定义一个success回调函数 -->
<script>
    function success(data) {
        console.log('获取到了data数据');
        console.log(data);
    }
</script>
<!-- 通过<script>标签请求接口数据 -->
<script src="http://example.com/?callback=success&name=zs&age=18"></script>

// 在服务器端设置对应的http response header
function setCorsHeader (res) {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8082');
    res.setHeader('Access-Control-Allow-Credentials', true);  // 允许客户端携带验证信息
    res.setHeader('Access-Control-Allow-Headers', 'customer-header, customer-header2');
    res.setHeader('Access-Control-Allow-Methods', 'POST, PUT');
}

const server = http.createServer((req, res) => {
    const { method, url } = req;
    if (method === 'OPTIONS') {
        setCorsHeader(res);
    } else if (methods === 'PUT' && urlObj.pathname === '/cors') {
        setCorsHeader(res);
        res.serHeader('content-type', 'application/json');
        res.write(JSON.stringify(mockData));
    } else {
        res.statusCode = 404;
    }
    res.end();
})

// 防抖
function debounce(func, delay) {
    let timer = null;
    return function () {
        // 如果时间再次触发就清除定时器
        clearTimeout(timer);
        timer = setTimeout(function () {
            func.apply(this, arguments);
        }, delay);
    }
}

// 节流
function throttle(func, delay) {
    let flag = true;  // 通过闭包保存一个节流阀
    return function () {
        if (!flag) return;  // 如果有定时器在执行，则直接返回
        flag = false;
        setTimeout(function () {
            fn.apply(this, arguments);
            flag = true;
        }, delay);
    }
}

function curry(company, department) {
    return function (name, age) {
        console.log(`我是${company}${department}部门的${name}, ${age}岁`);
    }
}
let print = curry('xxx', 'yyy');  // 传递固定的公司、部门
print('zhangsan', 30);  // 调用 return 出来的函数并传递变化的参数
print('lisi', 20);

const add = (a, b, c) => a + b + c;

const currying = (fn, ...args) => {
    let allArgs = [...args];
    const num = fn.length;
    const res = (...args2) => {
        allArgs = [...allArgs, ...args2];
        if (allArgs.length === num) {
            return fn(...allArgs);
        } else {
            return res;
        }
    }
    return res;
}

const a = currying(add, 1);
console.log(a(2)(3));

// 定义模块 math.js
var add = function (x, y) { return x + y; };
exports.add = add;

// 导入模块 main.js
const math = require('./math');
console.log(math.add(2, 3));  // 5

// 定义没有依赖的模块
define(function () {
    // 模块中所有代码全部放到这个函数中
    // return 模块
})
// 定义有依赖的模块
define(['module1', 'module2'], function(m1, m2) {
    // 模块中所有代码全部放到这个函数中
    // return 模块
})

// 引入模块
require(['module1', 'module2'], function(m1, m2) {
    // 模块加载成功之后的回调函数
    // 使用m1/m2
})

// 定义没有依赖的模块
define(function (require, exports, module) {
    exports.xxx = value
    module.exports.xxx = value
})

// 定义有依赖的模块
define(function (require, exports, module) {
    // 引入依赖模块（同步）
    var module2 = require('./module2')
    // 引入依赖模块（异步）
    require.async('./module3', function (m3) {})
    // 暴露模块
    exports.xxx = value
})

// 引入模块
define(function (require) {
    var m1 = require('./module1')
    var m2 = require('./module2')
    m1.show()
    m2.show()
})

// 定义模块
var num = 0;
var add = function (x, y) { return x + y; };
export { num, add }; 

// 导入模块
import { num, add } from './math.js'