Promise + ajax + ES6

已于 2023-12-14 09:42:14 修改
阅读量77 收藏
点赞数 1
分类专栏： js 文章标签： javascript 前端 学习 后端 node.js
于 2023-03-11 10:12:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129459696
版权

一.检测数据的类型

1.typeof检测类型方式


        console.log(typeof 1) // 'number'
        console.log(typeof 'haha') // 'string'
        console.log(typeof true) // 'boolean'
        console.log(typeof undefined) // 'undefined'
        console.log(typeof null) // 'object'

面试题:typeof null 为"object", 
原因 :是因为不同的对象在底层都表示为二进制，在Javascript中二进制前（低）三位都为0的话会被判断为Object类型，null的二进制表示全为0，自然前三位也是0，所以执行typeof时会返回"object"

2.constructor属性检测类型方式

  • 数据.constructor === Array 代表数据是数组

  • 数据.constructor === Object 代表数据是对象

  • 数据.constructor === RegExp 代表数据是正则

  • 数据.constructor === Date 代表数据是日期对象

  • 无法判断Null 因为null无法访问constructor


1.普通函数
function Person(){
        }
 console.log(Person.prototype)
 console.log(Person.prototype.constructor)
 // 函数的prototype属性里面的constructor就是函数自身
 console.log(Person.prototype.constructor === Person)

2.构造函数
var p1 = new Person()
console.log(p1.__proto__)
console.log(p1.__proto__ === Person.prototype)
console.log(p1.__proto__.constructor)
// 任何实例访问constructor属性得到是构造函数自身

3.instanceof检测数据类型方式

  • 数据 instanceof 构造函数

  • 数据 instanceof Array

  • 数据 instanceof RegExp

  • 数据 instanceof Date


  var arr = [1,2,3,4]
  console.log(arr.constructor === Array) // arr的构造函数是Array
  console.log(arr instanceof Array)  // arr是不是Array的实例

4.万能检测方式


Object.prototype.toString.call(数据)
{}.__proto__ === Object.prototype
{}.toString.call(数据)

5.判断是不是数组


Array.isArray(数据)

二.数据类型的分类

  • 基础数据类型： string number boolean undefined null

  • 复杂数据类型 ：array object function regExp Date...

三.es5构造函数+原型+面向对象

  • // 定义

function 构造函数(){

}

  • // 利用构造函数实例化对象

var 实例 = new 构造函数()


// es5 构造函数
function Person(){
    // 利用this给对象自身添加属性
    this.x = 1
    this.y = 2
}
// 利用prototype来添加方法
Person.prototype.test = function(){
    
}
var p1 = new Person()
console.log(p1)

四.es6的面向对象


// 定义
class 类名{
}
// 利用类来实例化对象
var 实例 = new 类名()

五.前后端交互---ajax篇

1.http协议

  • http协议：超文本传输协议， 主要是约束我们前后端数据交互的行为

  • 数据交互：前后端相互发送数据的过程

  • 前端：又称客户端 浏览器、app、 小程序

  • 后端：又称服务端

http流程(面试热身题) important!!!

1.前后端发送数据之前，需要建立链接
	这个过程不需要前后端写代码实现，一般软件就已经自带了
	三次握手：
	  目的： 为了保证前后端双方都能够正常的收发信息
 		第一次握手   客户端向服务端发送一个seq=a 服务端接收到这个信息  
     		服务端知道客户端能够正常的发送信息
      		服务端知道服务端能够正常的接收信息
  		第二次手误   服务端接收到seq 对客户端返回一个ack=a+1和seq=b 客户单接收到这个信息
     		服务端知道客户端能够正常的发送信息
      		服务端知道服务端能够正常的接收信息
      		客户端知道客户端能正常接收信息
             客户端知道客户端能正常发送信息
             客户端知道服务端能正常发送信息
             客户端知道服务端能正常接收信息
  		第三次握手  客户端发送一个ack=b+1 服务端接收到这个信息
             服务端知道客户端能够正常的发送信息
             服务端知道服务端能够正常的接收信息
             服务端知道服务端能够正常的发送信息
             服务端知道客户端能够正常的接收信息
             客户端知道客户端能正常接收信息
             客户端知道客户端能正常发送信息
             客户端知道服务端能正常发送信息
             客户端知道服务端能正常接收信息
             
