与上一篇文章连接。
四、数据处理
从上面 jquery 的 ajax 来看,ajax 并不是难题,其实需要我们花心思的是数据处理,你拿到数据,想执行什么,想让数据怎么展示,就需要前端好好处理。
数据处理是很重要的部分,各种遍历,各种取值,不要出错。
五、跨域
跨域:当你访问一个网址(不是你本地网址 如:localhost),你不能从当前域,不能访问别人的域。
为什么会有跨域问题?因为安全问题。仔细想想,没有跨域,任意一个网站都能访问你自己的数据,你会不会被气死。
代表域相同:协议、(域名)IP、 端口 三者都相同代表域相同,不用跨域。其他情况都需要跨域。
如何解决跨域?
方案一:让对应访问的那个域给你开放一个请求头
方案二:转接,首先访问自己同域的后端,让自己的后端去发起请求(后端与后端没有跨域)
方案三:某些特定格式的数据,可以使用 jsonp 的形式。
七、promise
axios,fetch会用到promise
函数:res/rej
pending 进行中
resolve 成功
reject 失败
promise的意义:将一个左右纵深的结构(回调地狱),变成上下结构。
//没有使用promise
//隔一秒打印一个数字(异步),代码写的越来越深(回调地狱,不利于维护)
setTimeout(()=>{
console.log("1");
setTimeout(()=>{
console.log("2");
setTimeout(()=>{
console.log("3");
setTimeout(()=>{
console.log("4");
},1000);
},1000);
},1000);
},1000);
使用 promise 来完成:
new promise(res=>{
setTimeout(()=>{
console.log("1");
res();
},1000);
}).then(()=>{
setTimeout(()=>{
console.log("2");
res();
},1000);
}).then(()=>{
setTimeout(()=>{
console.log("3");
res();
},1000);
}).then(()=>{
setTimeout(()=>{
console.log("4");
},1000);
});
promise 的 reject :
new promise((res,rej)=>{
})
.then(()=>{
console.log("resolve");
})
.catch(()=>{
//有catch,错误时可以决定下面输出什么
//无catch,错误时报错
console.log("reject");
})
promise.all的使用:
promise
.all([A,B,C])
.then(()=>{
//ABC中全部执行完成才执行then的内容,有一个reject都不回往下执行。
console.log("这三个 promise 都执行完了");
});
promise.race 的使用:(不常用)
最先完成的 promise 决定了 race 的状态
promise
.race([A,B,C])
.then(()=>{
console.log("最先完成res");
})
.catch(()=>{
console.log("最先完成rej");
});
八、fetch
参数一:地址
参数二:请求方式 method(对象)
主流浏览器基本支持fetch(除了IE)
//返回 promise 可以 .then
fetch(
"http://xxxxx",
{method:"GET"}
).then(res=>{
return res.json();//格式化处理
}).catch(data=>{
console.log(data);//这里才是真正的数据
})
九、axios(常用)
参数一:请求方式 method
参数二:地址
IE不支持axios,在IE里老老实实用jquery的包就可以了。
地址是后端大大给你的,得到的数据也是后端控制的。
get和post 只有params不同(传参方式不同)。
get传参,拼接到链接后面
post传参,用data属性接收参数
<script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>//引入axios
//直接使用axios
axios({
method : "GET",
url : "xxxxxxxx?keywords=xxxx",
}).then(res=>{
console.log(res);
});
//单独调用axios
//get传参,拼接到链接后面
axios.get({
"http://localhost:8080/",
{
params:{keywords:"xxx"}
}
}).then(res=>{
console.log(res);
});
//post传参,用data属性接收参数
axios.post({
"http://localhost:8080/",
keywords:"xxx"
}).then(res=>{
console.log(res);
});
axios.post({
"http://localhost:8080/",
{
{name: lanbai,age: 18}
}
}).then(res=>{
console.log(res);
});
//$.get() get请求
//$.post() post请求
欢迎各位大大观看,指正。