聊一聊关于请求那些事儿

前端请求

注意：本文只代表个人看法，如有争议请留评论

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) {
    // 两个请求现在都执行完成
  }));