可供axios、XMLHttpRequest、fetch测试的接

2019-07-16 本文已影响0人战神和他的文盲老父亲

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( )方法