Ajax_原生学习,同步异步,回调函数,回调地狱,Promise_语法学习,Promise_三种状态,Promise的静态方法_all,race,resolve和reject,

于 2022-11-14 22:19:00 发布
阅读量279 收藏 1
点赞数
文章标签： javascript 前端 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GW05431/article/details/127856886
版权

Ajax_原生学习

目标

了解原生JS如何编写和发送Ajax请求

讲解

Ajax是一个技术的名称, 而以前我们具体使用的是axios.js插件来发送请求 ，但是axios.js也是一个库, 内部是原生JS代码, 实际它是对原生的代码进行了封装。 今天我们就来解开神秘的面纱 Ajax如果用原生JS实现, 需要使用window提供的一个构造函数, 叫XMLHttpRequest

XMLHttpRequest

使用语法如下:

// 请求省份名字列表
// 接口地址: http://ajax-api.itheima.net/api/province
// 请求方式：GET
​
// 原生Ajax编写↓
// 1.创建一个xhr对象
let xhr = new XMLHttpRequest()
​
// 2.设置请求方式和请求地址 xhr.open("请求方式", "请求地址")
xhr.open('GET', 'http://ajax-api.itheima.net/api/province')
​
// 3.发送请求
xhr.send()
​
// 4.监听load(请求成功)事件 ==> 可以获取响应数据
​
xhr.addEventListener('load', function () {
    console.log(xhr.response) // 响应体数据
​
    // 知识点: 把JSON格式字符串 ==> 转成JS数据类型
    // 语法: JSON.parse(JSON字符串)
    // 返回值: JS数据类型
    let result = JSON.parse(xhr.response)
    console.log(result);
})

代码运行流程

###

小结

Ajax原理是?

  • window提供的XMLHttpRequest构造函数

Ajax_原生传参

目标

了解Ajax原生编码传参使用

讲解

新建Ajax_原生传参.html

// 目标: 请求辽宁省下所有城市列表
let xhr = new XMLHttpRequest()
​
// 复习: 之前说过query查询参数要携带在url?后面
// 格式: 参数名=值&参数名=值
xhr.open('GET', `http://ajax-api.itheima.net/api/city?pname=辽宁省`)
​
xhr.send()
​
xhr.addEventListener('load', function () {
    let result = JSON.parse(xhr.response)
    console.log(result);
})

小结

  1. 原生Ajax如何传递查询参数?

  • 在url?后面拼接查询参数

Ajax_原生POST

目标

了解原生POST请求和请求体使用

讲解

新建Ajax_原生POST.html, 请求POST测试接口

// 目标: 测试POST请求
// 接口地址: http://ajax-api.itheima.net/api/books
// 请求方式: POST
// 参数随意
​
let xhr = new XMLHttpRequest()
​
xhr.open('POST', `http://ajax-api.itheima.net/api/books`)
​
// 1. 请求体要在这里携带
// 请求体支持三种内容类型, 用哪个还是要和后端对上
xhr.send(JSON.stringify({
    bookname: '黑马',
    author: '老李',
    publisher: '黑马出版社'
}))
​
xhr.addEventListener('load', function () {
    let result = JSON.parse(xhr.response)
    console.log(result);
})

  1. 发现后端并没有解析到我们的参数, 通过后台提示和Network检查, 我们请求头Content-Type的值不对

  2. 解决: 所以axios会自动携带Content-Type内容请求头, 而原生的就需要自己携带啦!

​
// 2. 需要携带请求头Content-Type和固定值指定传递的请求体内容类型, 让后端用对应方式解析
// 要注意: 在open后send前之间设置
xhr.setRequestHeader('Content-Type', 'application/json')

  1. 最终落地完整代码

// 目标: 测试POST请求
// 接口地址: http://ajax-api.itheima.net/api/books
// 请求方式: POST
// 参数随意
​
let xhr = new XMLHttpRequest()
​
xhr.open('POST', `http://ajax-api.itheima.net/api/books`)
​
​
// 2. 需要携带请求头Content-Type和固定值指定传递的请求体内容类型, 让后端用对应方式解析
// 要注意: 在open后send前之间设置
​
xhr.setRequestHeader('Content-Type', 'application/json')
​
// 1. 请求体要在这里携带
// 请求体支持三种内容类型, 用哪个还是要和后端对上
xhr.send(JSON.stringify({
    bookname: '黑马',
    author: '老李',
    publisher: '黑马出版社'
}))
​
​
​
xhr.addEventListener('load', function () {
    let result = JSON.parse(xhr.response)
    console.log(result);
})

