原生js创建get/post请求以及封装方式、axios的基本使用

最新推荐文章于 2024-05-23 17:15:19 发布
最新推荐文章于 2024-05-23 17:15:19 发布
阅读量4.1k 收藏 15
点赞数
文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tangtanglinli/article/details/129460509
版权

原生js创建get请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("get","http://ajax.h5.itsource.cn:5000/api/testGet?name=张三");

        // 监听响应码和状态码
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }
        // 发送请求
        xhr.send();
    </script>
</body>
</html>

原生js创建post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"></div>
    <script>
        //创建ajax引擎对象
        let xhr = new XMLHttpRequest();

        //配置请求方式和请求地址
        xhr.open("post","http://ajax.h5.itsource.cn:5000/api/testPost");

        // 监听状态变化和接收数据
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                // 处理数据
                let res = JSON.parse(xhr.responseText);
                console.log(res);

                //判定再渲染
                if(res.code == 200){
                    box.innerHTML = res.data; 
                }
            }
        }

        //请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

        // 发送请求
        xhr.send("name=李四");
    </script>
</body>
</html>

原生get和post封装方式1

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        function ajax(type, url, parmas, callback) {

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);                   
                }
            }
            parmas = arr.join("&");

            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?"+ parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));
                }
            }

        }

        ajax("get","http://ajax.h5.itsource.cn:5000/api/testGet",{
            name:"张三"
        },function(res){
            console.log(res);
        })

        ajax("post","http://ajax.h5.itsource.cn:5000/api/testPost",{
            name:"李四"
        },function(res){
            console.log(res);
        })
    </script>
</body>

</html>

原生get和post封装方式2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // //方式二:
        function ajax(obj) {
            //处理参数
            let type = obj.type;
            let url  = obj.url;
            let parmas = obj.params;
            let callback = obj.callback;

            //创建ajax引擎对象
            let xhr = new XMLHttpRequest();
            //处理参数,定义一个空数组
            let arr = [];
            //遍历对象，拼接到数组中
            for (const key in parmas) {
                if (Object.hasOwnProperty.call(parmas, key)) {
                    arr.push(key + "=" + parmas[key]);
                }
            }
            parmas = arr.join("&");

            // 判定
            if (type == "get") {
                //配置请求方式和请求地址
                xhr.open(type, url + "?" + parmas);
                // 发送请求
                xhr.send();
            } else {
                //配置请求方式和请求地址
                xhr.open(type, url);
                //请求头
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                // 发送请求
                xhr.send(parmas);
            }

            // 监听状态变化和接收数据
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    // 处理数据
                    callback(JSON.parse(xhr.responseText));

                }
            }

        }

        // 调用
        ajax({
            type: "get",
            url: 'http://ajax.h5.itsource.cn:5000/api/testGet',
            params: {
                name: '张三'
            },
            callback: function (res) {
                console.log(res)
            }
        })

        ajax({
            type: "post",
            url: 'http://ajax.h5.itsource.cn:5000/api/testPost',
            params: {
                name: '李四'
            },
            callback: function (res) {
                console.log(res)
            }
        })


    </script>
</body>

</html>

axios的基本使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./axios.min.js"></script>
</head>

<body>
    <script>
        // 为给定 ID 的 user 创建请求
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet?name=张三')
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });

        // 上面的请求也可以这样做
        axios.get('http://ajax.h5.itsource.cn:5000/api/testGet', {
            params: {
                ID: 12345
            } 
        })
            .then(function (response) {
                console.log(response.data);
            })
            .catch(function (error) {
                console.log(error);
            });
    </script>
</body>

