axios

大概需要 1 分钟读完

http 协议

HTTP 本质是无状态的，使用 Cookies 可以创建有状态的会话。

ajax

在 JavaScript 中的简单使用

const xhr = new XMLHttpRequest();
xhr.open("GET", "http://localhost:3000", true);
xhr.send();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && (xhr.status >= 200) & (xhr.status < 300)) {
    data = xhr.response;
  }
};

fetch

是关注分离模式的诠释。关注分离即将每个过程都具体出来

简单使用的例子

fetch(`https://api.github.com/search/users?q=${value}`)
	.then((response) => response.json()) //先联系服务器
	.then((response) => console.log(response)) //再回调数据
	.catch((error) => console.log(error)); //捕捉期间发生的错误
};

try {
  const response = await fetch(`https://api.github.com/search/users?q=${value}`)
  const data = await response.json()
  console.log(data)
} catch (e)
  console.log(e)
}

axios

简单使用

axios.defaults.baseURL = 'http://localhost:3000'
axios({
	url: '/posts',
	params: {
		id: 1
	}
})
.then(response => {
	console.log('/posts', response.data)
	})
}

源码分析

从语法上说 axios 不是 Axios 的实例
从功能上说 axios 是 Axios 的实例
1. axios 通过 utils.extend 复制了 Axios 的函数和属性
2. axios 仍旧保持是一个函数所以可以直接 axios()使用
axios 是 Axios.prototype.request 函数 bind()函数返回的函数