小结

  1. 请求体内容类型有哪三种?

  • 键值对字符串

  • JSON字符串

  • 表单数据FormData

概念_同步异步

目标

  • 掌握哪些是同步代码

  • 掌握哪些是异步代码

讲解

请先阅读如下代码的执行顺序并说出打印结果

<script src="https://cdn.jsdelivr.net/npm/axios@0.27.2/dist/axios.min.js"></script>
<script>
    console.log(1)
    if (true) {
        console.log(2);
    } else {
        console.log(3);
    }
    setTimeout(() => {
        console.log(4);
    }, 1000)
    const fn = () => {
        console.log(5);
    }
    for (let i = 0; i < 3; i++) {
        console.log(6);
    }   
    console.log(7);
    fn()
    document.addEventListener('click', () => {
        console.log(8);
    })
    axios({
        url: 'http://ajax-api.itheima.net/api/province',
        method: 'GET'
    }).then(() => {
        console.log(9);
    })
    console.log(10);
</script>

  1. 打印的结果是

1 2 666 7 5 10 9 4

  1. 异步代码有如下, 其他都是同步按上到下逐行执行

    • setTimeout: 一次性定时器

    • setInterval: 定时器

    • Ajax

    • 事件

小结

  1. JS中都有哪些异步代码?

  • 定时器, Ajax, 事件

概念_回调函数

目标

掌握回调函数的使用和执行过程

讲解

  1. 异步一般都需要耗时, 而且不会阻塞主线程代码往下执行

  2. 那万一异步代码有了结果, 怎么能让某段代码执行呢?

JS中, 只有用函数调用的方式, 才能让某一段代码去执行

  1. 所以你发现前面异步的代码, 都有一个函数体, 这个函数体里代码都是等待这个异步任务有结果后执行

所以这个函数体, 会被回调执行

  1. 把一个函数当成实参传递, 将来特定的时机调用, 这个函数体就叫回调函数

  2. 我们可以自己定义一个回调函数, 看看代码执行顺序, 体验下回调的感觉

function theFn(fn) { // fn = () => { console.log('回调函数执行') }
    fn() // 代码执行到这句话, 会回调theFn()里函数体执行, 这个过程就叫回调函数
}
​
theFn(() => { // 此箭头函数体作为实参值传递给了thenFn的形参变量fn上
    console.log('回调函数执行');
})
​
​
// 小结: 所以以后在调用一个函数时, 把函数体作为实参值传入到另一个函数内, 它应该就是一个回调函数应用了
// 例如forEach等数组方法都是回调函数的运行, 还有我们所有的异步任务都有回调函数的应用

  1. 所以回调函数应用非常广泛, 不只是接收异步的结果, 可以恰当的流程中进行调用, 其他场景, 例如数组的forEach方法

小结

  1. 什么是回调函数?

  • 把一个函数当做实参传递, 将来特定的时机调用, 这个函数体就叫回调函数

概念_回调地狱

目标

掌握回调地狱概念的理解

讲解

这里我们以一个, 请求省市区列表, 最终获取地区列表为例,  来体验下回调地狱, 直接复制代码查看

// 目标: 获取所有省市区数据, 随便获取
// 1. 获取所有省份列表
axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    // 2. 获取某个省, 对应的城市列表
    let pname = res.data.data[5];
    axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`).then(res => {
        // 3. 获取某个市, 对应的地区列表
        let cname = res.data.data[0]
        axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`).then(res => {
            console.log(res);
        })
    })
})
​
// 上面的代码就出现了回调地狱
// 概念: 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱

小结

  1. 什么是回调地狱?

  • 在回调函数内, 再嵌套回调函数, 一直嵌套下去形成了回调地狱

Promise_语法学习

目标

掌握Promise相关语法使用

讲解

Promise在设计之初, 就是为了解决回调地狱

新建html文件, 来熟悉下Promise的相关语法

