Ajax 搭配 Promise 封装

最新推荐文章于 2024-07-27 14:43:55 发布
最新推荐文章于 2024-07-27 14:43:55 发布
阅读量3.7k 收藏 6
点赞数 1
分类专栏： JavaScript 文章标签： Ajax Promise 异步处理 封装
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wildye/article/details/80216400
版权
本文介绍了Ajax的异步通信优势，如无刷新、高性能，但也指出其对搜索引擎和安全的挑战。接着探讨了Promise对象在处理异步操作中的作用，阐述了Promise的三种状态转换。文章还对比了JavaScript原生和jQuery中Promise的使用，并给出了封装示例。
摘要由CSDN通过智能技术生成

简述

Ajax（Asynchronous JavaScript And XML）

是一种创建交互式网页应用的开发技术、改善用户体验，实现无刷新效果

优点：

  • 无需插件支持
  • 页面无刷新，异步通信，具有更快的响应能力，更好的用户体验
  • 按需请求数据，减少冗余请求，提高性能

缺陷：

  • 使浏览器的回退机制失效
  • 对 搜索引擎 ，SEO优化 的支持不足
  • 安全问题，暴露了与服务器交互的细节

依赖 XMLHttpRequest 对象实现

  • 设置请求头
code type
application/x-www-form-urlencoded 表单字符类型
multiline/form-data 表单类型
application/json json 类型
text/xml 
xhr = new XMLHttpRequest();
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

Promise

是es6中的一个异步处理对象&
最低0.47元/天 解锁文章
凝弧
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
js用Promise封装原生ajax
listStyleScript的博客
05-12 219
Promise简单封装原生ajax 导入使用处 <script type="module"> import ajax from './js/ajax.js' // 使用import type="module"必须得加 ajax("https://api.it120.cc/yaojie/shop/goods/detail","get",{id:400537}).then(res=>{ cons
使用promise封装ajax
weixin_52772897的博客
04-28 228
<script> // 新建一个Promise对象 let Pro = new Promise((resolve, reject) => { // 1.创建对象 let clj = new XMLHttpRequest(); // 2.初始化,设置请求方式和接口地址 clj.open('get','./text.json'); // 3.发送请求 clj.send(); .
AJAX-Promise 详解
最新发布
来自计科萌新的编程记录本
07-27 911
学习目标：了解ajax中的Promise
用promise封装ajax_ajax使用promise的简单封装
weixin_39593523的博客
12-21 757
images.png第一次写写分享，文笔不好请见谅，使用的图片来源都是来自网络，如有侵权，请联系删除最近在研究学习promise，在网上看了很多别人的分享，受益匪浅，然后自己研究，大概有一两天，感觉有了一点眉目。平时的学习中经常使用到ajax就想自己试着封装一个，既能更熟悉的掌握promise又能对ajax的原理有一个了解觉得还是很值的，而且promise掌握了对后面的async也能够有一个更加清...
promise封装ajax
酒馆不打烊
02-08 544
#promise封装ajax var baseUrl = &quot;http://120.76.31.111/app/XhlGetSubjectTypeList&quot;; function getData(url){ return new Promise(function(resolve,reject){ var xhr = new XMLHttpRequest(); ...
ajax的promise封装
linxner的博客
06-12 1332
ajax是一个比较常用的异步操作，在Vue中或者其他框架的实例中如果使用$.ajax({})需要在success函数后面bind（this）或者var that=this，而且每次都要写各个重复的参数或者代码，不想叙述了，直接上代码吧，很方便用向外暴露一个方法：export function getData(url,back) { return new Promise((resolve, rej...
wx-ajax-promise:微信小程序中的 promise 封装的 ajax
05-31
wx-ajax-promise 封装微信小程序里的 ajax 成 Promise 形式 用法 安装 npm install wx-ajax-promise code import ajax from 'wx-ajax-promise' let data = await ajax.get('/user')
promise对axios二次封装、promise封装ajax、promise封装wx
helloWorld231a的博客
05-06 424
localStorage.removeItem(“eleToken”)//清除eleToken this.router.push(“/Login”)//让用户从新回到登录页面 } return Promise.resolve(error.response); } ); 步骤2.使用promise封装get(),post()请求。 get: export function get(url,params){ return new Promise((resolve,reject) => { axios.ge
ES6笔记————promise创建，封装ajax，async与await
m0_45293340的博客
09-12 584
ES6笔记————promise创建，封装ajax，async与await
使用promise封装ajax请求_promise ajax(1)，值得收藏
2401_84181434的博客
04-18 331
要知道，我们一个完整的项目势必会涉及到大量Ajax请求，如果我们每个请求都直接写Ajax请求，那么即使是请求同一个地址，只要发送的data参数产生了变化，就要重新写一遍ajax请求。看到上面的缺点，另外一位同学小刚说：“OK，我封装Ajax，但我直接用函数封装，不用Promise封装，那不是也可以避免重复劳动嘛。所以这种最"直接"的写法真所谓的费力不讨好，代码量变大，最后的效果反而不好，所以在工作中一定要避免重复劳动。小明同学说：“直接发送ajax请求不就得了，干嘛那么麻烦。，这里不再详细解释。
使用promise封装 原生ajax，$.ajax(),以及fetch
weixin_47724749的博客
11-12 233
文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
ajax基于promise简单封装
zhangqling的博客
03-26 142
function myAajx(option={}) { const defaults = { url: “”, method: “get”, data: null, }; option=Object.assign(defaults, option); option.data=queryString.stringify(option.data); // x-www-from let isGet=/^(GET|DELETE|OPTIONS|HEAD)/i.test(option.method); if(isG
用promise封装一个简单的ajax啊
lizhengxv的博客
09-27 922
function getJSON(url) { return new Promise(function(resolve, reject) { var XHR = new XMLHttpRequest(); XHR.open('GET', url, true); ...
封装ajax和Promise
danglina123的博客
04-20 784
 封装ajax和Promise标签： ajax promise 封装ajax es6promise 封装promise2017年09月30日 16:14:162339人阅读 评论(0) 收藏 举报 分类：JavaScript（28） 版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/ganyingxie123456/article/details/7814...
Promise封装ajax
YY的博客
11-13 1638
Promise封装ajax
封装ajax（promise封装）
weixin_44696379的博客
03-30 192
function ajax(options) { const xhr = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject; const method = options.method.toLocaleLowerCase() || 'get'; const url = options.url + '...
用promise封装ajax_关于 promise
weixin_29420421的博客
01-01 1250
一、promise出现的原因 是为了解决回调地狱的问题；二、promise 概述： 最先由CommonJS社区提出,在ES2015中被标准化,成为了语言规范三、promise 状态： 1、pending：等到中 2、fulfilled ：成功—— onFulfilled 3、rejected：失败—— onRejected ...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值