2.前端需要向后端发送一个请求（request）
	这个是需要前端写代码实现了
		表单： 在提交数据的同时会跳转到后端的地址
			表单点击后具有自动刷新网页的功能
		ajax： 在提交数据的同时会在当前页面 不会发生跳转
	每一个请求都有一个请求报文，可以通过这个报文去判断数据有没有发送 发送的对不对
		network-->找到某一个请求点击-->headers-->request headers
		请求行:
			请求方式 请求地址 请求协议
		请求头:
			键值对结构
		请求空行:
			看不见 但是存在
			区分请求头和请求体
		请求体:
			具体的请求数据 要发给后端的数据
			新版本的浏览器在payload里面查看
			老版本的浏览器在请求报文的最下面
	
3.后端需要给前端做出响应(response)
	响应需要后端写代码实现的
	每一个响应都有响应报文 这个响应报文可以通过这个响应的报文判断数据有没有给或者给的对不对
	响应行:
		协议  状态码  状态文字
	响应头:
		键值对结构
	响应体:
		具体后端响应的数据
		preview:
			此处看到的数据是经过浏览器解析
		response:
			看到的是源数据
			
4.断开链接
	这个断开的过程是软件自带的
	四次挥手
    	目的：确保双方都知道对方即将断开
    	第一次挥手： 客户端发送一个 FIN 报文，报文中会指定一个序列号。此时客户端处于 FIN_WAIT1 状态。
    	第二次挥手： 服务端收到 FIN 之后，会发送 ACK 报文，且把客户端的序列号值 +1 作为 ACK 报文的序列号值，表  		               明已经收到客户端的报文了，此时服务端处于 CLOSE_WAIT 状态。
    	第三次挥手： 如果服务端也想断开连接了，和客户端的第一次挥手一样，发给 FIN 报文，且指定一个序列号。此时服					  务端处于 LAST_ACK 的状态。
    	第四次挥手： 客户端收到 FIN 之后，一样发送一个 ACK 报文作为应答，且把服务端的序列号值 +1 作为自己 ACK 				    报文的序列号值，此时客户端处于 TIME_WAIT 状态。需要过一阵子以确保服务端收到自己的 ACK 报				   文之后才会进入CLOSED 状态，服务端收到 ACK 报文之后，就处于关闭连接了，处于 CLOSED 状态。

2.ajax的基本使用流程--get请求方式


// 创建ajax实例
var xhr = new XMLHttpRequest()
// 使用open配置请求信息
xhr.open('get', 'http://localhost:8888/test/first', false)
// 发出请求
xhr.send()
// 获取后端返回的数据
console.log(xhr.responseText)


get方式
     携带的参数需要拼接在地址的后面
     格式`?参数名=数据&参数名=数据&...`

3.ajax的基本使用流程--post请求方式


var xhr = new XMLHttpRequest()
xhr.open('post', 'http://localhost:8888/test/fourth', false)
// post方式发送数据之前需要设置参数的格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
// post方式发送的数据需要放在send里面  不要第一个问号
xhr.send('name=jack&age=18')
// 获取后端返回的数据
console.log(xhr.responseText)


携带参数需要放在send函数里面发送
     格式`参数名=数据&参数名=数据&...`
     在请求发出之前需要加上一行配置
          `xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')`

4.xhr.open详解


xhr.open('post', 'http://localhost:8888/test/fourth', false)
xhr.opne 用来配置请求信息具体如下：

第一个参数 'post'/'get'是ajax的请求方式
第二个参数 是ajax的请求接口 
	(1)http://localhost:8888  是基准地址
	(2)/test/fourth 是接口地址
第三个参数 false表示同步，true表示异步
	 同步： 代码执行的方式都是从上往下依次执行,上面的代码没有执行结束 下面不会执行的。这样如果我们有一段代码执行		   的时间比较长或者无法预估，可能导致程序阻塞
	 异步： 当js遇到执行时间比较长或者无法预估，js会把这段程序放到另一个队列，等所有同步的代码执行完成之后才会执			行异步的代码

5.使用ajax登录的小案例