// 语法:
/*
            let Promise对象变量名 = new Promise((resolve, reject) => {
                // resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
                resolve(成功结果) // 触发.then()小括号里函数体执行
                reject(失败结果) // 触发.catch()小括号里函数体执行
            })
​
​
            Promise对象变量名.then((成功结果变量名) => {
​
            }).catch((失败结果变量名) => {
​
            })
​
        */
let p = new Promise((resolve, reject) => {
    // resolve和reject是Promise内提供的2个函数, 用于回调返回结果到外面
    
    // resolve('成功了')
    reject('失败了')
})
​
p.then(res => {
    console.log(res)
}).catch(err => {
    console.error(err)
})

小结

  1. Promise对象内的resolve和reject函数作用?

  • 回调外部的then/catch, 传递成功/失败的动作和结果

Promise_配合异步

目标

掌握用Promise来管理异步代码

讲解

新建Promise_配合异步.html来使用Promise包裹一个异步任务代码, 来看看效果

// 例1 配合定时器使用
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功结果')
    }, 2000)
})
​
p.then(res => {
    console.log(res); // 2秒后返回'成功结果'
})

小结

  1. Promise是否必须和异步代码使用?

  • 不一定, 看情况

Promise_三种状态

目标

了解Promise的三种状态

讲解

新建Promise_三种状态.html来讲解, 在上个代码的例子来说明为何代码会这样执行

// 1. 创建Promise对象并返回此对象在原地, 并立刻执行函数内代码, 交给浏览器去做倒计时了(异步, 不会阻塞主线程代码往下走, 所以继续走2)
let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // 3. 等2秒后, resolve触发, 影响p对象状态
        resolve('成功结果') // resolve => fulfilled状态 => .then
        reject('失败结果') // reject => rejected状态 => .catch
    }, 2000)
})
​
// 2. 立刻给p对象添加.then函数并传入函数体等待被调用接收成功结果(此是.then()小括号里函数体不会执行)
p.then(res => {
    console.log(res); // 2秒后返回'成功结果'
}).catch(err => {
    console.error(err)
})
​
// 总结: 每个Promise对象有状态凝固特性, 就是Promise对象确定是成功/失败, 就不能再备更改了

  1. Promise有三种状态

    • new实例化后, Promise对象(pending准备状态) -> 也是在原地给个承诺

    • 当Promise内代码执行了resolve, 会导致所在的Promise对象(fulfilled成功状态) ->  兑现状态 -> 把值传给then

    • 当Promise内代码执行了reject, 会导致所在的Promise对象(rejected失败状态) -> 拒绝状态 -> 把失败值传给catch

小结

  1. Promise对象内部有几种状态?

  • pending, fulfilled, rejected

  1. Promise对象的状态如何切换?

  • 刚创建会立刻执行new Promise函数内代码, 此时为pending准备状态

  • 当Promise对象内异步代码有结果触发resolve, 会导致Promise对象状态为fulfilled兑现成功状态

  • 当Promise对象内异步代码有结果触发reject, 会导致Promise对象状态为rejected失败状态, 拒绝兑现承诺

  1. 什么是Promise的状态凝固?

  • 当Promise对象状态改变后, 无法再次改变

Promise_链式调用

目标

掌握Promise的链式调用

讲解

编写代码进行讲解

let p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
​
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})
​
p.then(res => {
    console.log(res);
    return p2 // 如果return一个Promise对象,它的结果, 会被下个then接收
}).then(res => {
    console.log(res);
})

小结

  1. then里return的Promise对象结果, 交到哪里执行?

  • 下一个then接收成功结果

Promise_解决回调地狱

目标

使用Promise来解决回调地狱

讲解

  1. 新建html文件, 用axios方法原地返回Promise对象特性

  2. 用.then()里return Promise对象结果会被链式调用下一个then接收特性

把回调函数嵌套的写法, 变成链式调用then的形式

// 目标: 使用Promise的链式调用解决问题
// 前提: axios函数在原地返回的就是一个Promise对象
let pname = ''
axios.get('http://ajax-api.itheima.net/api/province').then(res => {
    // 2. 获取某个省, 对应的城市列表
    pname = res.data.data[5];
    return axios.get(`http://ajax-api.itheima.net/api/city?pname=${pname}`)
}).then(res => {
    // 3. 获取某个市, 对应的地区列表
    let cname = res.data.data[0]
    return axios.get(`http://ajax-api.itheima.net/api/area?pname=${pname}&cname=${cname}`)
}).then(res => {
    console.log(res);
})

