简单的axios请求（GET\POST\PUT\DELETE）

最新推荐文章于 2022-08-31 14:17:40 发布

Archer_yy

最新推荐文章于 2022-08-31 14:17:40 发布

阅读量340

点赞数

本文链接：https://blog.csdn.net/Dilemma_me/article/details/105582713

版权


<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div>
        <button οnclick="testGet()">GET请求</button>
        <button οnclick="testPOST()">POST请求</button>
        <button οnclick="testPUT()">PUT请求</button>
        <button οnclick="testDELETE()">DELETE请求</button>
    </div>
</body>
<script>
    // GET：从服务器端读取数据
    function testGet() {
        axios({
            url: 'http://localhost:3000/posts',
            method: 'GET',
            params: {
                id: '1',
                xyz: 'lm'
            }
        }).then(
            response => {
                console.log(response)
            },
            error => {
                console.log(error.message)
            }
        )
    }
    // POST：向服务器端添加新数据,效果在db.json文件里面查看
    function testPOST() {
        axios({
            url: 'http://localhost:3000/posts',
            method: 'POST',
            data: {
                "title": "post添加或者保存数据",
                "author": "Flintstone",
            }
        }).then(
            response => {
                console.log(response)
            },
            error => {
                console.log(error.message)
            }
        )
    }
    // PUT：更新服务器端已经存在的数据,效果在db.json文件里面查看
    function testPUT() {
        axios({
            url: 'http://localhost:3000/posts/1',
            method: 'put',
            data: {
                title: 'post测试已被put更新',
                author: 'Flintstone'
            }
        }).then(
            response => {
                console.log(response)
            },
            error => {
                console.log(error.message)
            }
        )
    }
    //DELETE：删除服务器端数据,效果在db.json文件里面查看
    function testDELETE() {
        axios({
            url: 'http://localhost:3000/posts/1',
            method: 'delete',
        }).then(
            response => {
                console.log(response)
            },
            error => {
                console.log(error.message)
            }
        )
    }
 
 
    /*
        1函数的返回值为 promise，成功的结果为 response，异常的结果为eror
        2.能处理多和类型的请求:GET/POST/PUT/ DELETE
        3，函数的参数为一个配置对象
            {
                url:'', 	//请求地址
                method:'',	//请求方式GET/POST/PUT/ DELETE
                params:{},	//GET/ DELETE请求的 query参数
                data:{},	//POST或 DELETE请求的请求体参数
            }
        4.响应json数据自动解析为js
    */
    function axios({
        url,
        method = 'GET',
        params = {},
        data = {}
    }) {
        //返回一个promise对象
        return new Promise((resolve, reject) => {
            //处理method(转大写)
            method = method.toUpperCase()
 
            //处理query参数（拼接到url上） id=1&xyz=lm
            /*
                {
                    id = 1 ,
                    xyz = 'lm'
                }
            */
            let queryString = ''
            Object.keys(params).forEach(key => {
                queryString += `${key}=${params[key]}&`
            })
            if (queryString) {//id=1&xyz=lm
                //去除最后的&
                queryString = queryString.substring(0, queryString.length - 1)
                //接到url
                url += '?' + queryString
            }
 
            //1.执行一步ajax请求
            //创建xhr对象
            const request = new XMLHttpRequest()
            //打开连接（初始化请求）
            request.open(method, url, true)
            //绑定状态改变的监听
            request.onreadystatechange = function () {
                //如果没有完成，直接结束
                if (request.readyState !== 4) {
                    return
                }
                //如果响应状态码在[200,300]之间代表成功，否则失败
                const { status, statusText } = request
                //2.1 如果请求成功了，调用resolve()
                if (status >= 200 && status <= 299) {
                    //准备结果数据对象response
                    const response = {
                        data: JSON.parse(request.response),
                        status,
                        statusText
                    }
                    resolve(response)
                } else {
                    //2.2如果请求失败了，调用reject()
                    reject(new Error('request error status is ' + status))
                }
            }
            //发送请求
            if (method === 'GET' || method === 'DELETE') {
                request.send()
            } else if (method === 'POST' || method === 'PUT') {
                request.setRequestHeader('Content-Tyep', 'application/json;charset=utf-8')//告诉服务器请求体的格式是json
                request.send(JSON.stringify(data))//发送json格式请求体参数
            }
 
            //2.1.如果请求成功了，调用resolve()
 
            //2.2.如果请求失败了，调用reject()
 
 
        })
    }
</script>

Archer_yy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的axios请求（GET\POST\PUT\DELETE）

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...
复制链接

扫一扫