ajax请求数据以及基本知识
一、什么是阻塞？
1、JS具有阻塞特性，当浏览器在执行js代码时，不能同时做其它事情
2、避免阻塞（事件队列解决）
二、ajax
1、什么是ajax
-
创建XMLHttpRequest对象
let xhr = new XMLHttpRequest() -
准备发送数据
xhr.open('传输方式'，'请求的文件','使用true表示是否执行异步') //如果使用get方式传输数据，那么数据应该绑定在地址的后面, //如果采用post方式，数据需要写到send里面 例如: xhr.open('post','10.php',true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); let data = `data=${username}`; -
执行发送数据
xhr.send(data);//post xhr.send()//get -
指定回调函数
readystate:表示xhr的状态
0:请求未初始化
1：服务器连接已建立
2:请求已接收
3：请求正在处理中
4：请求已完成，且响应已经就绪
json.stringify()
JSON.stringify() 方法将 JavaScript 对象转换为字符串。
json.parse()
JSON 通常用于与服务端交换数据。在接收服务器数据时一般是字符串。我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
ajax基础封装
function ajax(method,url,data,cb) {
let xhr = null;
try {
xhr = new XMLHttpRequest();
}catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// get post
if(method === 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if(method === 'get') {
xhr.send();
}else {
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
cb && cb(xhr.responseText);
}else {
alert("出现错误:" + xhr.status);
}
}
}
}
ajax的封装(使用promise)
function ajax(method,url,data) {
return new Promise((resolve,reject)=> {
let xhr = null;
try {
xhr = new XMLHttpRequest();
}catch(e) {
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
// get post
if(method === 'get' && data) {
url += '?' + data;
}
xhr.open(method,url,true);
if(method === 'get') {
xhr.send();
}else {
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send(data);
}
xhr.onreadystatechange = function() {
if(xhr.readyState == 4) {
if(xhr.status == 200) {
resolve(xhr.responseText)//成功后端返回的数据
}else {
reject(xhr.status)//失败了返回状态码
}
}
}
})
}
生成器 generator
function * fn1(){
console.log(111)
}
let info = fn1();
info.next()//必须使用next手动调用，执行下一步的生成器函数
示例代码
function * fn2(){
console.log("请到二楼洗澡");
let a = yield "等会的，一会回来..."
console.log(a)//hah
let a2 = yield "我还得出去一趟"
console.log(a2)
let a3 =yield "又要出去了"
console.log(a3)
return "不出去了，去死吧"
}
let m= fn2()
let v1 = m.next()
console.log(v1)//等会的，一会回来...
let m2 = m.next("heiheihei")
console.log(m2)
let m3 =m.next("事务繁杂")
console.log(m3)
let m4 =m.next("热水镇热啊")
console.log(m4)
此代码粗俗的解释：什么是生成器，实例化后，使用.next调用，执行第一句代码，此时接着.yield为一个门，下面的实例化（.next）为一个保安，准备出去，然后走到.next处，（告诉他等会的一会回来），所以第一次打印这个，再次.next时，说明又回来了，所以将从出去的接口回来，带回来的值是.next（带回来的值），给yield一个变量接受，所以这就是带回来的值，以此类推 ，直到最后返回（return）表示执行完毕，最后返回的对象中，会有一个done:true,代表代码执行完毕，done:false代表代码未执行完毕
promise
promise的三种状态
1、进行中(pending);
2、成功(resolve)
3、失败(reject)
如何创建一个promise
resolve和reject一定要写在里面
let a =new Promise((resolve,reject)=>{
})
console.log(a)//此时打印出的应该是一个promise对象
catch() 捕捉promise的错误信息 finally() 无论promise是成功还是失败，最后都会执行promise里面的方法 all() 参数为一个数组，数组内容必须是promise对象
实例：
let a = new Promise((resolve,reject)=> {
let info = "失败";
if(info === "成功") {
resolve("老王被干了");
}else {
reject("老王把我干了");
}
})
// console.log(a)
a.then(msg1=> {
console.log(msg1) // 成功
},msg2=> {
console.log(msg2) // 失败
})
实例2
let a =new Promise((resolve,reject)=>{
let b=3
if(b===1){
resolve('一起啊')
}else{
reject('走着')
}
})
a.then((msg1=>{
console.log(msg1),
(msg2=>{
console.log(msg2)
})
}))
async,await 异步回调的终极方案
async function getData() {
let m1 =await ajax('get','a.txt');
console.log(m1)
let m2 =await ajax('get',m1);
console.log(m2)
let m3 = await ajax('get',m2);
return m3;
}
let x = getData();
x.then(data=> {
console.log(data)
return data;
})
天气预报(必须将函数内部的值return出来，否则外面接收不到值)
async function getData(){
let a =await ajax('get','https://www.tianqiapi.com/api/?appid=99285316&appsecret=Pi9vRHUq&version=v6&city=大同&',true);
console.log(a)
return a
}
let p =getData();
p.then((data)=>{
// console.log(msg)
let m =JSON.parse(data)
console.log(m)
})
浙公网安备 33010602011771号