小结

  1. Promise是如何解决回调地狱的问题的?

  • 根据.then的链式调用把Promise对象串联起来

Promise的静态方法_all

目标

能说出Promise.all方法的作用

Promise的all方法

// 目标: 讲解Promise的all方法
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.all() 
// 作用: 合并多个Promise对象, 等待所有成功后, 返回结果
// 语法: Promise.all([promise对象1, promise对象2, ...]).then()
// 特点: 返回最终结果是个数组, 值是按顺序对应小Promise对象的成功结果
// 注意: 如果有1个Promise失败, 则整个Promise对象则失败
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功3')
    }, 2000)
})
​
Promise.all([p1, p2, p3]).then(res => {
    console.log(res);
})

小结

  1. Promise.all方法有什么作用?

  • 合并并发多个Promise对象, 等待所有人成功, 按顺序接收结果

Promise的静态方法_race

目标

  • 能说出Promise.race方法的作用

讲解

  1. 讲解Promise的race方法

// 目标: 讲解Promise的race方法
// 静态(类)方法: 直接用Promise类来调用
// 1. Promise.race() - 赛跑机制
// 作用: 发起并行多个Promise对象, 等待只要任何一个成功, 返回结果执行then
// 语法: Promise.race([promise对象1, promise对象2, ...]).then()
// 特点: 返回某个promise对象成功的结果
let p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功1')
    }, 2000)
})
let p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功2')
    }, 2000)
})
let p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('成功3')
    }, 2000)
})
​
Promise.race([p1, p2, p3]).then(res => {
    console.log(res);
})
Promise.race([p1, p2, p3]).then(res => {
    console.log(res);
})

小结

  1. Promise.race方法有什么作用?

  • 合并并发多个Promise对象, 接收最先成功的结果

Promise的静态方法resolve和reject

目标

能说出Promise的静态方法resolve和reject方法作用

讲解

了解Promise的resolve和reject方法即可

// 目标: 讲解Promise静态方法的resolve和reject
// 1. 先看如下效果, 封装求2个数的和函数
function sumFn(numA, numB) {
    if (numA && numB) {
        return numA + numB
    } else {
        return '请传递参数'
    }
}
​
let result1 = sumFn(10, 20)
let result2 = sumFn()
// 返回的结果要么是和要么是字符串, 不太方便判断是否成功/失败
​
​
// 2. 所以这个时候, 我们可以用Promise的静态方法, 把结果包装成Promise对象
​
// 3. Promise.resolve()
// 作用: 把现有的值包装成成功状态的Promise对象并返回
// 返回值: 一个成功状态的Promise对象和结果
function myFn(numA, numB) {
    if (numA && numB) {
        return Promise.resolve(numA + numB) // 现在返回的Promise对象
    } else {
        return '报错'
    }
}
​
myFn(10, 20).then(res => {
    console.log(res);
})
​
// 但是myFn().then() 这样写会报错, 因为返回的字符串无法调用then
​
// 解决, 也得把错误提示字符串包装成Promise对象
// 4. Promise.reject()
// 作用: 把现有的值包装成失败状态的Promise对象并返回
// 返回值: 一个失败状态的Promise对象和结果
function theFn(numA, numB) {
    if (numA && numB) {
        return Promise.resolve(numA + numB) // 现在返回的Promise对象
    } else {
        return Promise.reject('报错')
    }
}
​
theFn().then(res => {
    console.log(res);
}).catch(err => {
    console.error(err);
})
​
// 一般在封装库的时候常用, 所以了解其作用即可

小结

Promise.resolve和Promise.reject有什么作用?

  • 把值转成Promise对象，并设置状态和返回结果

案例封装Ajax函数查询参数

目标

了解封装原生Ajax请求的代码

讲解

新建html文件, 封装itheimaAxios函数, 并复习axios的GET和params传参使用, 暂时不考虑请求体传参

