惠州网站搭建找谁广州网站建设泸州

Promise封装原生ajax

1.node的内置模块url, http

2.Promise封装原生ajax

01-node的内置模块

# url: 操作网址
let url = require('url')
url.parse('网址', [布尔值: 决定是否将查询字符串转换为对象格式])： 将网址解析成对象# http: 创建本地服务器
let http = require('http')let server = http.createServer(function (req, res) {// req: 前端提交的数据// res: 后端响应的内容console.log('服务器被访问了一次');
})
server.listen('8888', console.log('服务器启动成功'))

02-Promise封装ajax【面试题】

/* 参数：1. 请求地址,url: 必填2. 请求方式,method: 选填 默认get请求3. 提交的参数，data: 选填 默认值 ''4. post的请求头， headers：选填， 默认值 {content-type, 'application/x-www-form-urlencoded'}返回值：=> 必须=> 返回的内容可以是回调函数, 可能会造成回调地狱=> 建议选择的是返回Promise，可以支持async/await函数封装的方法：相同部分放到函数体内，不同部分传参搞定函数封装的原则：尽可能的让程序的兼容性更强=> 参数是否齐全=> 参数的格式是否正确*/// 将对象转换为查询字符串
function queryStringify(data) {let str = ''for (let key in data) {str += `${key}=${data[key]}&`}return str.slice(0, -1)
}function createAjax(url) {var BaseURL = urlfunction ajax(options = {}) {// 这里options参数选择了对象：对象可以不用考虑参数的顺序// throw new Error(): 创建一个错误信息对象，并抛出（显示在控制台）// 1.1 请求地址是必填项if (!options.url) throw new Error('请求地址是必填项')// 1.2 请求方式 这个地方可以是undefined, 也可以是'GET'或'POST'if (!(options.method === undefined || /^(GET|POST)$/i.test(options.method))) {throw new Error('目前仅支持GET或POST，敬请期待更多方式')}// 1.3 提交的参数 这个地方也可以undefined，也可以是字符串，也可以是对象if (!(options.data === undefined || typeof options.data === 'string' || options.data.constructor === Object)) {throw new Error('支持的数据类型可以是字符串或者对象')}// 1.4 post请求头，可以是undefined, 也可以是表单格式提交if (/^POST$/i.test(options.method)) {if (!(options.headers === undefined || options.headers['content-type'] === 'application/x-www-form-urlencoded' || options.headers['content-type'] === 'application/json')) {throw new Error('post请求，必须设置请求头')}}// 如果options里面的参数不包含请求方式和提交参数，就要提供默认值let _default = {url: BaseURL + options.url,method: options.method || 'GET',data: options.data || '',headers: options.headers || { 'content-type': 'application/x-www-form-urlencoded' }}// 提交的参数的格式可以是对象形式，就需要将对象先转换成查询字符串，再做拼接if (_default.data.constructor === Object) _default.data = queryStringify(_default.data)// 注意：如果请求方式是get,并且需要携带参数，就需要把参数拼接在url地址的后面if (/^GET$/i.test(_default.method) && _default.data) _default.url += '?' + _default.data// 注意：发送了请求之后，希望可以接收到响应的数据，这里就使用了Promise, 再将结果resolve出去即可let p = new Promise((resolve, reject) => {// 2. 发起ajax请求// 2.1 创建一个实例对象，负责发起请求和接收响应的数据let xhr = new XMLHttpRequest()// 2.2 配置请求方式和请求地址xhr.open(_default.method, _default.url)// 2.3 设置请求头信息// xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded')if (/^POST$/i.test(_default.method)) xhr.setRequestHeader('content-type', _default.headers['content-type'])// // 2.4 发送请求xhr.send(/^POST$/i.test(_default.method) && _default.data)// 2.4 监听请求状态xhr.onreadystatechange = function () {// 如果请求的状态码等于4 并且 http请求码等于200if (xhr.readyState === 4 && xhr.status === 200) {let res = JSON.parse(xhr.responseText)// console.log(res);resolve(res)}}})return p}return ajax
}# 方法调用async function fun() {let ajax = createAjax('http://115.159.153.85:8001')let r1 = await ajax({url: '/getTest',// method: 'POST',// headers: { 'content-type': 'application/json' },data: {name: 'xdj',age: 18}})let r2 = await ajax({url: '/postTest',method: 'POST',// headers: { 'content-type': 'application/json' },data: {name: r1.msg.slice(0, 3),age: 18}})}
fun()