珠峰培训，专注前端

一、axios

1.1 axios是什么

axios是基于promise封装的ajax库，用于客户端发送ajax请求；

1.2 安装axios库

  1. npm install axios --save 或者 yarn add axios --save

1.3 axios常用的方法：

1.3.1 get请求

  • axios.get(url, config)
  • 返回promise对象
  1. axios.get('/api/get_aside', {
  2.     params: {
  3.       aside_id: 1
  4.     }
  5. }).then(({data}) => bindHTML(data));

1.3.2 post请求

  • axios.post(url, data)
  • 返回promise对象，可以使用.then，then回调的形参res：
    • res 是一个经过axios封装过的对象，其中包含了http的响应状态，响应状态码等信息；
    • 对象中的data属性值才是我们请求来的数据
    • console.log(res);
    • console.log(res.data);
  1. axios.post('/api/get_aside', {aside_id: 1, name: 'xyz'}).then(function (res) {
  2.     // res 是一个经过axios封装过的对象，其中包含了http的响应状态，响应状态码等信息；
  3.     // 对象中的data属性值才是我们请求来的数据
  4.     // console.log(res);
  5.     // console.log(res.data);
  6.     bindHTML(res.data);
  7. });

1.3.3 并发多个请求，并且要等所有请求结束之后再做处理

  • axios.all([axios请求1, axios请求2, ….])
  • 仍然返回then，但是then方法中要传入 axios.spread(callback)

示例：

  1. function getUser(uid) {
  2.     return axios.get(`/api/get_user?u_id=${uid}`)
  3. }
  5. function getAside(aid) {
  6.     return axios.get(`/api/get_aside?a_id=${aid}`)
  7. }
  9. axios.all([getUser(1), getAside(1)]).then(axios.spread((user, aside) => {
  10.     console.log(user);
  11.     console.log(aside);
  12. }))

二、ajax接口

返回静态资源文件如html、css、js、图片的服务称为静态资源服务；而ajax接口一般根据客户端的请求返回具体的内容；

2.1 Node静态资源服务器

  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  4. let mime = require('mime');
  6. let server = http.createServer((req, res) => {
  8.     let {method} = req;
  9.     let urlObj = url.parse(req.url, true);
  10.     let {pathname} = urlObj;
  12.     let filePath = '';
  13.     let contentType = '';
  15.     if (pathname === '/') {
  16.         filePath = __dirname + '/index.html';
  17.         contentType = 'text/html';
  18.     } else {
  19.         filePath = __dirname + pathname;
  20.         contentType = mime.getType(pathname);
  21.     }
  23.     fs.readFile(filePath, (err, data) => {
  24.         if (err) {
  25.             res.statusCode = 404;
  26.             res.end(`${pathname} You are looking for is not found`);
  27.         } else {
  28.             res.setHeader('Content-Type', contentType);
  29.             res.end(data);
  30.         }
  31.     })
  32. });
  34. server.listen(8000, () => console.log('port 8000 is on'));

2.2 增加ajax接口

  • 如何区分ajax接口还是静态资源服务请求？
    静态资源文件请求一般包含文件的扩展名，特殊的有 / ，所以如果pathname有扩展名或者是 / 就是静态资源服务，否则就是接口；
  • 所有的ajax接口返回json，设置内容类型为 application/json;
  • 设置返回json的编码为 charset=UTF-8; 如果不设置返回的json会乱码；
  1. let http = require('http');
  2. let fs = require('fs');
  3. let url = require('url');
  4. let mime = require('mime');
  6. let server = http.createServer((req, res) => {
  8.     let {method} = req;
  9.     let urlObj = url.parse(req.url, true);
  10.     let {pathname} = urlObj;
  12.     let filePath = '';
  13.     let contentType = '';
  15.     // 1. 静态资源服务
  16.     if (pathname === '/' || /(\.\w+)$/.test(pathname)) {
  17.         if (pathname === '/') {
  18.             filePath = __dirname + '/index.html';
  19.             contentType = 'text/html';
  20.         } else {
  21.             filePath = __dirname + pathname;
  22.             contentType = mime.getType(pathname);
  23.         }
  25.         fs.readFile(filePath, (err, data) => {
  26.             if (err) {
  27.                 res.statusCode = 404;
  28.                 res.end(`${pathname} You are looking for is not found`);
  29.             } else {
  30.                 res.setHeader('Content-Type', contentType);
  31.                 res.end(data);
  32.             }
  33.         })
  36.     } else {
  37.         // ajax 接口
  38.         res.setHeader('Content-Type', 'application/json;charset=UTF-8;');
  39.         if (pathname === '/api/get_aside') {
  40.             // 使用data和end事件获取post请求的数据
  42.             if (method.toUpperCase === 'POST') {
  43.                 var postStr = '';
  44.                 req.on('data', (data) => postStr += data);
  45.                 req.on('end', () => {
  46.                     let obj = JSON.parse(postStr);
  47.                     fs.readFile(__dirname + '/aside.json', (err, data) => {
  48.                         if (err) {
  49.                             res.statusCode = 404;
  50.                             res.end(`${pathname} You are looking for is not found`);
  51.                         } else {
  52.                             res.setHeader('Content-Type', 'application/json;charset=UTF-8;');
  53.                             res.end(data);
  54.                         }
  55.                     });
  56.                 });
  57.             } else {
  58.                 fs.readFile(__dirname + '/aside.json', (err, data) => {
  59.                     if (err) {
  60.                         res.statusCode = 404;
  61.                         res.end(`${pathname} You are looking for is not found`);
  62.                     } else {
  63.                         res.end(data);
  64.                     }
  65.                 });
  66.             }
  67.         }
  69.         // 获取用户的信息
  70.         if (pathname === '/api/get_user') {
  71.             let urlObj = url.parse(req.url, true);
  72.             let {u_id} = urlObj.query;
  73.             fs.readFile(__dirname + '/user.json', 'utf8', function (err, data) {
  74.                 let dataArr = JSON.parse(data);
  75.                 let user = dataArr.find(item => +item.id === +u_id);
  76.                 if (user) {
  78.                     res.end(JSON.stringify({
  79.                         code: 0,
  80.                         data: {
  81.                             token: 'adsflkds1fldslafk'
  82.                         },
  83.                         msg: 'ok'
  84.                     }))
  85.                 } else {
  86.                     res.end(JSON.stringify({
  87.                         code: -1,
  88.                         data: {},
  89.                         msg: '用户不存在'
  90.                     }))
  91.                 }
  92.             })
  93.         }
  94.     }
  96. });
  98. server.listen(8000, () => console.log('port 8000 is on'));