<!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>
    <form>
        <!-- 此处的name -->
        <input type="text" placeholder="请输入用户名" id="username"><br>
        <input type="password" placeholder="请输入密码" id="password"><br>
        <button id="loginBtn">登陆</button>
    </form>
    <script>
        var userInput = document.getElementById('username')
        var passInput = document.getElementById('password')
        // 绑定点击事件 点击按钮提交数据
        document.getElementById('loginBtn').onclick = function(e){
            var evt = event || e
            evt.preventDefault()
            console.log('以ajax方式提交')
            var xhr = new XMLHttpRequest()
            xhr.open('post', 'http://localhost:8888/users/login', false)
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
            // 获取用户名
            let xm = userInput.value
            // 获取密码
            let mm = passInput.value
            xhr.send(`username=${xm}&password=${mm}`)
            console.log(xhr.responseText)
        }
    </script>
</body>
</html>

6.封装同步ajax


function ajax(type, url, data=''){
    var xhr = new XMLHttpRequest()
    if(type==='get'){
        // get方式请求参数是拼接在地址栏后面
        xhr.open(type, url+data, false)
        xhr.send()
    }else{
        // post方式放在send里面
        xhr.open(type, url, false)
        // 加上一行配置
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 裁去第一个问号
        xhr.send(data.slice(1))
    }
    // 将后端返回的数据作为返回值
    return xhr.responseText
}


调用：var goodsList = ajax('get', 'http://localhost:8888/goods/list')
     console.log(goodsList)
     var res = ajax('post', 'http://localhost:8888/users/login', '?username=jack&password=123456')
     console.log(res)

7.封装异步ajax


function ajax(options){
    // 定义一个默认的配置
    const defaultOptions = {
        type: 'get',
        data: ''
    }
    // 传入的配置和默认的配置合并
    const opt = {...defaultOptions, ...options}
    // {a:1, b:2, c:3} ---> '?a=1&b=2&c=3'
    // 传入的data对象拼接成一个参数格式的字符串
    if(opt.data.constructor === Object){
        let tmp = '?'
        for(let key in opt.data){
            tmp += `${key}=${opt.data[key]}&`
        }
        opt.data = tmp.slice(0, -1)
    }
    var xhr = new XMLHttpRequest()
    if(opt.type==='get'){
        // get方式请求参数是拼接在地址栏后面
        xhr.open(opt.type, opt.url+opt.data, true)
        xhr.send()
    }else{
        // post方式放在send里面
        xhr.open(opt.type, opt.url, true)
        // 加上一行配置
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 裁去第一个问号
        xhr.send(opt.data.slice(1))
    }
    xhr.onload = function(){
        // 在load里面调用callback 调用callback实际上就是在调用传过来的aa
        // 把后端返回的数据当成一个参数传给callback
        opt.success(xhr.responseText)
    }
}


调用	//当type为get时可以默认不写
	ajax({
            type: 'post',
            url: 'http://localhost:8888/users/login',
            data: '?username=jack&password=123456',
            // data: {
            //     username: 'jack',
            //     password: 123456
            // },
            success: function(res){
                console.log(res)
            }
        })

8.json与js的数据转换

JSON的含义：通用的数据格式,本质上是一种带有一定格式要求的字符串

！json是所有语言中都具有一种格式


前端把数据发送给后端
  - 需要把前端数据格式转换成json的格式在发送给后端
      + json格式 = JSON.stringify(js数据)
后端把数据响应给前端
  - 后端返回的json格式前端需要解析成js格式
      + js格式 = JSON.parse(json格式)

js和json的转换方式


js数据 = JSON.parse(json格式)
json数据 = JSON.stringify(js数据)

9.跨域问题

  1. JSONP解决跨域问题

script标签

利用script去请求别人的服务器 script可以请求别人的服务器 别人服务器响应的任何数据script都会当成js来解析

这种方式需要后端的配置 需要后端返回一定格式的数据

var 变量名 = 后端返回数据

函数名(后端返回数据)

前端就可以定义一个同名的函数 去接收后端返回的数据

缺点:

需要后端的配合 后端需要返回一定格式的数据

只支持get方式请求

  1. 配置代理

  1. 后端可以放开CORs(这样的话,安全性会大大的降低)

六.Promise

1.主要作用

主要为了解决异步获取数据的问题, 在promise之前 js获取一些异步的数据都是采用回调函数的方式

2.回调地狱

一个回调函数里面嵌套了另一个回调函数，回调函数层层嵌套

3.promise使用时注意的事项

  • 在创建实例的时候 Promise需要传递参数

  • 这个参数必须是一个函数类型 可以是一个普通函数 也可以是箭头函数

