如何使用promise及参数解构封装ajax请求

最新推荐文章于 2024-04-21 19:01:04 发布
最新推荐文章于 2024-04-21 19:01:04 发布
阅读量235 收藏
点赞数
原文链接：https://blog.51cto.com/u_15154653/2701323
版权

本文主要介绍如何使用promise及参数解构封装ajax请求的方法，文章介绍的很详细，应该对大家的学习和工作有一定的参考价值，有需要的朋友可以参考

1.前端代码

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <script>

 /**

  * type: get/post

  * url: http://localhost:3000 http://localhost:3000/details http://localhost:3000/users

  * data: lid=5 / uname=lili&upwd=123456

  * dataType: '' / 'json', 如果服务端返回的是json格式字符串，就通过dataType通知ajax函数自动转换为对象

  * **/

 ajax({

  type: 'get',

  url: 'http://localhost:3000',

  dataType: 'json'

 })

 // data 不写在解构时值默认为 data: undefined

 ajax({

  type: 'get',

  url: 'http://localhost:3000/details',

  data: 'lid=0',

  dataType: 'json'

 })

 ajax({

  type: 'post', 

  url: 'http://localhost:3000/users', 

  data: 'uname=lili&upwd=123456',

 }).then(function(res){

  alert(res)

 })

 // dataType 不写在解构时值默认为 dataType: undefined



 function ajax({type, url,data, dataType}){

  return new Promise(function(open){

  var xhr = new XMLHttpRequest()

  xhr.onreadystatechange = function(){

   if(xhr.readyState === 4 && xhr.status === 200){

   if(dataType === 'json'){

    var res = JSON.parse(xhr.responseText)

   }else{

    var res = xhr.responseText

   }

   console.log(res)

   open(res)

   }

  }



  if(type === 'get' && data !== undefined){

   url += `?${data}`

  }

  xhr.open(type, url, true)

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



  if(type === 'get'){

   xhr.send( www.bjpoppers.com )

  }else{

   xhr.send(data)

  }

  })

 }

 </script>

</body>

</html>

另：ajax实际代码实现如下

<!DOCTYPE html>

<html>

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <title>Document</title>

</head>

<body>

 <script>

 var xhr = new XMLHttpRequest()

 xhr.onreadystatechange = function(){

  if(xhr.readyState === 4 && xhr.status === 200){

  console.log(xhr.responseText)

  }

 }

 xhr.open('get', 'http://localhost:3000', true)

 xhr.send()

 </script>

</body>

</html>

2.后端代码
1) 创建一个后端项目

在这里插入图片描述

2) 在routes下创建index.js,users.js，代码如下

// index.js

var express = require('express');

var router = express.Router();



/* GET home page. */

var products = [

 {

 lid:1,

 pname:'笔记本',

 price:3400

 },

 {

 lid:2,

 pname:'手机',

 price:5400

 },

 {

 lid:3,

 pname:'iPad',

 price:6400

 }

]



router.get('/', function(req, res, next) {

 res.send(products)

});



router.get('/details', function(req, res, next){

 var lid = req.query.lid

 res.send(products[lid])

})



module.exports = router;

3.末：
为了避免跨域，可以在一个项目中同时放置前端代码和后端，使用相同的地址，再次发送 Request接口

这是一篇关于使用如何使用promise及参数解构封装ajax请求的文章，更多相关可关注脚本之家！

