![](https://img-blog.csdnimg.cn/150a282a57a147c595fd4e2426fd630b.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Promise Ajax Axios -- 尚硅谷
文章平均质量分 65
Promise Ajax Axios -- 尚硅谷
CodeJiao
须知少年凌云志 曾许天下第一流
展开
-
Ajax--使用fetch函数发送AJAX请求
1.使用fetch函数发送AJAX请求参考文档: 1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>原创 2021-07-27 08:47:48 · 386 阅读 · 0 评论 -
Ajax跨域--同源策略 & 什么是跨域
1.同源策略同源策略(Same-Origin Policy)最早由 Netscape 公司提出,是浏览器的一种安全策略。同源: 协议、域名、端口号 必须完全相同(说白了就是来自于同一个服务)。违背同源策略就是跨域ajax默认遵循同源策略2. 同源策略演示2.1 请求前的准备2.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset原创 2021-07-27 08:48:34 · 268 阅读 · 0 评论 -
Ajax--请求超时与网络异常处理
1. 请求超时与网络异常处理鼠标移动到窗口中,会发送POST请求,鼠标离开窗口时,会把窗口内容清空1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-07-26 11:43:23 · 693 阅读 · 0 评论 -
Ajax解决跨域--设置CORS响应头实现跨域
1.设置CORS响应头实现跨域跨源资源共享(CORS)1.1 什么是CORSCORS(Cross-Origin Resource Sharing),跨域资源共享。CORS 是官方的跨域解决方 案,它的特点是不需要在客户端做任何特殊的操作,完全在服务器中进行处理,支持 get 和 post 请求。跨域资源共享标准新增了一组 HTTP 首部字段,允许服务器声明哪些 源站通过浏览器有权限访问哪些资源1.2 CORS 怎么工作的?CORS 是通过设置一个响应头来告诉浏览器,该请求允许跨域,浏览器收到该原创 2021-07-27 08:51:59 · 2161 阅读 · 10 评论 -
Ajax--jQuery发送AJAX请求
1. jQuery发送AJAX请求1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 发原创 2021-07-26 15:37:13 · 729 阅读 · 2 评论 -
Ajax--nodemon自动重启工具安装
1.nodemon自动重启工具安装1.1 什么是nodemon?nodemon是一个工具,我们练习ajax发送请求时,会经常修改服务端的代码,每次修改后都会去重启服务端。而nodemon可以在服务端代码修改之后自带重启服务端1.2 安装nodemon命令行输入: npm install -g nodemon1.3 使用nodemon1.3.1 服务端代码server.js//1. 引入expressconst express = require('express');//2原创 2021-07-26 10:51:20 · 204 阅读 · 0 评论 -
Ajax--请求的基本操作 & 设置请求参数
1.Ajax–请求的基本操作点击发送请求后,会把响应体打印在下面的窗口中1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2021-07-26 09:25:43 · 1264 阅读 · 0 评论 -
Ajax--AJAX 简介 & XML简介
1. Ajax1.1 什么是Ajax(异步无刷新请求)AJAX 全称为 Asynchronous JavaScript And XML,就是异步的 JS 和 XML。 - 通过 AJAX 可以在浏览器中向服务器发送异步请求,最大的优势:无刷新获取数据。AJAX 不是新的编程语言,而是一种将现有的标准组合在一起使用的新方式。1.2 Ajax的特点1.2.1 AJAX 的优点可以无需刷新页面而与服务器端进行通信。允许你根据用户事件(鼠标事件,键盘事件…)来更新部分页面内容。1.2原创 2021-07-25 22:08:57 · 305 阅读 · 0 评论 -
Ajax解决跨域--jQuery发送jsonp请求
1. jQuery发送jsonp请求需求 在"点击发送 jsonp 请求"后,将服务器返回的响应体渲染到窗口中。ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t原创 2021-07-27 08:50:44 · 654 阅读 · 2 评论 -
Ajax--express框架介绍与基本使用
Express官网: 1. express框架介绍与基本使用express是基于 Node.js 平台,快速、开放、极简的 Web 开发框架1.1 创建一个Express的包1.2 打开终端1.3 执行 npm init --yes 做一个初始化npm是Node.js平台下面的一个包管理工具1.4 安装Express框架执行 npm i express1.5 创建一个Express基本使用.js的文件1.6 开始使用express框架代码://1. 引入e原创 2021-07-25 23:57:30 · 357 阅读 · 2 评论 -
Ajax---IE缓存问题解决
1. IE缓存问题解决1.1 什么是IE缓存问题IE浏览器会缓存网页中的GET和XHR(Ajax请求)的内容,并且在IE浏览器中如果请求方式是get方式的话,IE浏览器会进行识别,如果该get请求的url是第一次请求的话,会请求项目的后台,从数据库中获取数据,如果该get请求的url不是第一次请求的话,那么该url就不会请求项目后台,IE浏览器会直接从缓存中拿到上次该url获取的数据,无论是什么插件的get方式请求,IE浏览器都会这样进行处理的;1.2 请求前的准备1.1.1 HTML页面原创 2021-07-26 11:26:21 · 176 阅读 · 0 评论 -
Ajax--Axios发送AJAX请求
1.Axios发送AJAX请求1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送原创 2021-07-26 16:18:39 · 349 阅读 · 0 评论 -
Ajax--取消请求
1. 取消请求1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>取消请求</title>原创 2021-07-26 11:50:14 · 279 阅读 · 0 评论 -
Ajax解决跨域--原生jsonp实践
1. 原生jsonp实践需求:验证用户名是否存在,如果用户名不存在,则在失去焦点的时候边框变红。ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>案原创 2021-07-27 08:49:57 · 514 阅读 · 0 评论 -
Ajax解决跨域--JSONP原理
1.解决跨域–JSONP1.1 JSONP 是什么JSONP(JSON with Padding),是一个非官方的跨域解决方案,纯粹凭借程序员的聪明 才智开发出来,只支持 get 请求。1.2 JSONP 怎么工作的?在网页有一些标签天生具有跨域能力,比如:img link iframe script。JSONP 就是利用 script 标签的跨域能力来发送请求的。<!-- 我们在script中可以引入第三方库, 说明script标签是支持跨域的 --><script原创 2021-07-27 08:49:16 · 326 阅读 · 0 评论 -
Ajax--解决请求重复发送问题
1. 解决请求重复发送问题1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>取消请求</tit原创 2021-07-26 12:02:33 · 608 阅读 · 0 评论 -
Ajax--游览器控制台查看通信报文(这里以谷歌游览器为例)
1.游览器控制台查看通信报文1.1 打开谷歌游览器并打开控制台1.2 搜索“重庆理工大学”并回车我们点击第一个HTTP请求:1.3 headers(Request Header)请求头:查看HTTP请求游览器向服务器发送的什么请求查看请求行Query String Parameters (查询字符串参数):Response Headers(响应头):1.4 Response(这就是服务器返回的响应体=》HTML内容)1.5 POST请求原创 2021-07-25 23:29:42 · 520 阅读 · 0 评论 -
Ajax--发送POST请求 & POST设置请求体 & 设置请求头信息
1.Ajax–发送POST请求鼠标移动到窗口中,会发送POST请求,鼠标离开窗口时,会把窗口内容清空1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-07-26 10:10:47 · 5317 阅读 · 0 评论 -
Ajax--服务端响应Json数据
1.Ajax–服务端响应Json数据点击发送请求后,会把响应体打印在下面的窗口中1.1 请求前的准备1.1.1 HTML页面ajaxDemo.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2021-07-26 10:39:51 · 228 阅读 · 0 评论 -
axios -- axios的基本使用 & axios其他方式发送请求 & axios请求响应结构分析
1. axios的基本使用页面结构:<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> &l原创 2021-09-05 00:00:24 · 513 阅读 · 2 评论 -
axios -- axios 是什么 & axios 特点 & json-server的介绍与服务搭建 & axios 引入
1. axios1.1 axios 是什么?前端最流行的 ajax 请求库react/vue 官方都推荐使用 axios 发 ajax 请求文档: https://github.com/axios/axios1.2 axios 特点基于 xhr + promise 的异步 ajax 请求库浏览器端/node 端都可以使用支持请求/响应拦截器支持请求取消请求/响应数据转换批量发送多个请求1.3 json-server的介绍与服务搭建json-server文档:json原创 2021-09-04 21:22:38 · 501 阅读 · 1 评论 -
Promise--async与await结合案例
1. async与await结合案例读取resource目录下面 1.html 2.html 3.html 的文件内容,并且把他们拼接在一起打印出来。1.1 准备工作:1.html观书有感 -朱熹半亩方塘一鉴开天光云影共徘徊。2.html问渠那得清如许?为有源头活水来。3.html---------中华古诗词1.2 回调函数实现://回调函数的方式const fs = require('fs');fs.readFile('./re原创 2021-07-22 21:25:24 · 300 阅读 · 3 评论 -
Promise--async函数与await表达式
1. async函数函数的返回值为 promise 对象promise 对象的结果由 async 函数执行的返回值决定规则同then()函数返回Promise对象1.1 如果抛出异常, 新 promise 变为 rejected,reason 为抛出的异常。 async function showInfo() { throw "I am failed." } console.log(showInfo());1.2 如果返回的是非 promise原创 2021-07-22 21:10:59 · 294 阅读 · 2 评论 -
Promise--几个关键问题
1. Promise的几个关键问题预备知识: promise 的基本流程1.1 如何改变 promise 的状态? new Promise((resolve, reject) => { // 1. resolve 函数 // resolve('ok'); // pending => fulfilled (resolved) // 2. reject 函数 // reject("error");// pe原创 2021-07-22 20:28:08 · 190 阅读 · 2 评论 -
Promise--相关的API
1. Promise相关的API1.1 Promise 构造函数Promise 构造函数: Promise (excutor) {}(1) executor 函数: 执行器 (resolve, reject) => {}(2) resolve 函数: 内部定义成功时我们调用的函数 value => {}(3) reject 函数: 内部定义失败时我们调用的函数 reason => {}说明:executor 会在 Promise 内部立即同步调用,异步操作在执行器中原创 2021-07-21 14:02:29 · 644 阅读 · 0 评论 -
Promise--promise 的状态改变 & promise 的基本流程
1. promise 的状态改变pending 变为 resolved: 未决定的 => 成功pending 变为 rejected: 未决定的 => 失败说明:只有这 2 种, 且一个 promise 对象只能改变一次无论变为成功还是失败, 都会有一个结果数据成功的结果数据一般称为 value, 失败的结果数据一般称为 reason1.1 Promise 的状态实例对象中的一个属性 『PromiseState』pending 未决定的resolved /原创 2021-07-21 10:12:59 · 1054 阅读 · 0 评论 -
Promise--实践练习之AJAX请求 & Promise封装AJAX操作
1. Promise–实践练习之AJAX请求请求规则:如果请求成功(状态码为2xx => 则打印出响应体)如果请求失败(打印出状态码)页面结构:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g原创 2021-07-20 19:00:30 · 213 阅读 · 1 评论 -
Promise--实践练习之fs模块 & node运行Js脚本 & Promise封装练习-fs模块 & util.promisify方法
1. 实践练习之fs模块 & node运行Js脚本fs是Node.js下面对文件进行操作的一个模块,Node.js 提供一组类似 UNIX(POSIX)标准的文件操作 API。 Node 导入文件系统模块(fs)。Node.js 文件系统(fs 模块)模块中的方法均有异步和同步版本,例如读取文件内容的函数有异步的 fs.readFile() 和同步的 fs.readFileSync()。异步的方法函数最后一个参数为回调函数,回调函数的第一个参数包含了错误信息(error)。最好使用异步方法,比起原创 2021-07-20 17:57:16 · 580 阅读 · 0 评论 -
Promise--初体验
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数。then()方法会返回一个新的Promise实例,所以then()方法后面可以继续跟另一个then()方法进行链式调用。then()方法有2个参数,这2个参数都接收函数参数,第一个参数是解决(fulfillment)状态的回调函数,另外一个参数是拒绝(rejection)状态的回调函数。原创 2021-07-20 17:23:26 · 269 阅读 · 0 评论 -
Promise -- Promise介绍、Promise入门案例
1. Promise的介绍1.1 什么是Promise抽象表达:Promise是一门新的技术(ES6引入)Promise是JS中进行异步编程的新解决方案备注: 旧方案是单纯使用回调函数具体表达:从语法上面来说:Promise是一个构造函数从功能上面说: Promise对象是用来封装一个异步操作并可以获取其成功/失败的结果值。1.2 什么是同步和异步同步是阻塞模式,异步是非阻塞模式。同步就是指一个进程在执行某个请求的时候,若该请求需要一段时间才能返回信息,那么原创 2021-07-20 14:50:31 · 558 阅读 · 0 评论