2020-10-18前端学习笔记 - ajax/fetch/axios/跨域

小灰灰 2022-12-16 05:56 127阅读 0赞

### ajax中有几个常用方法 8个 ###

### get和post的区别 ###

> GET: get、delete、head、options
    POST: post、put
    在向服务器传递信息时，GET系列一般都是基于问号参数传递信息，POST一般都是基于请求主体传递信息 
    - GET 系列传递服务器信息大小有限制（URL的长度是存在限制的：IE ->2k）POST理论不存在限制，实际开发中自己会做限制
    - GET系列会产生缓存，无法自己控制的缓存
    - GET相对POST来讲也是不安全的

### 常见的网络状态码及作用 ###

+ 200 成功
    + 301 永久转移
    + 302/307临时重定向（临时转移）
    + 304 协商缓存
    + 400 参数错误
    + 401 无权限访问 token失效
    + 404 地址错误
    + 500 未知服务器错误
    + 503 服务器超负荷

### 前后端数据通信过程中，常用的数据传输格式 ###

+ form-data 文件上传/表单提交...
    + x-www-form-urlencoded 经常使用（和问号参数格式一致）
    + raw

### $.ajax、axios、fetch区别 ###

+ $.ajax/axios核心机制：XMLHTTPRequest【AJAX】
    	+ $.ajax JQ封装的方法，采用回调函数方式管理请求
    	+ $.ajax({});
    + axios基于promise管理异步数据请求 避免回调地狱
    	+ axios.get('')
    + fetch是ES6中提供的新的数据请求方案，机制不再是XMLHttpRequest
    	+ 性能好一些，但兼容性很差
    	+ 天生就是基于promise管理的
    	+ response.status
    		+ 不管返回什么样的状态码，哪怕是500也算请求成功（只要服务器有响应就算请求成功）
    		+ 它认为的失败就是服务器没有任何响应（如断网）

//fetch基本用法
    fetch('url?lx=0&from:winxin',{ 
    	method: 'GET',
    	headers:{ }
    }).then(response =>{ 
    	if(response.status >= 300){ 
    		switch(response.status){ 
    			case 400:
    			break;
    		}
    		return response.reject(response);
    	}
    	return response.json();
    }).then(res => { 
    	console.log(res);
    }).catch(err => { 
    	if(!navigator.onLine){ 
    		//断网
    	}
    });
    
    fetch('url?lx=0&from:winxin',{ 
    	method: 'POST',
    	headers:{ },
    	body:'lx=0&from=winxin'
    }).then(response =>{ 
    return response.json();
    }).then(res => { 
    console.log(res);
    });

### 常用的3中跨域方案： ###

*  jsonp：已过时，偶尔会用：利用了script不存在跨域限制
    
     *  客户端基于script向服务端发送一个请求，把客户端的一个全局函数传递给服务器
     *  服务端把数据和这个传递的函数拼合成为‘函数（数据）’浏览器默认就把函数执行了从而拿到数据
     *  只能是get请求
     *  自己封装：动态创建script，动态创建全局函数，发送请求

//必须是全局函数
    function fn(result){ 
    	console.log(result);
    }
    <script src='url?callback=fn' />

*  cors： 浏览器和服务器有安全限制，但我们自己可以绕过限制，在服务器端设定运行哪一个外部源可以向当前服务器发请求
 *  proxy： 向本地一个服务发送请求（webpack-dev-server），然后本地服务帮我们代理到真实服务器上（服务器与服务器之间不存在跨域）
    
     *  在开发环境下，vue/ract脚手架生成的项目都是支持webpack-dev-server完成的
     *  生产环境没有webpack-dev-server，基于部署web服务器的工具可以实现代理（nginx配置项/lis/apach）
 *  …

//web服务器（页面） VS 数据服务器（API）
    // + 协议
    // + 域名
    // + 端口号
    // 三者中有一个不同都是跨域
    // 项目中80%都是跨域
    // + 服务器分开部署，Web服务器/数据服务器
    // + 请求第三方平台
    (async () => { 
    	let result = await fetch('url',{ 
    	//fetch跨域设置
    		credentials: 'same-origin（同源）/moit（禁止）/include(允许跨域中携带资源凭证)'
    	}).then();
    })()
    
    //服务端
    //Access-Control-Allow-Origin: */单一源
    // + * 不允许携带资源凭证（如cookie）不安全很多功能不能用
    // + 单一源 运行携带资源凭证， Access-Control-Allow-Credentials: true
    // + 解决：每一次接收请求都看一下请求源
    // + 动态修改Access-Control-Allow-Origin可以做黑白名单
    //客户端在基于CORS跨域时，首先会发送一个试探请求，