axios笔记

Axios

仓库地址:https://github.com/axios/axios
简介
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。
TAGS
http请求,JavaScript,Promise

如何使用

预备知识
ESM(es6模块):
1.ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系
2.ES6 模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入
CommonJS:
1.CommonJS 只能在运行时确定这些东西。CommonJS 加载的是一个对象
2.CommonJS 模块输出的是值的拷贝
3.用require("[name]");引入
发起一个GET请求

const axios = require('axios');

// 向给定ID的用户发起请求
axios.get('/user?ID=12345')
  .then(function (response) {
    // 处理成功情况
    console.log(response);
  })
  .catch(function (error) {
    // 处理错误情况
    console.log(error);
  })
  .then(function () {
    // 总是会执行
  });

async和await:让异步编程更简单
它们是基于promises的语法糖，使异步代码更易于编写和阅读。
async:使函数变为异步函数, 可以使用then
await:它可以放在任何异步的，基于 promise 的函数之前。它会暂停代码在该行上，直到 promise 完成，然后返回结果值。在暂停的同时，其他正在等待执行的代码就有机会执行了。
axios支持async/await用法

// 支持async/await用法
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

了解更多,请浏览官方文档

源码学习

核心架构
参考:https://blog.csdn.net/qq_42880714/article/details/121651927

function createInstance(defaultConfig) {
  // 创建一个实例，用于指定一个上下文
  var context = new Axios(defaultConfig);
  // 将原型中的request方法的this指向当前实例形成一个新的实例，把该方法作为实例方法使用。
  var instance = bind(Axios.prototype.request, context);
  // 将构造函数 Axios.prototype 上的方法挂载到新的实例 instance 上，然后将原型各个方法中的 this 指向 context，开发中才能使用 axios.get/post… 等等
  utils.extend(instance, Axios.prototype, context);
  // 将构造函数 Axios 的实例属性挂载到新的实例 instance 上
  utils.extend(instance, context);

  // 暴露一个创建实例的方法
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };
  return instance;
}
// 生成供使用的默认实例， 这个default就是默认配置。
var axios = createInstance(defaults);

axios.Axios = Axios;
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

相关知识点

XMLHttpRequests

var xmlhttp=null;
if(window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject)
{
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET",url,true);
xmlhttp.sen(null);

node.js中的http

http.get(options, (res) => {
  // Do stuff
}).on('socket', (socket) => {
  socket.emit('agentRemove');
});

ES6 Promise 对象
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大
所谓 Promise ，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

const promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});