双倍开心
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS 语法之-- 解构，Promise（异步）
weixin_30915951的博客
11-17 1390
解构： 　　JS 的结构很灵活：参考 　　　　https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax 　　列表解构 　　　　 　　参数解构 　　　　 　　数组解构 　　　　 　　　　 　　　　　　结构的时候，变量从左到右和元素对齐，可变参数放...
复习之深入Promise,实现ajax函数的封装
weixin_48264501的博客
07-05 122
什么是Promise JavaScript 这门语言是单线程执行的，这就导致一些耗时的操作会阻塞当前运行线程。为了解决这个问题，引入了“同步”和“异步”这两个概念。当多个异步任务需要顺序执行的时候，回调函数层层嵌套便产生了回调地狱。Promise，作为异步编程，回调地域的一种解决方案出现了。 Promise对象具有以下两个特点： 对象的状态不受外界影响。Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 re
JS常见面试题之 详解Promise使用与原理(1)，2024年最新hr打压面试者
最新发布
m0_60707263的博客
04-21 796
所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。我们在fs.readFile( )的回调函数里，在文件读取成功时调用resolve( )方法，失败的时候调用reject( )方法，把成功或者失败的结果通过2个函数的参数传入，为Promise在fulfilled或者rejected两种状态时提供数据。fs.readFile( )函数本身是一个异步行为，其方法的第三个参数为一个回调函数，用来接收文件读取的结果（失败时候的error和成功时候的content）。
Promise全解析
qq_35218523的博客
01-31 718
1 为什么需要promise 需求 通过ajax请求id, 再根据id请求用户名, 再根据用户名获取email 回调地狱 在回调函数中嵌套回调 Promise解决了回调地狱 2 Promise的基本使用 Promise是一个构造函数, 通过new关键字实例化对象 语法 new Promise((resolve, reject)=>{}) Promise接受一个函数作为参数 在参数函数中接受两个参数 resolve: 成功函数 reject: 失败函数 promise实例 p
es6学习（3）：从不会promise函数到——彻底掌握
weixin_43648202的博客
03-15 133
Promise 所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 Promise对象有以下两个特点： 1，对象的状态不受外界影响。Promise对象代表一异操作，有三种状态：pending（进行中），f...
JS语法---异常、模块化、解构、Promise(异步请求)
weixin_30908707的博客
08-14 243
异常 抛出异常 //捕获异常 try{ // throw new Error('new error'); // throw new ReferenceError('new error'); // throw new 1; //下面类型不报错，正常抛出 // throw new Number(100); ...
用Promise解决多个异步Ajax请求导致的代码嵌套问题(完美解决方案)
10-20
在前端开发中，异步Ajax请求是获取服务器数据的常见手段，然而，当存在多个依赖性的Ajax请求时，代码很容易陷入深度嵌套，这被称为“回调地狱”或“金字塔问题”，降低了代码的可读性和可维护性。Promise 是...
封装 axios+promise通用请求函数操作
10-14
在本文中，我们将深入探讨如何封装一个基于axios和Promise的通用请求函数，这对于任何Web应用程序的后端数据交互都是至关重要的。axios是一个流行的JavaScript库，用于处理HTTP请求，而Promise则是处理异步操作的一...
Vue Promise的axios请求封装详解
10-18
主要介绍了Vue Promise的axios请求封装详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue中promise的使用及异步请求数据的方法
10-17
本文将详细讲解如何在Vue项目中使用Promise进行异步请求数据。 首先，Promise允许我们定义异步操作的开始、成功和失败状态。在Vue组件的生命周期钩子`created`中，我们可以触发异步请求。例如，`getClassify`函数会...
JS 高级（七）ES6解构、class、promise
热门推荐
商务合作 | 共同学习 | 携手共进
09-17 1万+
JavaScript高级：ES6解构、class、promise。
利用promise及参数解构封装ajax请求
Sylvia的博客
01-06 284
文章目录1.前端代码2.后端 1.前端代码 <!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>
Promise最简解析
素钗一生推
06-24 225
Promise: n. 许诺，允诺；希望 vt. 允诺，许诺；给人以…的指望或希望 vi. 许诺；有指望，有前途 The Promise object is used for asynchronous computations. A Promise represents a single asynchronous operation that hasn't completed yet, b...
怎么通过promise解构封装ajax请求
weixin_56168069的博客
04-14 172
这篇文章主要介绍了怎么通过promise解构封装ajax请求,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下 1.前端代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
js--promise
jfx
10-02 192
promise Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 一个 Promise 必然处于以下几种状态之一： 待定（pending）: 初始状态，既没有被兑现，也没有被拒绝。 已兑现（fulfilled）: 意味着操作成功完成。 已拒绝（rejected）: 意味着操作失败。 因为 Promise.prototype.then 和 Promise.prototype.catch 方法返回的是 promise， 所以它们可以被链式调用。 当 .then() 中缺少能够返回 p
ES6中的Promise
qq_47355431的博客
10-23 101
回调函数分类 1.同步回调 理解:立即执行,完全执行完了才结束,不会放入回调队列中 例子:数组遍历相关的回调函数 / Promise的excutor函数 2.异步回调 理解:不会立即执行,会放入回调队列中将来执行 例子:定时器回调 / ajax回调 / Promise的成功|失败的回调 //1.同步回调函数 const arr = [1,3,5]; arr.f...
详解Promise使用与原理
weixin_50313248的博客
06-29 1783
详解Promise使用与原理一：Promise的概念二：Promise的生命周期三：如何让创建一个Promise四：编写Promise结果处理程序浅的讲差不多了，深的来了 --> .then 一：Promise的概念 Promise的中文意思是‘承诺’，什么叫承诺？承诺就是现在没有发生，在将来的某个时刻一定会发生的事情。 放在编程语言的环境下，Promise就是异步事件的结果的占位符。我们不用去管异步事件的结果什么时候来，只需要关心异步事件的结果产生的时候，你想要做什么就对了。 二：Promise的生
[译] 最深刻而易懂的ES6解构教程
weixin_34198881的博客
08-01 214
解构是ES6的新特性，用于从JavaScript对象和数组中提取数据，语法上比ES5所提供的更加简洁、紧凑、清晰。它不仅能减少你的代码量，还能从根本上改变你的编码方式。用的越多，你就会发现越多塑造数据和函数的方式，这些实现方式在过去几乎是不可能的。本文将深入探讨解构赋值，为你介绍该新特性中你所需要知悉的一切。 什么是解构？ 解构与构造数据...
使用promise封装ajax请求
03-25
A：可以使用以下代码封装ajax请求： ```javascript function ajaxPromise(url, params) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('POST', url, true); xhr....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值