自实现微微型axios

最新推荐文章于 2023-06-16 16:01:22 发布

月下ctrlc

最新推荐文章于 2023-06-16 16:01:22 发布

阅读量90

点赞数

分类专栏：前端文章标签： npm 前端 ajax

本文链接：https://blog.csdn.net/qq_44625142/article/details/108066517

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

axios

准备

准备

在实现前我们需要用json-server搭建一个REST接口，这是大神弄好的一个包，直接用就行了，30s足矣，用来方便测试，可以到npm上看使用:json-server

搭建好之后，我们就可以用它提供的接口来测试我们自己封装的axios是否可行
代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <button onclick="testGet()">GET请求</button>
        <button onclick="testPost()">POST请求</button>
        <button onclick="testPut()">PUT请求</button>
        <button onclick="testDelete()">DELETE请求</button>
    </div>
</body>
<script>
       function testGet() {
            axios({
                url:'http://localhost:3000/posts',
                method:'GET',
                params:{id:1}
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }

        function testPost() {
            axios({
                url:'http://localhost:3000/posts',
                method:'POST',
                data:{"title": "json-server3----", "author": "typicode3-----"}
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }

        function testPut() {
            axios({
                url:'http://localhost:3000/posts/1',
                method:'put',
                data:{"title": "json-server3+++", "author": "typicode3+++"}
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }

        function testDelete() {
            axios({
                url:'http://localhost:3000/posts/1',
                method:'delete',
            }).then(
                response => {
                    console.log(response)
                },
                error => {
                    alert(error.message)
                }
            )
        }
    /*
    1. 函数的返回值为 promise, 成功的结果为 response, 失败的结果为 error 
    2. 能处理多种类型的请求: GET/POST/PUT/DELETE 
    3. 函数的参数为一个配置对象 { 
        url: '', // 请求地址 
        method: '', // 请求方式 GET/POST/PUT/DELETE 
        params: {}, // GET/DELETE 请求的 query 参数 
        data: {}, // POST 或 DELETE 请求的请求体参数 } 
    4. 响应 json 数据自动解析为 js
    */

   //自己封装axios
   function axios({
       url,
       method='GET',
       params={},
       data={}
   }) {
       //返回一个 Promise 对象
       return new Promise((resolve,reject) => {
            
            method = method.toUpperCase()
            //处理query参数(拼接到url上)
            let queryString = ''
            Object.keys(params).forEach(key => {
                queryString += `${key}=${params[key]}&`
            })
            if(queryString){
                //去除最后的&
                queryString = queryString.substring(0,queryString.length-1)

                //拼接到url上
                url += '?' + queryString
            } 

            //1.执行异步ajax请求
            //创建xhr对象
            const request = new XMLHttpRequest()
            //打开连接(初始化请求，没有请求)
            request.open(method,url,true)
            //发送请求
            if(method === 'GET' || method === 'DELETE'){
                request.send()
            }else if(method === 'POST' || method === 'PUT'){
                request.setRequestHeader('Content-Type','application/json;charset=utf-8') //告诉服务器请求体的格式是json
                request.send(JSON.stringify(data))
            }
            
            //绑定状态改变的监听
            request.onreadystatechange = () =>{
                //如果请求没有完成，直接结束
                if(request.readyState !== 4){
                    return
                }
                //如果响应状态码在[200,300)之间代表成功，否则失败
                const {status,statusText} = request
                //2.1 如果请求成功了，调用resolve()
                if(status>=200 && status<=299){
                    //准备结果对象
                    const response = {
                        data: JSON.parse(request.response),
                        status,
                        statusText,
                    }
                    resolve(response)
                }else{
                //2.2 如果请求失败了，调用reject()
                    reject(new Error('request error status is ' + status))
                }
            }
       })
   }
</script>
</html>

月下ctrlc

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
自实现微微型axios

axios准备准备在实现前我们需要用json-server搭建一个REST接口，这是大神弄好的一个包，直接用就行了，30s足矣，用来方便测试，可以到npm上看使用:json-server搭建好之后，我们就可以用它提供的接口来测试我们自己封装的axios是否可行代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"
复制链接

扫一扫