4.promise传参时注意的事项

  • 传入回调函数自带两个参数

  • 这两个参数也是一个函数

  • resolve 只要调用resolve 实例状态就会变为成功

  • reject 只要调用reject 实例状态就会变为失败

5.实例状态的不同

  • 每一个原型方法里面都需要传入一个回调函数

  • then的回调函数在实例状态变为成功的时候才会调用

  • catch的回调函数在实例状态变为失败的时候才会调用

  • 无论是成功还是失败都会调用finally里面回调函数

6.promise的状态

  • 一个promise实例最终只能有一个状态 要么成功 要么失败

  • 在调用reject的时候可以传递一个数据 这个数据就是实例失败的结果 叫做拒因 reason

  • 在调用resolve的时候可以传递一个数据 这个数据就是实例成功的结果 叫做终值value

7.语法


  基于面向对象封装  构造函数（Promise）
  实例的状态
      pending  等待
      fulfilled 成功
      rejected 失败
  实例的结果
  
  
  var p1 = new Promise(function(){})
  console.log(p1)
  var p2 = new Promise(()=>{})
  console.log(p2)


 实例的原型方法  then  catch  finally
     
      var p1 = new Promise(function (resolve, reject) {
        resolve();//成功
      });
      // 每一个原型方法里面都需要传入一个回调函数
      p1.then(function () {
        console.log("then的回调函数被调用了");// then的回调函数在实例状态变为成功的时候才会调用
      });
      p1.catch(function () {
        console.log("catch的回调函数被调用了");
      });
      p1.finally(function () {// 无论是成功还是失败都会调用finally里面回调函数
        console.log("finally的回调函数被调用了");
      });


      var p2 = new Promise((resolve, reject) => {
        reject();//失败
      });
      p2.then(function () {
        console.log("then的回调函数被调用了");
      });
      p2.catch(function () {
        console.log("catch的回调函数被调用了");// catch的回调函数在实例状态变为失败的时候才会调用
      });
      p2.finally(function () {// 无论是成功还是失败都会调用finally里面回调函数
        console.log("finally的回调函数被调用了");
      });

8.作用

可以替代回调函数获取异步的数据

七.请求状态码

  • xhr. status

  • 200： 成功

  • 301： 永久重定向

  • 302： 临时重定向

  • 304： 使用的是缓存的数据

  • 305： 使用代理

  • 400： 泛指一切客户端异常 请求方式不对 请求地址不对 请求参数没发或者发错了 请求参数的格式不对

  • 401： 未授权（你要登录的网站需要授权登录）

  • 403： 禁止访问 服务器拒绝了你的请求

  • 404： 网页走丢了 服务器找不到你请求的 URL

  • 500： 服务器内部错误

  • 503： 服务器当前不可用（过载或者维护）

  • 505： 请求的协议服务器不支持

八.promise的方法

  • 链式调用: 每一次调用then catch finally之后都会返回一个新的promise实例

  • 实例方法（原型方法）

  • 使用的时候需要得到一个实例 利用实例来调用

  • then/catch/finally

  • 静态方法

  • 使用的时候直接通过构造函数或者类来调用的

  • all/race/allSettled/any


Promise.all()
Promise.any()
Promise.allSettled()
Promise.race()
// 这些方法直接通过Promise的构造函数来调用

all方法


		const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('11')
            }, 3000)
        })
         const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('22')
            }, 2000)
        })
         const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('33')
            }, 1000)
        })
        // all方法接受一个数组类型的参数
        // 该数组里面每一项数据都是一个promise实例
        // 方法调用之后会有一个返回值  返回的是一个新的promise实例
        // 数组里面所有实例状态变为成功 就会调用then方法
        // 数组里面只要有一个实例状态变为失败 就会调用catch方法
        Promise.all([p3, p1, p2]).then(res=>{
            // res是一个数组 数组里面是每一个实例的终值
            console.log(res, 'then')
        }).catch(err=>{
            console.log(err, 'catch')
        })

allSettled方法


		const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('11')
            }, 3000)
        })
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('22')
            }, 2000)
        })
        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('33')
            }, 1000)
        })
        // allSettled无论成功还是失败都会进入then
        Promise.allSettled([p1,p2,p3]).then(res=>{
            console.log(res, 'res')
            // 能够拿到所有实例的结果  这个结果是经过处理 标记一个状态

            const successList = res.filter(item=>item.status === 'fulfilled')
            console.log(successList)
            const errorList = res.filter(item=>item.status === 'rejected')
            console.log(errorList)
        })

