前端请求
注意：本文只代表个人看法，如有争议请留评论
1.xhr
当大家看到这个的时候肯定是不陌生的，但是再聊xhr之前，我们先来聊聊Ajax
Ajax是什么？
- Ajax是“Asynchronous Javascript And XML”,即异步Javascript和XML，是指一种创建交互式网页应用的网页开发技术。
- 客户端可以发送数据到服务端，客户端可以接收并解析服务端传来的数据
- 可以对页面进行局面刷新
xhr是什么？
- xhr:XML HTTP Request,是Ajax的核心
- 常用的三种数据请求方法： get,post,form
xhr数据请求流程
- 在客户端初始化xhr对象
- 服务端接收并处理客户端发来的数据，并将结果返回给客户端
- 客户端接收返回的数据
// 初始化xhr对象
const xhr = new XMLHttpRequest()
//设置接口和参数
xhr.open('get','/api/id?')
//发送请求
xhr.send()
//接收数据
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
//打印返回结果
console.log(xhr.responseText)
}
}
2.关于封装好Ajax请求的一些插件或者第三方库
- jQuery
这个就很熟悉了吧，jq基本上快要被淘汰了，但是不得不说他也封装了Ajax请求，但是jq里面更多的是对dom的操作，大概占80%都是对dom的操作，还有百分之20是对其他的封装，不说别的，就但从一些动画啥的也能看出，jq也还是有不少人使用的
- axios
目前最火的就是axios了，轻量级，里面还封装了请求拦截和响应拦截的钩子，现在项目的开发基本上都是vue和react等框架进行开发，也能异步处理返回结果或者返回promise对象等等
- fetch
fetch也是promise风格的，使用的也不少，原生就有的不需要引入第三方库js，但是他有两个致命的问题：1.会把返回的数据包两层的promise，也就是说你需要两次.then()方法才能拿到数据；2.fetch兼容性较差，在ie上无法使用
3.解决跨域的方法
- cors跨域资源共享
不需要前端去做任何事情，后端配置服务器 的时候加几个特殊的响应头即可，这个才是真正的解决跨域，但是这种方式需要配置好不然每一个人都能拿到接口数据
- jsonp
利用script标签里面的src属性进行跨域，因为src属性不受同源策略的影响，用的微乎其微，get请求可以解决，但是post请求就更别想了，而且需要前后端一起配合才行
- 代理服务器
nginx可以开代理， vue-cli也可以代理
//vue.config.js文件中
// 开发环境用
module.exports = {
devServer.proxy = {
'/rest': {
target: 'http://192.168.2.28:8120', // 开发地址
ws: true, //websocket支持
changeOrigin: true, //是否开启跨域
pathRewrite: {
'^/rest': ''} //路径重写
},
},
}
- vue中自带的插件库，了解一下： vue-resourse
也对xhr进行了封装，需要去引入和use
//引入插件
import vueResource from 'vue-resource';
Vue.use(vueResource)
//使用方法
this.$http.get('url').then(
response => {
console,log('成功的回调')
},
error => {
console,log('失败的回调')
}
)
4.具体请求的细节
1.get请求
// 方法一：为给定 ID 的 user 创建请求
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//方法二：
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
2.post请求
//方法一：
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
//方法二：
/**
* 注解： params是拼接在url上的参数，post请求也可以拼接上，data参数是放在body上请求的参数
* 同样: data里面也可以使用表单的形式传递参数，具体做法如下：
*/
axios({
method: 'post',
url: '/user/12345',
params:{
pageSize: 10,
pageNum: 1
},
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
let ids = 'dadsadswvg,fdsgdsfdsf'
let formData = new FormData();
formData.append("id", ids);
//将formData 添加到data即可
3.执行多个并发请求
function getUserAccount() {
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
.then(axios.spread(function (acct, perms) {
// 两个请求现在都执行完成
}));