Promise封装原生ajax
今日目标：
1.node的内置模块url, http
2.Promise封装原生ajax
00-回顾
javascript
# express: node内置的一个用来搭建后台服务的框架
# 使用：
全局安装： yarn global add express-generator | npm i express-generator -g
创建后台服务：express 项目名
启动项目：
yarn | npm i: 找回第三方的模块
yarn start | npm run start: 启动项目01-node的内置模块
javascript
# 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【面试题】
javascript
/*
参数：
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 = url
function 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请求码等于200
if (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()