axios 和 PromiseA+

一、axios

1.1 axios是什么

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

1.2 安装axios库

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

1.3.1 axios常用的方法：

• axios.get(url, config)；
• 返回promise对象

axios.get('/api/get_aside', {
    params: {
      aside_id: 1
    }
}).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);

axios.post('/api/get_aside', {aside_id: 1, name: 'xyz'}).then(function (res) {
  // res 是一个经过axios封装过的对象，其中包含了http的响应状态，响应状态码等信息；
  // 对象中的data属性值才是我们请求来的数据
  // console.log(res);
  // console.log(res.data);
  bindHTML(res.data);
});

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

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

示例：

function getUser(uid) {
  return axios.get(`/api/get_user?u_id=${uid}`)
}

function getAside(aid) {
  return axios.get(`/api/get_aside?a_id=${aid}`)
}

axios.all([getUser(1), getAside(1)]).then(axios.spread((user, aside) => {
  console.log(user);
  console.log(aside);
}))

二、ajax接口

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

2.1Node静态资源服务器

let http = require('http');
let fs = require('fs');
let url = require('url');
let mime = require('mime');

let server = http.createServer((req, res) => {

  let {method} = req;
  let urlObj = url.parse(req.url, true);
  let {pathname} = urlObj;

  let filePath = '';
  let contentType = '';

    if (pathname === '/') {
      filePath = __dirname + '/index.html';
      contentType = 'text/html';
    } else {
      filePath = __dirname + pathname;
      contentType = mime.getType(pathname);
    }

    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.statusCode = 404;
        res.end(`${pathname} You are looking for is not found`);
      } else {
        res.setHeader('Content-Type', contentType);
        res.end(data);
      }
    })
});

server.listen(8000, () => console.log('port 8000 is on'));

2.2 增加ajax接口

• 如何区分ajax接口还是静态资源服务请求？
• 静态资源文件请求一般包含文件的扩展名，特殊的有 / ，所以如果pathname有扩展名或者是 / 就是静态资源服务，否则就是接口；
• 所有的ajax接口返回json，设置内容类型为 application/json;
• 设置返回json的编码为 charset=UTF-8; 如果不设置返回的json会乱码；

let http = require('http');
let fs = require('fs');
let url = require('url');
let mime = require('mime');

let server = http.createServer((req, res) => {

  let {method} = req;
  let urlObj = url.parse(req.url, true);
  let {pathname} = urlObj;

  let filePath = '';
  let contentType = '';

  // 1. 静态资源服务
  if (pathname === '/' || /(\.\w+)$/.test(pathname)) {
    if (pathname === '/') {
      filePath = __dirname + '/index.html';
      contentType = 'text/html';
    } else {
      filePath = __dirname + pathname;
      contentType = mime.getType(pathname);
    }

    fs.readFile(filePath, (err, data) => {
      if (err) {
        res.statusCode = 404;
        res.end(`${pathname} You are looking for is not found`);
      } else {
        res.setHeader('Content-Type', contentType);
        res.end(data);
      }
    })


  } else {
    // ajax 接口
    res.setHeader('Content-Type', 'application/json;charset=UTF-8;');
    if (pathname === '/api/get_aside') {
      // 使用data和end事件获取post请求的数据

      if (method.toUpperCase === 'POST') {
        var postStr = '';
        req.on('data', (data) => postStr += data);
        req.on('end', () => {
          let obj = JSON.parse(postStr);
          fs.readFile(__dirname + '/aside.json', (err, data) => {
            if (err) {
              res.statusCode = 404;
              res.end(`${pathname} You are looking for is not found`);
            } else {
              res.setHeader('Content-Type', 'application/json;charset=UTF-8;');
              res.end(data);
            }
          });
        });
      } else {
        fs.readFile(__dirname + '/aside.json', (err, data) => {
          if (err) {
            res.statusCode = 404;
            res.end(`${pathname} You are looking for is not found`);
          } else {
            res.end(data);
          }
        });
      }
    }

    // 获取用户的信息
    if (pathname === '/api/get_user') {
      let urlObj = url.parse(req.url, true);
      let {u_id} = urlObj.query;
      fs.readFile(__dirname + '/user.json', 'utf8', function (err, data) {
        let dataArr = JSON.parse(data);
        let user = dataArr.find(item => +item.id === +u_id);
        if (user) {

          res.end(JSON.stringify({
            code: 0,
            data: {
              token: 'adsflkds1fldslafk'
            },
            msg: 'ok'
          }))
        } else {
          res.end(JSON.stringify({
            code: -1,
            data: {},
            msg: '用户不存在'
          }))
        }
      })
    }
  }

});

server.listen(8000, () => console.log('port 8000 is on'));

三、PromiseA+

实现一个Promise

class MyPromise {
  constructor (executor) {
    // this 是当前类的实例
    // 当resolve执行时，会把当前实例上成功的事件池中的所有函数挨个执行
    // 给实例添加两个事件池，一个是装成功的事件函数，一个装失败的事件函数
    // 初始化一个状态 pending
    // 初始化一个值value

    this.state = 'pending';
    this.fulfilledEvent = [];
    this.rejectedEvent = [];
    this.value = undefined;

    let resolve = (result) => {
      // 循环事件池中的函数，让其按个执行
      // 修改状态，一旦状态发生变更就不能再修改状态
      if (this.state !== 'pending') return;

      this.state = 'fulfilled';
      this.value = result;
      setTimeout(() => {
        this.fulfilledEvent.forEach(fulfillCb => {
          if (typeof fulfillCb === 'function') fulfillCb(this.value);
        }, 0)
      })
    };

    // 当reject时，把实例上保存失败的事件池中的函数都执行了
    let reject = (reason) => {
      if (this.state !== 'pending') return;

      this.state = 'rejected';
      this.value = reason;

      let timer = setTimeout(() => {
        clearTimeout(timer); // 这里为啥要清除timer???
        this.rejectedEvent.forEach(rejectCb => {
          if (typeof rejectCb === 'function') rejectCb(this.value);
        })
      })
    };

    // 处理Promise的异常
    try {
      executor(resolve, reject);
    } catch (e) {
      reject(e)
    }

  }

  then (resolveFn, rejectFn) {
    // 如果then方法中没有传递resolveFn或者rejectFn，要自动补全

    if (!resolveFn) {
      resolveFn = result => result;
    }

    if (!rejectFn) {
      rejectFn = reason => {
        throw new Error(reason)
      }
    }

    return new MyPromise((resolve, reject) => {
      // 不是直接把函数放进去，因为需要判断当前函数是否返回一个Promise实例
      this.fulfilledEvent.push((result) => {
        try {
          let x = resolveFn(result);
          x instanceof MyPromise
            ? x.then(resolve, reject)
            : resolve(result);
        } catch (e) {
          reject(e)
        }
      });

      this.rejectedEvent.push(reason => {
        try {
          let x = rejectFn(reason);
          x instanceof MyPromise
            ? x.then(resolve, reject)
            : resolve(x); // 如果不是Promise实例，直接执行下一个then中的resolve
        } catch (e) {
          reject(e);
        }
      })
    })
  }
}

使用

new MyPromise((resolve, reject) => {
  console.log(1);
  reject('abc');
}).then(function (res) {
  console.log(2);
}, function (err) {
  console.log(3)
}).then((res) => {
  console.log(4)
}, function () {
  console.log(5)
});
console.log(6);