http://jsonplaceholder.typicode.com/posts
测试代码用到的是谷歌浏览器
一、使用axios请求这个测试接口（完整代码），现在流行的也是使用这个方法。
图片中的注释又臭又长主要是面对初学者，嫌麻烦的可以直接复制代码自己运行下一目了然。
（代码没有问题，如果请求不到可以检查看有没有单词写错地方）
这是axios文档地址https://www.kancloud.cn/yunye/axios/234845
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
</body>
<script>
let url = 'http://jsonplaceholder.typicode.com/posts'
let test = axios({
method: 'get',
url: url,
})
test.then(res => {
console.log(res)
})
</script>
</html>
axios方法解析
个人理解：axios使用es6新增的promise方法对→异步请求数据XMLHttpRequest对象的再封装
因为是这样我们才能使用axios来异步请求数据，并且可以使用.then这个方法来处理获取到的数据。
二、使用XMLHttpRequest请求这个测试接口（完整代码）。
参考文档地址https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html
补充：test.send( )是指发送这个请求。
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let url = 'http://jsonplaceholder.typicode.com/posts'
let test = new XMLHttpRequest();
test.open("GET",url,true)
test.send()
test.onreadystatechange = () =>{
if(test.readyState === 4 && test.status === 200){
console.log(test.responseText)
}
}
</script>
</html>
XMLHttpRequest方法解析
三、使用fetch请求这个测试接口，（fetch同样也是es新增方法，不需要安装插件）
参考文档https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
let url = 'http://jsonplaceholder.typicode.com/posts'
let test = fetch(url)
test.then(res => res.json())
.then(res => console.log(res))
</script>
</html>
使用json( )方法
未使用json( )方法
网友评论