</html>
烧脑的小白
关注
  • 0
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
原生js 封装get ,post, delete 请求的实例
11-30
现在的项目中都在用VUE 以及react 等MVC， MVVM 框架。...POST,GET,DELETE 的请求方式。当然根据不同的公司，不同的方式。都可以自己扩展。目前这个只是针对自己所在公司而已。 function api(url,opt,methods) {
原生JS发送GET、POST请求
CourageHe的博客
11-19 1万+
一、使用XMLHttpRequest 主要分三步： 第一步：创建需要的对象，这里主要用到的是XMLHttpRequest，注意需要考虑早期的IE； 第二步：连接和发送； 第三步：接收； 二、发送post请求并处理 var httpRequest = new XMLHttpRequest(); httpRequest.open("POST",url,true); httpRequ...
JS原生：XMLHttpRequest发送GET&POST请求
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
html中使用原生js发起axios请求
weixin_45776545的博客
05-23 232
【代码】html中使用原生js发起axios请求。
axios的原生使用方法
xiaomingzi_12345的博客
06-28 1062
2.在入口文件 main.js 中引入axios。1.首先下载axios插件。3.当你在组件中有具体的。
原生js实现常用的HTTP请求(GET、POST)
热门推荐
憧憬001-的博客
09-17 3万+
####　原生js实现常用的HTTP请求(GET、POST) // 常用工具函数 var tools = { /* ajax请求get * @param url string 请求的路径 * @param query object 请求的参数query * @param succCb function 请求成功之后的回调 * @...
使用原生js和axios实现单文件上传（入手难度低）
junglegle_的博客
05-07 457
前端使用原生js和axios实现文件上传，后端使用nodejs保存前端上传的文件
原生js实现GET和POST
weixin_46029283的博客
06-11 2222
原生js实现get与post请求，两者差异，带注释
【鸿蒙版axios请求封装包】
最新发布
06-03
3. **请求配置**：如同`axios`，鸿蒙版的封装包也支持多种请求配置，如URL、请求方法（GET、POST等）、参数、headers、超时设置等，以便开发者灵活控制请求行为。 4. **响应处理**：封装包会处理HTTP响应，包括状态...
基于小程序请求接口wx.request封装的类axios请求
11-20
这个例子展示了如何使用封装后的axios发起POST请求，与原生axios的用法基本一致。 此外，封装库还提供了如`axios.get()`、`axios.post()`等便捷方法，以及针对缓存的`axios.cache()`和`axios.cache.storage()`方法...
详解axios在node.js中的post使用
12-23
在node中，axios的get请求加上原生支持的Promise语法使用起来很方便，很丝滑，但是后面碰到了一个需求，就是要向另一个服务器post数据，并且这个数据是以form-data的形式post过去的，这时，问题就出现了。...
原生js封装的ajax方法示例
12-10
本文将详细介绍如何使用原生JavaScript封装一个简单的Ajax方法。 首先，我们要了解Ajax的核心是XMLHttpRequest对象，它提供了与服务器异步通信的能力。在非IE6浏览器中，我们直接创建`XMLHttpRequest`对象；而在IE6...
Javascript原生post请求
m0_46664046的博客
03-31 8610
记录一下Javascript原生post请求写法（通俗易懂）
原生html引入axios及echarts
qq_68575975的博客
01-13 2206
CDN引入axios:
使用原生js封装axios（详解）
weixin_46726346的博客
07-21 6917
摘要 在vue中，我们调用接口使用的都是axios，使用之前我们也会进行一定的封装，然后再进行使用。 在这里，我们主要说一下axios的实现原理，以及如何使用原生的js来自己封装出一个axios。 这里实现出几个主要的方法，包括post请求方法，create配置方法，以及拦截器的方法。 1.post方法 在我们写方法之前，肯定是要先自己写一个类出来，里面的内容先不用写。 然后再在类的下面写出post的方法： function iaxios () { } iaxios.prototype.post = f
JS封装类的get方法
m0_57996540的博客
09-12 308
get
原生js axios请求方式
CWZSB的博客
01-04 6914
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
js---封装ajax的get请求和post请求
前端与计算机相关知识的分享，博主的qq523235674
09-19 1607
1、函数接受一个对象配置信息，url为请求的地址，type为请求的类型，data为请求参数，success为请求成功的回调函数，fail为请求失败的回调函数。
原生ajax请求
qq_45683232的博客
03-11 765
ajax笔记
axios封装 get post 请求
06-28
### 回答1： axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js。它可以用于发送GET、POST等请求，并且可以拦截请求和响应，方便进行统一处理。 下面是axios封装get和post请求的示例： 1. 封装get请求 ```javascript import axios from 'axios' export function get(url, params) { return new Promise((resolve, reject) => { axios.get(url, { params: params }).then(res => { resolve(res.data) }).catch(err => { reject(err.data) }) }) } ``` 2. 封装post请求 ```javascript import axios from 'axios' export function post(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(res => { resolve(res.data) }) .catch(err => { reject(err.data) }) }) } ``` 以上是axios封装get和post请求的示例，可以根据实际需求进行修改和扩展。 ### 回答2： axios是一个基于promise的HTTP请求客户端，简单而强大。它可以在浏览器和node.js中使用，并使用了喜闻乐见的API。因此，很多前端开发人员都很喜欢使用axios进行数据交互。 但是，我们在使用axios进行数据请求时，有时候因为各种原因，我们会需要对axios进行一些封装，方便我们更好地使用。下面我们将介绍如何对axios进行封装。 首先需要安装axios依赖包，可以使用npm命令进行安装。 ```sh npm install axios --save ``` 接着，在我们需要使用axios的文件中引入模块： ```js import axios from 'axios'; ``` 然后，我们可以对axios进行封装，例如： ```js // 封装GET请求 export function getRequest(url, data = {}) { return new Promise((resolve, reject) => { axios .get(url, { params: data }) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); } ``` 在上面的代码中，我们使用Promise进行封装，将GET请求的url和参数作为函数的参数传入。在getRequest函数中，我们调用axios的get方法，并将请求返回的数据放在response中，最后通过resolve方法将获取到的数据返回。 同样地，我们也可以对axios进行POST请求的封装： ```js // 封装POST请求 export function postRequest(url, data = {}) { return new Promise((resolve, reject) => { axios .post(url, data) .then(response => { resolve(response.data); }) .catch(error => { reject(error); }); }); } ``` 在上面的代码中，我们同样使用Promise进行封装，并将POST请求需要的参数放在data中，然后通过调用axios的post方法进行发送请求，并将返回的数据放在response中，最后通过resolve方法将获取到的数据返回。 这样，我们就可以方便地使用封装好的axios函数进行数据请求。值得注意的是，在使用axios的时候，需要处理异常情况，例如请求失败、网络异常等情况，这些异常情况也需要进行处理。并且，我们还可以对axios进行更加复杂的封装，例如添加拦截器、处理请求头等操作，以实现更复杂的需求。 ### 回答3： Axios 是一种流行的基于 Promise 的 JavaScript HTTP 客户端，可以在浏览器和 Node.js 环境中使用。它允许我们以简洁的方式处理 HTTP 请求和响应数据，并使用拦截器对请求和响应进行全局处理。 在项目中使用 Axios 时，为了避免重复编写相同的代码，我们可以封装一个函数来处理 Get 和 Post 请求。以下是一个 Axios 封装函数的示例： ``` import axios from 'axios'; const request = function(config) { const { method, url, data } = config; // 创建 Axios 实例 const instance = axios.create({ baseURL: 'http://localhost:3000', // 服务端地址 timeout: 5000, // 请求超时时间 }); // 添加请求拦截器 instance.interceptors.request.use(config => { console.log('请求拦截器', config); // TODO: 添加 token 等请求头 return config; }, error => { console.error('请求拦截器错误', error); return Promise.reject(error); }); // 添加响应拦截器 instance.interceptors.response.use(response => { console.log('响应拦截器', response); // TODO: 处理公共错误码 return response.data; }, error => { console.error('响应拦截器错误', error); return Promise.reject(error); }); // 发送 Axios 请求 if (method === 'get') { // 处理 Get 请求 return instance.get(url, { params: data, // URL 参数 }); } else if (method === 'post') { // 处理 Post 请求 return instance.post(url, data); } } export default request; ``` 在上面的代码中，我们首先导入了 Axios 并创建了一个 request 函数。该函数接收一个 config 参数，其中包含以下三个属性： - method: 请求方法，包括 GET、POST、PUT、DELETE 等。 - url: 请求地址。 - data: 请求数据，只有在 POST、PUT 等方法中才会用到。 接下来，我们创建了一个 Axios 实例，并将 baseURL 设置为服务端地址，在请求超时时间设置为 5000 毫秒。 然后，我们添加了请求拦截器和响应拦截器。请求拦截器的作用是在发送请求前做一些处理，例如设置请求头部信息，响应拦截器的作用是在接收到响应后做一些处理，例如根据公共错误码进行处理。 最后，我们根据请求方法使用 Axios 实例发送请求，并返回 Promise。对于 Get 请求，我们通过使用 instance.get 方法将 params 参数作为 URL 参数进行发送；对于 Post 请求，我们通过使用 instance.post 方法将数据直接进行发送。 在应用中使用封装好的 Axios 函数非常简单。只需导入该模块并调用 request 函数，传递你需要的配置项即可： ``` import request from './request'; request({ method: 'get', url: '/api/user', data: { name: 'jane', age: 18, } }).then(data => { console.log('请求成功', data); }).catch(error => { console.error('请求失败', error); }); ``` 以上就是一个简单的 Axios 封装例子，只要在该基础上继续扩展，即可满足个人或者团队的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值