三、PromiseA+

实现一个Promise

  1. class MyPromise {
  2.     constructor (executor) {
  3.         // this 是当前类的实例
  4.         // 当resolve执行时，会把当前实例上成功的事件池中的所有函数挨个执行
  5.         // 给实例添加两个事件池，一个是装成功的事件函数，一个装失败的事件函数
  6.         // 初始化一个状态 pending
  7.         // 初始化一个值value
  9.         this.state = 'pending';
  10.         this.fulfilledEvent = [];
  11.         this.rejectedEvent = [];
  12.         this.value = undefined;
  14.         let resolve = (result) => {
  15.             // 循环事件池中的函数，让其按个执行
  16.             // 修改状态，一旦状态发生变更就不能再修改状态
  17.             if (this.state !== 'pending') return;
  19.             this.state = 'fulfilled';
  20.             this.value = result;
  21.             setTimeout(() => {
  22.                 this.fulfilledEvent.forEach(fulfillCb => {
  23.                     if (typeof fulfillCb === 'function') fulfillCb(this.value);
  24.                 }, 0)
  25.             })
  26.         };
  28.         // 当reject时，把实例上保存失败的事件池中的函数都执行了
  29.         let reject = (reason) => {
  30.             if (this.state !== 'pending') return;
  32.             this.state = 'rejected';
  33.             this.value = reason;
  35.             let timer = setTimeout(() => {
  36.                 clearTimeout(timer); // 这里为啥要清除timer???
  37.                 this.rejectedEvent.forEach(rejectCb => {
  38.                     if (typeof rejectCb === 'function') rejectCb(this.value);
  39.                 })
  40.             })
  41.         };
  43.         // 处理Promise的异常
  44.         try {
  45.             executor(resolve, reject);
  46.         } catch (e) {
  47.             reject(e)
  48.         }
  50.     }
  52.     then (resolveFn, rejectFn) {
  53.         // 如果then方法中没有传递resolveFn或者rejectFn，要自动补全
  55.         if (!resolveFn) {
  56.             resolveFn = result => result;
  57.         }
  59.         if (!rejectFn) {
  60.             rejectFn = reason => {
  61.                 throw new Error(reason)
  62.             }
  63.         }
  65.         return new MyPromise((resolve, reject) => {
  66.             // 不是直接把函数放进去，因为需要判断当前函数是否返回一个Promise实例
  67.             this.fulfilledEvent.push((result) => {
  68.                 try {
  69.                     let x = resolveFn(result);
  70.                     x instanceof MyPromise
  71.                         ? x.then(resolve, reject)
  72.                         : resolve(result);
  73.                 } catch (e) {
  74.                     reject(e)
  75.                 }
  76.             });
  78.             this.rejectedEvent.push(reason => {
  79.                 try {
  80.                     let x = rejectFn(reason);
  81.                     x instanceof MyPromise
  82.                         ? x.then(resolve, reject)
  83.                         : resolve(x); // 如果不是Promise实例，直接执行下一个then中的resolve
  84.                 } catch (e) {
  85.                     reject(e);
  86.                 }
  87.             })
  88.         })
  89.     }
  90. }

使用

  1. new MyPromise((resolve, reject) => {
  2.     console.log(1);
  3.     reject('abc');
  4. }).then(function (res) {
  5.     console.log(2);
  6. }, function (err) {
  7.     console.log(3)
  8. }).then((res) => {
  9.     console.log(4)
  10. }, function () {
  11.     console.log(5)
  12. });
  13. console.log(6);

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】