function itheimaAxios({ url: url, method: method = 'GET', params: params }) {
    // 1. 外面需要Promise对象, 所以创建一个并返回
    return new Promise((resolve, reject) => {
        // 2. 解构配置对象参数使用
        let xhr = new XMLHttpRequest()
​
        // 3. 做判断, 如果params有值, 则需要携带在url?后面
        if (params) {
            // 把对象转成key=value&key=value格式字符串
            let arr = []
            for (let key in params) {
                // 先转成数组[key=value, key=value]这样格式
                arr.push(`${key}=${params[key]}`)
            }
            url = url + '?' + arr.join('&')
​
            // 高端写法
            // url += '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
        }
​
        xhr.open(method, url)
        xhr.send()
        xhr.addEventListener('load', function () {
            let result = JSON.parse(xhr.response)
            console.log(result);
        })
    })
}
​
​
// 目标: 封装Ajax函数
// 我们知道axios就是封装了原生的Ajax的代码, 我们也模拟下, 先回顾下axios方法使用
// 然后封装完上面的函数后, 把axios名字换我们自己的发现也ok, 封装成功
itheimaAxios({
    url: 'http://ajax-api.itheima.net/api/area',
    // method: 'GET',
    params: {
        pname: '辽宁省',
        cname: '大连市'
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err)
})

小结

  1. 为何使用axios的配置项key名固定的?

  • 因为函数内部会使用这些属性名

  1. axios内是如何处理params参数的?

  • 把对象转成key=value&key=value字符串格式拼接在url?后面带给服务器

案例封装Ajax函数请求体

目标

能了解Ajax函数内对请求体的处理

讲解

在上个代码基础上继续完成

function itheimaAxios({ url: url, method: method = 'GET', params: params, data: data }) {
    // 1. 外面需要Promise对象, 所以创建一个并返回
    return new Promise((resolve, reject) => {
        // 2. 解构配置对象参数使用
        let xhr = new XMLHttpRequest()
​
        // 3. 做判断, 如果params有值, 则需要携带在url?后面
        if (params) {
            // 把对象转成key=value&key=value格式字符串
            let arr = []
            for (let key in params) {
                // 先转成数组[key=value, key=value]这样格式
                arr.push(`${key}=${params[key]}`)
            }
            url = url + '?' + arr.join('&')
​
            // 高端写法
            // url += '?' + Object.keys(params).map(key => `${key}=${params[key]}`).join('&')
        }
​
        xhr.open(method, url)
​
​
        // 4. 判断如果data有值则携带
        if (data) {
            // 5. 接着判断值的3种类型
            if (data instanceof FormData) {
                xhr.send(data)
            } else if (data instanceof Object) {
                xhr.setRequestHeader('Content-Type', 'application/json')
                xhr.send(JSON.stringify(data))
            } else if (typeof data === 'string') {
                xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
                xhr.send(data)
            }
        } else {
            // 如果没有请求体正常发请求
            xhr.send()
        }
​
        // 6. 处理成功/失败返回结果
​
        // 成功
        // xhr.addEventListener('load', () => {
        //     resolve(xhr.responseText ? JSON.parse(xhr.responseText) : null)
        // })
​
        // 失败
        // xhr.addEventListener('error', () => {
        //     reject(new Error('请检查网络/各项参数的值'))
        // })
​
​
        // axios源码逻辑
        xhr.addEventListener('loadend', () => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.responseText ? JSON.parse(xhr.responseText) : null)
            } else {
                reject(new Error('请检查网络/各项参数的值'))
            }
        })
    })
}
​
// 目标: 封装Ajax函数_支持POST和请求体
// 先尝试调用, 看着需求写实现
itheimaAxios({
    url: 'http://ajax-api.itheima.net/api/books',
    method: 'POST',
    data: {
        "bookname": "黑马程序员",
        "author": "小马",
        "publisher": "北京出版社"
    }
}).then(res => {
    console.log(res)
}).catch(err => {
    console.error(err)
})

小结

  1. 我们传递的data参数请求体, 内部会如何处理?

  • 判断值的类型, 然后携带不同的请求头告诉服务器请求体内容类型