any方法


		const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('11')
            }, 3000)
        })
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('22')
            }, 2000)
        })
        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('33')
            }, 1000)
        })
        Promise.any([p1,p2,p3]).then(res=>{
            console.log(res, 'then')
        })

race方法


 const p1 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('11')
            }, 3000)
        })
        const p2 = new Promise((resolve, reject) => {
            setTimeout(() => {
                reject('22')
            }, 2000)
        })
        const p3 = new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve('33')
            }, 1000)
        })
        Promise.race([p1,p2,p3]).then(res=>{
            console.log(res, 'res')
        }).catch(err=>{ 
            console.log(err, 'err')
        })

九.数组的高级用法(es6)


  		// 伪数组 
        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        for(let i=0;i<arrayLike.length;i++){
            console.log(i)
            console.log(arrayLike[i])
        }  
        // 伪数组--> 真数组
        const arr = Array.from(arrayLike)
        arr.forEach(item=>{
            console.log(item)
        })

        // 多维数组扁平化
        var arr3 = [1,2,[3,4], 5]
        var arr2 = [1,3,[2,3,4, [5,6,7,[4,5,65,7,8,[4,3,43]],5]]]
        arr2 = arr2.flat(Infinity)
        console.log(arr2)

十.对象遍历的方法(es6)


 		const person = {
            a:1,
            b:2,
            c:3,
            d:4
        }
        // 最常用 for...in 循环
        for(let key in person){
            console.log(key)
            console.log(person[key])
        }
        // Object.keys()
        Object.keys(person).forEach((item, index)=>{
            console.log(item)
        })
        console.log('-----------------')
        for(let key of Object.keys(person)){
            console.log(key)
        }
        // Object.getOwnPropertyNames(obj)
        console.log(Object.getOwnPropertyNames(person))

十一.对象合并的方法(es6)


    	const person = {a:1, b:2, c:3}
        const person2 = {aa:1, bb:2, c:30}

        // 1. 展开运算符
        const newPerson = {...person, ...person2}
        
        // 2. Object.assign()
        Object.assign(person, person2) // 将person2合并到person
        console.log(person)

        // Object.assign()不可以合并数组
        var arr = [1,2,3]
        var arr2 = [11,22,33]
        const newArr = Object.assign(arr, arr2)
        console.log(newArr)

判断对象是否为空


 // 1. 判断对象为空 可以将对象转换成json 利用字符串比较规则
         function move(obj){
            console.log(JSON.stringify(obj))
            if(JSON.stringify(obj) === '{}'){
                // 代表空对象
                console.log('是空对象')
            }else{
                // 不为空
                console.log('不是空对象')
            }
        } 

        // 2. 利用for..in方法
        function isEmptyObj(obj){
            for(let key in obj){
               return false
            }
            return true
        }
        console.log(isEmptyObj({}))

        // 3. es的方法 Object.keys()
        // 此方法可以将对象里面所有的键都取出 放到一个数组里面
        const person = {}
        const arr = Object.keys(person)
        console.log(arr)


        // function isEmptyObj2(obj){
        //     return Object.keys(obj).length === 0
        // }
        const isEmptyObj2 = obj => Object.keys(obj).length === 0
