ajax请求封装

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量521 收藏 1
点赞数
分类专栏： 学习笔记 文章标签： node.js javascript react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42161935/article/details/121492280
版权

第一件事，手动实现一个简单的ajax

function ajax(url,onSuccess,onFailed) {
   
	const xhr = window.XMLHTTPRequest ? new XMLHTTPRequest() : new ActiveXObject();
	xhr.open("get",url,true);
	xhr.send();
	xhr.onreadystatechange = function () {
   
		if(xhr.readyState === 4) {
   
			if(xhr.status === 200) {
   
				onSuccess && onSuccess(xhr.responseText);
			} else {
   
				onFailed && onFailed();
			}
		}
	}
}

第二件事，封装请求的拦截

请求的拦截一般干什么?
请求的拦截一般做一些公共校验，如果通过返回config，resolve后继续往下链
响应的拦截一般干什么？
拦截错误，公共的请求报错，处理返回数据等

 // ajax.html
 const adaptor = function (config) {
   
        return
最低0.47元/天 解锁文章
Cutey.
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ajax请求封装,封装的ajax请求
weixin_33676046的博客
08-06 1573
在做登录注册这类提交表单数据时，我们经常需要局部刷新网页来验证用户输入的信息，这就需要用到ajax请求，我们通常需要获取表单中的数据，发起ajax请求,通过服务程序，与数据库的数据进行比对，判断信息的正确与否。这儿也将ajax请求进行了封装，当我们在项目中需要多次ajax请求时，就可以用封装的函数了，不用每次都写ajax请求，提高了代码的利用率和工作效率。当然封装得不一定很完美，网上也有很多优秀的...
Ajax请求封装方法
07-24
AJAX即“Asynchronous JavaScript and XML”（异步的JavaScript与XML技术），指的是一套综合了多项技术的浏览器端网页开发技术。
基于JQuery的Ajax请求封装
-
02-07 1108
基于jquery的ajax请求封装 Jquery在异步提交方面封装的很好，直接用AJAX非常麻烦，Jquery大大简化了我们的操作，不用考虑浏览器的诧异了，.post、.get是一些简单的方法，如果要处理复杂的逻辑，还是需要用到jQuery.ajax() $.ajax的一般格式 $.ajax({ type: 'POST', url:'url', data:'...
2024年Web前端最新异步编程Ajax的详解，并对其进行封装整理(2)，前端开发在哪里学
2401_84438067的博客
05-06 856
我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。请求来举得例子，因此这里我就不多做说明，唯一要讲的就是，get请求所携带的数据是明文的，大小只有4k左右，而且它是写在URL的。这段代码是发送了一个。
Ajax：ajax请求封装jQuery库、测试jQuery库的使用
dengfengling999的博客
07-23 421
把原来在html页面中写的ajax请求代码，封装到一个js文件中，等以后调用的时候直接调用方法就行了，来简化开发。通过自己写的jQuery库前端就变得很简单了。输入内容，点击发送ajax请求。输入点击发送ajaxget请求。...
ajax请求的封装
fangqi20170515的博客
05-18 1038
1、原生的ajax /** * * @param callback 回调函数，处理响应结果 * @param method 请求方式 * @param url 请求地址 * @param async 同步/异步（true:异步，false:同步） * @param params 参数(`txtUser=xxx&txtPwd=xxx`) */ function ajax(obj) { obj.method = (obj.method || 'get').toLo
Vue(二十三)Ajax请求封装
Good Luck
05-23 752
封装cs.js文件 const cs = { }; (function () { // 公司开发环境 const cfg_dev = { api_url: 'http://127.0.0.1:8080', // 所有ajax请求接口父地址 web_url: 'http://www.baidu.com' // 此项目前台地址 (此配置项非必须) }; // 服务器测试环境 const cfg_test = { ap
vue2 ajax请求封装
paidaboluo的博客
07-23 615
vue2 ajax请求封装
jq封装ajax请求
m0_67658927的博客
09-05 337
jq封装ajax请求
uniapp封装ajax请求
qq_55272229的博客
08-26 2148
这样就把uniapp的回调ajax封装为了resolve,这里还类似封装了axios的拦截器。
原生ajax请求的封装
夜空孤狼啸的博客
02-26 1258
原生ajax请求的封装 原生ajax请求分为四步： 1.创建请求对象 判断浏览器的兼容问题 ie浏览器：window.ActiveXObject 常用浏览器：window.XMLHttpRequest if (window.XMLHttpRequest) { var xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { var xhr = new ActiveXObject("Microsoft
ajax请求封装请求（同步）
qq_34631220的博客
10-03 315
封装请求，async默认值true异步，改成false同步，定义一个全局变量，请求调用成功赋值，就能获得到数据，封装成功 <script> function getAjax() { var result = 1; $.ajax({ url: "", type: "post", data: {}, async: false, succe
封装了jQuery的Ajax请求全局配置
12-12
下面是在项目中封装了jQuery的Ajax，分享给大家。 代码： 代码如下: // ajax 请求参数 var ajaxSettings = function(opt) {  var url = opt.url;  var href = location.href;  // 判断是否跨域请求  var ...
ajax封装实例代码
11-04
在实际应用中，这个过程往往需要重复编写，因此将Ajax请求封装成一个函数或类是非常必要的。 1. **创建XMLHttpRequest对象** 在JavaScript中，我们首先需要创建一个XMLHttpRequest对象，它是Ajax的核心。通过`new ...
vue-ajax小封装实例
08-29
在这里，我们添加了一个名为`ajax`的方法，以便于Vue组件内部调用Ajax请求。 1. **addUrl方法**：这个方法负责处理URL和发送的数据。它可以处理GET和POST请求。对于GET请求，它将参数附加到URL上；对于POST请求，它...
Node.js(6)——npm软件包管理
m0_74386799的博客
08-03 342
npm是Node.js标准的软件包管理器。示例：初始状态下npm文件夹下只有server.js,下载软件包前看是否有package.json项目清单这个文件。没有就在集成终端运行npm init -y，自动生成。接着在下载软件包时npm i dayjs 出现错误。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 679
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 646
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 914
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
vue 数据ajax 请求封装
04-28
Vue中可以使用axios库来进行AJAX请求的封装。具体步骤如下： 1. 在项目中安装axios库，可以使用npm或yarn命令进行安装，如下： ```javascript npm install axios --save ``` 2. 在Vue项目中创建一个api.js文件，并在该文件中封装请求方法，如下： ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://example.com/api', }); export const get = (url, params) => api.get(url, { params }); export const post = (url, data) => api.post(url, data); export const put = (url, data) => api.put(url, data); export const del = (url) => api.delete(url); ``` 3. 在组件中引入api.js文件并使用封装好的请求方法，如下： ```javascript import { get, post } from '@/api'; export default { data() { return { list: [], } }, mounted() { this.fetchData(); }, methods: { async fetchData() { const { data } = await get('/list'); this.list = data; }, async submitData() { const { data } = await post('/submit', { name: 'test' }); console.log(data); }, }, } ``` 以上是一个简单的Vue中使用axios进行请求封装的示例。当然，在实际开发中，还需要考虑错误处理、请求拦截等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值