夠籦
关注
ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、`resolve`或`reject`位置、then方法（返回新的Promise对象）、catch()（吃掉错误）
qq_43456781的博客
08-06 602
ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、resolve或reject位置、then方法（返回新的Promise对象）、catch()（Promise吃掉错误）、Promise.allSettled()、Promise.resolve() 文章目录ES6 （十六）Promise对象、结合Ajax(XMLHttpRequest)、`resolve`或`reject`位置、then方法（返回新的Promise对象）、catch()（Promise吃掉错误）、Promise
Promise的理解与使用
qq_53061847的博客
07-12 2101
2.使用 promise 封装 ajax 异步请求 3.fs模块使用Promise 4.异常穿透 5. 2、为什么要用Promise? Ⅰ-指定回调函数的方式更加灵活 Ⅱ-支持链式调用, 可以解决回调地狱问题 1、什么是回调地狱 2、回调地狱的缺点? 3、解决方案? 4、终极解决方案? 3、Promise中的常用 API 概述 Ⅰ- Promise 构造函数: Promise (excutor) {} Ⅱ-Promise.prototype.then 方法: (onResolv
使用ES6的Promise完美解决回调地狱
weixin_30493401的博客
07-28 954
相信经常使用ajax的前端小伙伴，都会遇到这样的困境：一个接口的参数会需要使用另一个接口获取。 年轻的前端可能会用同步去解决（笑~），因为我也这么干过，但是极度影响性能和用户体验。 正常的前端会把接口写在另一个接口的回调里。是这样不错，但是它增加了函数的嵌套深度也会造成一定的逻辑混乱。 也许有朋友会说，哪那么多毛病，解决问题不就好了吗？ 但是，如果需要的是另外好几个接口的返回数据呢？这时候...
原生JavaScript实现Ajax（一）：XMLHttpRequest
郭宇的博客
05-31 1076
XMLHttpRequest Ajax 原生ajax
JS原生：XMLHttpRequest发送GET&POST请求
欢迎来到长风沛雨的博客
11-01 1万+
学到了xhr发起GET和POST请求，在此记录一下。
Ajax的原生JS实现方式(XMLHttpRequest)和JQuery实现方式($.ajax())
"✧treasure mountain✧"
03-09 7960
AJAX：ASynchronous Javascript And XML 异步的Javascript和XML AJAX是一种用于创建快速动态网页的技术 是一种在无需重新加载整个网页的情况下 更新部分网页的技术 通过在后台与服务器进行少量数据交换 可以使网页进行异步更新 也就是可以在不重新加载整个网页的情况下 对网页的某部分进行更新 可以提升用户的体验 同步和异步的区别： 同步：在客户端发送请求给服...
Vue第三天学习总结—— Vue全家桶之前后端交互(前后的交互模式、Promise用法、接口调用-fetch用法、接口调用-axios用法、接口调用-async/await用法 )
weixin_52819925的博客
08-27 625
(一) 前后的交互模式 之前处理的案例都是静态数据，而真正的项目都是需要后台提供真正的数据的 那么前台就需要通过后台提供的数据接口获取数据 1. 接口调用方式 原生ajax：比较麻烦，一般不用 基于jQuery的ajax：这个会简单点，但jquery侧重DOM操作，而Vue很少涉及DOM操作 fetch：ajax升级版，标准化组织制定的一套新规范 axios：第三方的库，比fetch更加强大 客户端与服务器通信方式 左侧为客户端，右侧为服务器 客户端通过互联网向服务器发起请求（寻求页面，数据）
【es6】谈谈Promise
weixin_43655896的博客
02-08 1707
简单梳理一下关于Promise的知识体系
JavaScript学习笔记(四) ES6
kianagrow的博客
05-13 547
ES6 泛指ES2015 及后续的版本，为了解决 ES5 的先天不足，ES6 加入许多新的语法特性，编程实现更简单、高效。
文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
pre_eminent的JAVA学习园地
05-05 1236
Vue.js_官方文档学习笔记_Part_02事件处理监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。示例：&lt;div id="example-1"&gt; &lt;button v-on:click="counter += 1"&gt;Add 1&lt;/button&gt; &lt;p&gt;The button above has...
XMLHttpRequest简易使用教程
星火燎原
08-25 461
      XMLHttpRequest是Ajax的核心，通过调用XMLHttpRequest对象的属性和方法可以实现在客户端和浏览器之间进行数据的异步传输，从而实现页面的无刷新效果。   XMLHttpRequest对象的常用属性：         onreadystatechange：指定当readyState属性值改变时的事件处理句柄(只写)；       readyState：返...
ajax让浏览器等待,文章 - 如何等待 Ajax 请求结束后打开新窗口而不被浏览器屏蔽？ - FED社区...
weixin_36488589的博客
08-06 147
场景假设这样一个场景：用户点击一个按钮，此时需要请求后端接口进行数据实时校验，如果校验通过则弹出新窗口并打开某个特定的URL，如果校验失败则给出错误提示并停留在当前页面不做任何处理。一般情况下，你可能会直觉想到这样去做，但显然问题没有这么简单，尝试后你会发现现代浏览器会屏蔽Ajax回调中的弹出窗口：$('.button').on('click', function() {$.ajax({url: ...
浅谈对Promise的使用
qq_43750656的博客
07-16 161
Promise简单上手 Promise对象的出现用于解决传统的ajax请求嵌套回调的问题。Promise对象通过new 关键字创建，构造函数需要传递一个函数作为参数，并且该函数需要两个形参（resolve和reject）。如下 let p = new Promise((resolve,reject) => { }) promise对象共有三种状态为成功、失败和触发。 通常我们会在promise的构造函数中执行ajax查询，ajax查询成功则调用resolv.
ES6异步发送AJAX
weixin_46215920的博客
02-20 439
ES6异步发送AJAX 异步与同步的区别 同步：在上一个操作没有执行完前，下一个操作必须排队等待 异步：CPU先把当前操作耽搁不执行，等主线任务执行完后再执行 ES6前的异步操作 在ES6发布之前，要操作异步，只能使用递归或者回调函数来操作，但是这样会使得代码可读性差，难维护。 js的运行机制是单线程的，它首先会执行同步的操作，再按照代码的位置先后顺序执行异步操作。 js 中的核心异步执行函数是定时器和ajax setTimeout(console.log, 0, 1);
promise将ajax变为同步,用四种方法将两个AJAX改为同步
weixin_33484805的博客
08-05 593
用四种方法将两个AJAX改为同步Promise、Generator函数、yield、async/await 相关今有一题，题目为：现有ajax1()和ajax2()，用于快速初始化CODE1和CODE2myFunc必须在CODE1和CODE2初始化之后再执行可以在原代码上修改伪代码为：Ajax1({...success: function(data){CODE1 = data}})Ajax2({....
对Promise中的resolve，reject，catch的理解
勿忘初心的博客
05-15 5万+
对promise这个概念之前已经有了一些浅显的理解，相关文章-&gt;戳这里，最近又有了一些新的理解。.then()的时候到底是在then什么…首先要理解…Promise是一个对象，有then()方法的对象then()的入参是一个函数，通常在promise链中，入参是 一个返回promise的函数 ，这句话好像有点拗口，就是说入参是一个函数，这个函数会return一个promise对象如何破坏pr...
Promise的resolve方法和reject方法
热门推荐
LQ55
07-29 5万+
Promise的resolve方法和reject方法 Promise.resolve方法返回一个promise的实例 Promise.resolve('foo');//等价于如下 new Promise((resolve)=&gt;{ resolve('foo'); }) 根据参数不同，分为一下几种情况 （1）参数是一个Promise的实例 如果参数是一个Promise的实例...
大白话讲解Promise（一）
aigenglong0649的博客
03-11 1万+
去年6月份， ES2015正式发布（也就是ES6，ES6是它的乳名），其中Promise被列为正式规范。作为ES6中最重要的特性之一，我们有必要掌握并理解透彻。本文将由浅到深，讲解Promise的基本概念与使用方法。 ES6 Promise 先拉出来遛遛 复杂的概念先不讲，我们先简单粗暴地把Promise用一下，有个直观感受。那么第一个问题来了，Promise是什么玩意呢？...
ajax的两种方式,封装ajax请求的两种方式
weixin_39657125的博客
08-05 1564
ajax请求可以说是在前端开发工作中必不可少的一个东西1、ajax请求原理ajax技术的核心是XMLHttpRequest对象,其通过创建一个XMLHttpRequest对象，利用对象的open方法发送请求，判断对象中readyState属性(请求、响应过程的当前活动阶段)的值和status(Http的响应状态)的值，得到responseText等open方法的三个参数第一个参数：请求方式第二个参...
JavaScript异步回调函数实战与案例
为了解决这个问题，JavaScript引入了回调函数的概念，这是一种设计模式，用于处理异步操作的结果。回调函数允许你在异步操作完成后执行特定的任务。在我们的例子中，可以创建一个回调函数`onIsExitedCallback`，当`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值