苦逼的猿宝
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
大厂Web全栈工程师 Promise+ES6+Vue高级+React高级+前端工程化+Node.js+AST+Webpack
06-23
完成课程的学习课程可以帮助同学们从普通的Web工程师蜕变为高级Web全栈开发工程师，课程可以同学们全程的了解以Promise、ES6、Vue高级、React高级、前端工程化、Node.js、AST、Webpack技术为主的Web全栈技术，非常的...
ES6中异步对象Promise用法详解
12-10
本文实例讲述了ES6中异步对象Promise用法。分享给大家供大家参考，具体如下： 回忆一下ES5中的怎么使用异步方法 // es5中的异步回调 let ajax = function(callback){ console.log('执行') // 执行 setTimeout(()...
手把手教你Es6的promise对象？及用法讲解 ajax的封装
weixin_52139094的博客
05-25 163
Promise是异步编程的一种解决方案。 从语法上说，Promise 是一个对象，从它可以获取异步操作的消息 可以解决回调地狱（回调函数嵌套回调函数） promise的含义（本身不是异步，是封装异步操作的容器，统一异步的标准） promise对象的特点：对象的状态不受外界影响；一旦状态改变，就不会再变，任何时候都可以得到这个结果 前引 js中的异步操作有哪些 ajax请求 var xhr = new XMLHttpRequest(); xhr.onreadystatechange=function(){}
es6的promise的ajax,es6中promise实现ajax的例子
weixin_35125164的博客
08-05 570
function getData(url){var pro = new Promise(function(resolve,reject){var xhr = null;try{xhr = new XMLHttpRequest()}catch(e){xhr = new ActiveXObject("Microsoft.XMLHTTP");}xhr.open("get",url);xhr.onread...
Es6Promise+异步请求
yangzhenyu2的博客
05-31 328
ES6 Promise Promise,就是为了解决多层的函数，方法的嵌套调用而存在的； “它就是把一层一层向内嵌套调用的方法，给拉成一串连续调用的方法”，每个嵌套调用的方法，都向调用者返回this，也就是返回自身，然后带着上一次的调用结果，进入下一个嵌套调用的环节。 伪代码： <script type="text/javascript"> //普通的嵌套js function xx(){ function aa(){ function ss(){
ES6 Promise用法小结
热门推荐
涂涂
07-25 38万+
目录 1.什么是Promise reject的用法 catch的用法 all的用法 race的用法 1.什么是Promise Promise 是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、resolve这几个方法，原型上有then、catch等方法。 Promise对象有以下两个特点。 （1）对象的状态不受外界影响。Promise对象代表一个异步操...
ES6 使用 Promise 封装 ajax
搞钱
10-27 90
使用 Promise 封装 ajax
用promise封装ajax_ES6中Promise封装ajax的写法
weixin_42133415的博客
02-05 370
1.依赖jquery的写法可以使用下面的(function($){$.extend({ajaxPromise: param => {return new Promise((resolve, reject) => {$.ajax({method: param.method || "GET",dataType: "JSON",url: param.url,data: param.data...
ES6+新特性学习
demon7552003的小本本
10-22 1341
ES6+的新特性
es6 promise的ajax,带有ES6 Promise的jQuery ajax
weixin_33743292的博客
08-06 220
我试图使用ES6 Promise通过jQuery发出发布请求：我有一个功能：getPostPromise(something, anotherthing) {return new Promise(function(resolve, reject) {$.ajax({url: someURL,type: 'post',contentType: 'application/json; charset=u...
es6的promise的ajax,ES6 用Promise对象实现的 Ajax 操作
weixin_32584807的博客
08-05 268
下面是一个用Promise对象实现的 Ajax 操作的例子。const getJSON = function(url) {const promise = new Promise(function(resolve, reject){const handler = function() {if (this.readyState !== 4) {return;}if (this.status === 2...
ES6中Promise用法（封装Ajax）
qq_65715980的博客
07-20 820
Promise是异步编程的一种解决方案，可以替代传统的解决方案--回调函数和事件。ES6统一了用法，并原生提供了Promise对象。作为对象，Promise有一下两个特点。
小程序使用es6封装ajax源码案例
06-25
小程序使用es6封装ajax源码案例，使用简单，没用过es6的也能看懂了
深入理解ES6 Promise 扩展always方法
12-10
ES6添加了Promise对象，成功时在then中处理，失败则在catch中处理，但有时候，我们需要在无论成功或失败时都要做一些事，比如隐藏loading, 记录日志等等，下面我们以浏览器端ajax请求为例，我们使用axios（它是基于...
微信小程序Http高级封装 es6 promise
03-29
看了下小程序的请求方式大概和ajax请求差不多，所以先打好基础 从封装http请求开始 好了废话不多说了，上代码 首先。。。。当然是建立配置文件，用来配置请求根路径 config.js export default { basePath: '...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 359
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 521
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
基于JavaScript 如何实现爬山算法以及优化方案
最新发布
乐闻世界
06-10 1333
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 552
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
es6 promise
04-28
ES6 Promise是JavaScript的一种异步编程方法，被广泛应用于现代的Web开发中。它是一种简化异步编程的一种技术，旨在解决传统异步编程中回调函数复杂、嵌套过深的问题。 ES6 Promise实现了一系列Promise的方法，如...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

苦逼的猿宝

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值