前端知识总结之异步请求和跨域

经常在工作中用到异步请求的方法，最近的项目也用到了promise和fetch的知识，正好五一做下总结。
先说下同步和异步的区别，异步传输一般是面向字符的传输，它的单位是字符；
同步传输是面向比特的传输，它的单位是桢，它传输的时候要求接受方和发送方的时钟是保持一致的。

同步的话，就是必须一个方法执行完才会执行下一方法，在等待期间浏览器会挂起不能执行任何接下来的js代码；异步则是【告诉】浏览器先去做，这期间我还可以做别的事情，执行别的方法，等到结果返回来了，浏览器会通知js执行相应的回调。

一.ajax

1.ajax概念,特性？

AJAX是“Asynchronous JavaScript and XML”的缩写。是一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。
在上面几中技术中，除了XmlHttpRequest对象以外，其它所有的技术都是基于web标准并且已经得到了广泛使用的，XMLHttpRequest虽然目前还没有被W3C所采纳，但是它已经是一个事实的标准，因为目前几乎所有的主流浏览器都支持它。

3.ajax原理和XmlHttpRequest对象
Ajax相当于在用户和服务器之间加了—个中间层,使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器,像—些数据验证和数据处理等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求。
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发送异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理，我们必须对 XMLHttpRequest有所了解。

XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术。简单的说，也就是javascript可以及时向服务器提出请求和处理响应，而不阻塞用户。达到无刷新的效果。

4.XMLHttpRequest对象的属性和方法：
open(“method”,”URL”) 建立对服务器的调用，
第一个参数是HTTP请求 方式可以为GET，POST或任何服务器所支持的您想调用的方式。 send()方法，发送具体请求
abort()方法，停止当前请求
第二个参数是请求页面的URL。
readyState属性 请求的状态 有5个可取值0=未初始化 ，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性 服务器的响应，表示为一个串
reponseXML 属性 服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found
5.ajax封装步骤，五部分
第一步：创建XMLHttpRuquest对象；
第二步：注册回调方法
第三步：设置和服务器交互的相应参数
第四步：设置向服务器端发送的数据，启动和服务器端的交互
第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

function ajaxGet(url,data){
	//创建XMLHttpReques对象
	var ajax=new XMLHttpRequest();
	//url方法，如果发送请求带有数据则需要url?+data
        if(data){
        	url+='?';
        	url+=data;
        }
        ajax.open('get',url);
		ajax.send();
		ajax.onreadystatechange=function(){
			if(ajax.readyState == 4 && ajax.status == 200){
				console.log(ajax.responseText);
		}
	}
}
//post方法
function ajaxPost(url,data){
	
	var ajax=new XMLHttpRequest();
		ajax.open('post',url);
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		if(data){
			ajax.send(data);
		}else{
			ajax.send();
		}
		ajax.onreadystatechange=function(){
			if(ajax.readyState==4&&ajax.status==200){
				console.log(ajax.responseText);
		}
	}
}

//将get和post封装到一起
function ajax(url,data,method,success){
	var ajax=new XMLHttpRequest();
	if(method=='get'){
		if(data){
			url+='?';
			url+=data;
		}
		ajax.open(method,url);
		ajax.send();
	}else{
		//post请求不需要改变
		ajax.open(method,url);
		ajax.setRequestHeader("Content-type","x-www-form-urlencoded");
		if(data){
			ajax.send(data);
		}else{
			ajax.send();
		}
	}

	ajax.onreadystatechange=function(){
		if(ajax.readyState==4&&ajax.status==200){
			console.log(ajax.responseText);

			//将数据让外边可以使用
			return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
			// ajax.responseText;
			success(ajax.responseText);
		}
	}
}
原文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/90633248

6.XMLHttpRequest封装异步请求方法二

//类的构建定义，主要职责就是新建XMLHttpRequest对象
var MyXMLHttpRequest=function(){
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType(“text/xml”);
}
}else if(window.ActiveXObject){
var activeName=[“MSXML2.XMLHTTP”,“Microsoft.XMLHTTP”];
for(var i=0;i try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){

        }  
    }  
}  

if(xmlhttprequest == undefined || xmlhttprequest == null){  
    alert("XMLHttpRequest对象创建失败！！");  
}else{  
    this.xmlhttp=xmlhttprequest;  
}  

//用户发送请求的方法  
MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){  
    if(this.xmlhttp!=undefined && this.xmlhttp!=null){  
        method=method.toUpperCase();  
        if(method!="GET" && method!="POST"){  
            alert("HTTP的请求方法必须为GET或POST!!!");  
            return;  
        }  
        if(url==null || url==undefined){  
            alert("HTTP的请求地址必须设置！");  
            return ;  
        }  
        var tempxmlhttp=this.xmlhttp;  
        this.xmlhttp.onreadystatechange=function(){  
            if(tempxmlhttp.readyState==4){  
                if(temxmlhttp.status==200){  
                    var responseText=temxmlhttp.responseText;  
                    var responseXML=temxmlhttp.reponseXML;  
                    if(callback==undefined || callback==null){  
                        alert("没有设置处理数据正确返回的方法");  
                        alert("返回的数据：" + responseText);  
                    }else{  
                        callback(responseText,responseXML);  
                    }  
                }else{  
                    if(failback==undefined ||failback==null){  
                        alert("没有设置处理数据返回失败的处理方法！");  
                        alert("HTTP的响应码：" + tempxmlhttp.status + ",响应码的文本信息：" + tempxmlhttp.statusText);  
                    }else{  
                        failback(tempxmlhttp.status,tempxmlhttp.statusText);  
                    }  
                }  
            }  
        }  

        //解决缓存的转换  
        if(url.indexOf("?")>=0){  
            url=url + "&t=" + (new Date()).valueOf();  
        }else{  
            url=url+"?+="+(new Date()).valueOf();  
        }  

        //解决跨域的问题  
        if(url.indexOf("http://")>=0){  
            url.replace("?","&");  
            url="Proxy?url=" +url;  
        }  
        this.xmlhttp.open(method,url,true);  

        //如果是POST方式，需要设置请求头  
        if(method=="POST"){  
            this.xmlhttp.setRequestHeader("Content-type","application/x-www-four-urlencoded");  
        }  
        this.xmlhttp.send(data);  
}else{  
    alert("XMLHttpRequest对象创建失败，无法发送数据！");  
}  
MyXMLHttpRequest.prototype.abort=function(){  
    this.xmlhttp.abort();  
}  

}
}

7.ajax的优缺点
优点：
<1>.无刷新更新数据。
AJAX最大优点就是能在不刷新整个页面的前提下与服务器通信维护数据。这使得Web应用程序更为迅捷地响应用户交互，并避免了在网络上发送那些没有改变的信息，减少用户等待时间，带来非常好的用户体验。

<2>.异步与服务器通信。
AJAX使用异步方式与服务器通信，不需要打断用户的操作，具有更加迅速的响应能力。优化了Browser和Server之间的沟通，减少不必要的数据传输、时间及降低网络上数据流量。

<3>.前端和后端负载平衡。
AJAX可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，AJAX的原则是“按需取数据”，可以最大程度的减少冗余请求和响应对服务器造成的负担，提升站点性能。

<4>.基于标准被广泛支持。
AJAX基于标准化的并被广泛支持的技术，不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化Ajax使用方法的程序库也相继问世。同样，也出现了另一种辅助程序设计的技术，为那些不支持JavaScript的用户提供替代功能。

<5>.界面与应用分离。
Ajax使WEB中的界面与应用分离（也可以说是数据与呈现分离），有利于分工合作、减少非技术人员对页面的修改造成的WEB应用程序错误、提高效率、也更加适用于现在的发布系统。
缺点
<1>.AJAX干掉了Back和History功能，即对浏览器机制的破坏。
在动态更新页面的情况下，用户无法回到前一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。一个被完整读入的页面与一个已经被动态修改过的页面之间的差别非常微妙；用户通常会希望单击后退按钮能够取消他们的前一次操作，但是在Ajax应用程序中，这将无法实现。

<2>.AJAX的安全问题。
AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。Ajax的逻辑可以对客户端的安全扫描技术隐藏起来，允许黑客从远端服务器上建立新的攻击。还有Ajax也难以避免一些已知的安全弱点，诸如跨站点脚步攻击、SQL注入攻击和基于Credentials的安全漏洞等等。

<3>.对搜索引擎支持较弱。
对搜索引擎的支持比较弱。如果使用不当，AJAX会增大网络数据的流量，从而降低整个系统的性能。

<4>.破坏程序的异常处理机制。
至少从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会破坏程序的异常机制的。关于这个问题，曾在开发过程中遇到过，但是查了一下网上几乎没有相关的介绍。后来做了一次试验，分别采用Ajax和传统的form提交的模式来删除一条数据……给我们的调试带来了很大的困难。

<5>.违背URL和资源定位的初衷。
例如，我给你一个URL地址，如果采用了Ajax技术，也许你在该URL地址下面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的。

<6>.AJAX不能很好支持移动设备。
一些手持设备（如手机、PDA等）现在还不能很好的支持Ajax，比如说我们在手机的浏览器上打开采用Ajax技术的网站时，它目前是不支持的。

<7>.客户端过肥，太多客户端代码造成开发上的成本。
编写复杂、容易出错 ；冗余代码比较多（层层包含js文件是AJAX的通病，再加上以往的很多服务端代码现在放到了客户端）；破坏了Web的原有标准。

8.AJAX注意点及适用和不适用场景
注意点

Ajax开发时，网络延迟——即用户发出请求到服务器发出响应之间的间隔——需要慎重考虑。不给予用户明确的回应，没有恰当的预读数据，或者对XMLHttpRequest的不恰当处理，都会使用户感到延迟，这是用户不希望看到的，也是他们无法理解的。通常的解决方案是，使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

Ajax适用场景

<1>.表单驱动的交互
<2>.深层次的树的导航
<3>.快速的用户与用户间的交流响应
<4>.类似投票、yes/no等无关痛痒的场景
<5>.对数据进行过滤和操纵相关数据的场景
<6>.普通的文本输入提示和自动完成的场景

Ajax不适用场景

<1>.部分简单的表单
<2>.搜索
<3>.基本的导航
<4>.替换大量的文本
<5>.对呈现的操纵
————————————————
参考原文链接：https://blog.csdn.net/chenjuan1993/article/details/81626487

9.常用的几种请求方式。get和post的区别

常用的post,get,delete。不常用copy、head、link等等。

###代码上的区别
1:get通过url传递参数
2:post设置请求头 规定请求数据类型
###使用上的区别
1:post比get安全
(因为post参数在请求体中。get参数在url上面)
2:get传输速度比post快 根据传参决定的。
(post通过请求体传参，后台通过数据流接收。速度稍微慢一些。而get通过url传参可以直接获取)
3:post传输文件大理论没有限制 get传输文件小大概7-8k ie4k左右
4:get获取数据 post上传数据
(上传的数据比较多 而且上传数据都是重要数据。所以不论在安全性还是数据量级 post是最好的选择)

二.axios

1.axios是啥，特性是啥？
axios库，它是基于promise的http库，可运行在浏览器端和node.js中。react/vue 官方都推荐使用 axios 发 ajax 请求。
特性：

1. 基于 promise 的异步 ajax 请求库，支持promise所有的API
2. 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests
3. 支持请求／响应拦截器
4. 支持请求取消
5. 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据
6. 批量发送多个请求
7. 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
   2.axios 常用语法
   axios(config): 通用/最本质的发任意类型请求的方式
   axios(url[, config]): 可以只指定 url 发 get 请求
   axios.request(config): 等同于 axios(config)
   axios.get(url[, config]): 发 get 请求
   axios.delete(url[, config]): 发 delete 请求
   axios.post(url[, data, config]): 发 post 请求
   axios.put(url[, data, config]): 发 put 请求
   axios.defaults.xxx: 请求的默认全局配置
   axios.interceptors.request.use(): 添加请求拦截器
   axios.interceptors.response.use(): 添加响应拦截器
   axios.create([config]): 创建一个新的 axios(它没有下面的功能)
   axios.Cancel(): 用于创建取消请求的错误对象
   axios.CancelToken(): 用于创建取消请求的 token 对象
   axios.isCancel(): 是否是一个取消请求的错误
   axios.all(promises): 用于批量执行多个异步请求
   axios.spread(): 用来指定接收所有成功数据的回调函数的方法
   3.axios既能在浏览器环境运行又能在服务器(node)环境运行？
   axios在浏览器端使用XMLHttpRequest对象发送ajax请求；在node环境使用http对象发送ajax请求。

var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
var adapter;
if (typeof XMLHttpRequest !== ‘undefined’) {
// 浏览器环境
adapter = require(’./adapter/xhr’);
} else if (typeof process !== ‘undefined’) {
// node环境
adapter = require(’./adapter/http’);
}
return adapter;
}
上面几行代码，可以看出：XMLHttpRequest 是一个 API，它为客户端提供了在客户端和服务器之间传输数据的功能；process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

4.axios相关配置属性

url是用于请求的服务器URL

method是创建请求时使用的方法,默认是get

baseURL将自动加在url前面，除非url是一个绝对URL。它可以通过设置一个baseURL便于为axios实例的方法传递相对URL

transformRequest允许在向服务器发送前，修改请求数据，只能用在’PUT’,'POST’和’PATCH’这几个请求方法

headers是即将被发送的自定义请求头

headers:{'X-Requested-With':'XMLHttpRequest'},

params是即将与请求一起发送的URL参数，必须是一个无格式对象(plainobject)或URLSearchParams对象

params:{
ID:12345
},

auth表示应该使用HTTP基础验证，并提供凭据
这将设置一个Authorization头，覆写掉现有的任意使用headers设置的自定义Authorization头

auth:{
username:'janedoe',
password:'s00pers3cret'
},

'proxy’定义代理服务器的主机名称和端口
auth表示HTTP基础验证应当用于连接代理，并提供凭据
这将会设置一个Proxy-Authorization头，覆写掉已有的通过使用header设置的自定义Proxy-Authorization头。

proxy:{
host:'127.0.0.1',
port:9000,
	auth::{
	username:'mikeymike',
	password:'rapunz3l'
	}
},

5.axios拦截器

axios拦截器分为请求拦截器和响应拦截器
request请求拦截器：发送请求前统一处理，如：设置请求头headers等

axios.interceptors.request.use(config => {
  	config.interceptors = '请求拦截器'
  	return config
}, function(error) {

})

response响应拦截器，有时候我们要根据响应的状态码来进行下一步操作。

axios.interceptors.response.use(function(res) {
  let data = res.data
    return data
  }
}, function(error) {
  
})

清除拦截器：前面的拦截器需设置值接收。

axios.interceptors.request.eject('引入名称');
axios.interceptors.response.eject('引入名称');

原文链接：https://blog.csdn.net/Oralinge/article/details/102507877

6.axios的封装

安装
npm install axios; // 安装axios复制代码
引入
一般我会在项目的src目录中，新建一个request文件夹，然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios，api.js用来统一管理我们的接口。

// 在http.js中引入axios
import axios from ‘axios’; // 引入axios
import QS from ‘qs’; // 引入qs模块，用来序列化post类型的数据，后面会提到
// vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from ‘vant’;
复制代码
环境的切换
我们的项目环境可能有开发环境、测试环境和生产环境。我们通过node的环境变量来匹配我们的默认的接口url前缀。axios.defaults.baseURL可以设置axios的默认请求地址就不多说了。

// 环境的切换
if (process.env.NODE_ENV == ‘development’) {
axios.defaults.baseURL = ‘https://www.baidu.com’;}
else if (process.env.NODE_ENV == ‘debug’) {
axios.defaults.baseURL = ‘https://www.ceshi.com’;
}
else if (process.env.NODE_ENV == ‘production’) {
axios.defaults.baseURL = ‘https://www.production.com’;
}复制代码
设置请求超时
通过axios.defaults.timeout设置默认的请求超时时间。例如超过了10s，就会告知用户当前请求超时，请刷新等。

axios.defaults.timeout = 10000;复制代码
post请求头的设置
post请求的时候，我们需要加上一个请求头，所以可以在这里进行一个默认的设置，即设置post的请求头为application/x-www-form-urlencoded;charset=UTF-8

axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded;charset=UTF-8’;复制代码
请求拦截
我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。

请求拦截

// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from ‘@/store/index’;

// 请求拦截器axios.interceptors.request.use(
config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},
error => {
return Promise.error(error);
})
复制代码
这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中），会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。这时候或许有些小伙伴会有疑问了，就是每个请求都携带token，那么要是一个页面不需要用户登录就可以访问的怎么办呢？其实，你前端的请求可以携带token，但是后台可以选择不接收啊！

响应的拦截

// 响应拦截器
axios.interceptors.response.use(
response => {
// 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
// 否则的话抛出错误
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
// 未登录则跳转登录页面，并携带当前页面的路径
// 在登录成功后返回当前页面，这一步需要在登录页操作。
case 401:
router.replace({
path: ‘/login’,
query: {
redirect: router.currentRoute.fullPath
}
});
break;

            // 403 token过期
            // 登录过期对用户进行提示
            // 清除本地token和清空vuex中token对象
            // 跳转登录页面                
            case 403:
                 Toast({
                    message: '登录过期，请重新登录',
                    duration: 1000,
                    forbidClick: true
                });
                // 清除token
                localStorage.removeItem('token');
                store.commit('loginSuccess', null);
                // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面 
                setTimeout(() => {                        
                    router.replace({                            
                        path: '/login',                            
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }                        
                    });                    
                }, 1000);                    
                break; 

            // 404请求不存在
            case 404:
                Toast({
                    message: '网络请求不存在',
                    duration: 1500,
                    forbidClick: true
                });
                break;
            // 其他错误，直接抛出错误提示
            default:
                Toast({
                    message: error.response.data.message,
                    duration: 1500,
                    forbidClick: true
                });
        }
        return Promise.reject(error.response);
    }
}    

});复制代码
响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。

要注意的是，上面的Toast()方法，是我引入的vant库中的toast轻提示组件，你根据你的ui库，对应使用你的一个提示组件。

封装get方法和post方法

我们常用的ajax请求方法有get、post、put等方法，相信小伙伴都不会陌生。axios对应的也有很多类似的方法，不清楚的可以看下文档。但是为了简化我们的代码，我们还是要对其进行一个简单的封装。下面我们主要封装两个方法：get和post。
get方法：我们通过定义一个get函数，get函数有两个参数，第一个参数表示我们要请求的url地址，第二个参数是我们要携带的请求参数。get函数返回一个promise对象，当axios其请求成功时resolve服务器返回 值，请求失败时reject错误值。最后通过export抛出get函数。

/**

• get方法，对应get请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
  */
  export function get(url, params){
  return new Promise((resolve, reject) =>{
  axios.get(url, {
  params: params
  }).then(res => {
  resolve(res.data);
  }).catch(err =>{
  reject(err.data)
  })
  });}复制代码

post方法：原理同get基本一样，但是要注意的是，post方法必须要使用对提交从参数对象进行序列化的操作，所以这里我们通过node的qs模块来序列化我们的参数。这个很重要，如果没有序列化操作，后台是拿不到你提交的数据的。这就是文章开头我们import QS from ‘qs’;的原因。如果不明白序列化是什么意思的，就百度一下吧，答案一大堆。

/**

• post方法，对应post请求
• @param {String} url [请求的url地址]
• @param {Object} params [请求时携带的参数]
  */
  export function post(url, params) {
  return new Promise((resolve, reject) => {
  axios.post(url, QS.stringify(params))
  .then(res => {
  resolve(res.data);
  })
  .catch(err =>{
  reject(err.data)
  })
  });
  }复制代码
  这里有个小细节说下，axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。区别就是，get的第二个参数是一个{}，然后这个对象的params属性值是一个参数对象的。而post的第二个参数就是一个参数对象。两者略微的区别要留意哦！

axios的封装基本就完成了，下面再简单说下api的统一管理。
整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。上面说了，我们会新建一个api.js,然后在这个文件中存放我们所有的api接口。
首先我们在api.js中引入我们封装的get和post方法

/**

• api接口统一管理
  */
  import { get, post } from './http’复制代码

http://www.baiodu.com/api/v1/users/my_address/address_edit_before
我们可以在api.js中这样封装：
export const apiAddress = p => post(‘api/v1/users/my_address/address_edit_before’, p);复制代码
我们定义了一个apiAddress方法，这个方法有一个参数p，p是我们请求接口时携带的参数对象。而后调用了我们封装的post方法，post方法的第一个参数是我们的接口地址，第二个参数是apiAddress的p参数，即请求接口时携带的参数对象。最后通过export导出apiAddress。

然后在我们的页面中可以这样调用我们的api接口：

import { apiAddress } from '@/request/api';// 导入我们的api接口
export default {        
    name: 'Address',    
    created () {
        this.onLoad();
    },
    methods: {            
        // 获取数据            
        onLoad() {
            // 调用api接口，并且提供了两个参数                
            apiAddress({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 获取数据成功后的其他操作
                ………………                
            })            
        }        
    }
}

其他的api接口，就在pai.js中继续往下面扩展就可以了。友情提示，为每个接口写好注释哦！！！

api接口管理的一个好处就是，我们把api统一集中起来，如果后期需要修改接口，我们就直接在api.js中找到对应的修改就好了，而不用去每一个页面查找我们的接口然后再修改会很麻烦。关键是，万一修改的量比较大，就规格gg了。还有就是如果直接在我们的业务代码修改接口，一不小心还容易动到我们的业务代码造成不必要的麻烦。

好了，最后把完成的axios封装代码奉上。

/**axios封装
 * 请求拦截、相应拦截、错误统一处理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 环境的切换
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api.123dailu.com/';
}

// 请求超时时间
axios.defaults.timeout = 10000;

// post请求头
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 请求拦截器
axios.interceptors.request.use(    
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

// 响应拦截器
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服务器状态码不是200的情况    
    error => {        
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登录                
                // 未登录则跳转登录页面，并携带当前页面的路径                
                // 在登录成功后返回当前页面，这一步需要在登录页操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { redirect: router.currentRoute.fullPath } 
                    });
                    break;
                // 403 token过期                
                // 登录过期对用户进行提示                
                // 清除本地token和清空vuex中token对象                
                // 跳转登录页面                
                case 403:                     
                    Toast({                        
                        message: '登录过期，请重新登录',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    store.commit('loginSuccess', null);                    
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404请求不存在                
                case 404:                    
                    Toast({                        
                        message: '网络请求不存在',                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });                    
                break;                
                // 其他错误，直接抛出错误提示                
                default:                    
                    Toast({                        
                        message: error.response.data.message,                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });            
            }            
            return Promise.reject(error.response);        
        }       
    }
);
/** 
 * get方法，对应get请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function get(url, params){    
    return new Promise((resolve, reject) =>{        
        axios.get(url, {            
            params: params        
        })        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}
/** 
 * post方法，对应post请求 
 * @param {String} url [请求的url地址] 
 * @param {Object} params [请求时携带的参数] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

http.js中axios封装的优化，先直接贴代码：

/**
 * axios封装
 * 请求拦截、响应拦截、错误统一处理
 */
import axios from 'axios';
import router from '../router';
import store from '../store/index';
import { Toast } from 'vant';

/** 
 * 提示函数 
 * 禁止点击蒙层、显示一秒后关闭
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

/** 
 * 跳转登录页
 * 携带当前页面路由，以期在登录页面完成登录后返回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

/** 
 * 请求失败后的错误统一处理 
 * @param {Number} status 请求失败的状态码
 */
const errorHandle = (status, other) => {
    // 状态码判断
    switch (status) {
        // 401: 未登录状态，跳转登录页
        case 401:
            toLogin();
            break;
        // 403 token过期
        // 清除token并跳转登录页
        case 403:
            tip('登录过期，请重新登录');
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        // 404请求不存在
        case 404:
            tip('请求的资源不存在'); 
            break;
        default:
            console.log(other);   
        }}

// 创建axios实例
var instance = axios.create({    timeout: 1000 * 12});
// 设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 请求拦截器 
 * 每次请求前，如果存在token则在请求头中携带token 
 */ 
instance.interceptors.request.use(    
    config => {        
        // 登录流程控制中，根据本地是否存在token判断用户的登录情况        
        // 但是即使token存在，也有可能token是过期的，所以在每次的请求头中携带token        
        // 后台根据携带的token判断用户的登录情况，并返回给我们对应的状态码        
        // 而后我们可以在响应拦截器中，根据状态码进行一些统一的操作。        
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => Promise.error(error))

// 响应拦截器
instance.interceptors.response.use(    
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 请求失败
    error => {
        const { response } = error;
        if (response) {
            // 请求已发出，但是不在2xx的范围 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            store.commit('changeNetwork', false);
        }
    });

export default instance;复制代码
这个axios和之前的大同小异，做了如下几点改变：
1.去掉了之前get和post方法的封装，通过创建一个axios实例然后export default方法导出，这样使用起来更灵活一些。

2.去掉了通过环境变量控制baseUrl的值。考虑到接口会有多个不同域名的情况，所以准备通过js变量来控制接口域名。这点具体在api里会介绍。

3.增加了请求超时，即断网状态的处理。说下思路，当断网时，通过更新vuex中network的状态来控制断网提示组件的显示隐藏。断网提示一般会有重新加载数据的操作，这步会在后面对应的地方介绍。

4.公用函数进行抽出，简化代码，尽量保证单一职责原则。

下面说下api这块，考虑到一下需求：

1.更加模块化

2.更方便多人开发，有效减少解决命名冲突

3.处理接口域名有多个情况

这里这里呢新建了一个api文件夹，里面有一个index.js和一个base.js，以及多个根据模块划分的接口js文件。index.js是一个api的出口，base.js管理接口域名，其他js则用来管理各个模块的接口。

先放index.js代码：

/** 
 * api接口的统一出口
 */
// 文章模块接口
import article from '@/api/article';
// 其他模块的接口……

// 导出接口
export default {    
    article,
    // ……
}

index.js是一个api接口的出口，这样就可以把api接口根据功能划分为多个模块，利于多人协作开发，比如一个人只负责一个模块的开发等，还能方便每个模块中接口的命名哦。

base.js:

/**
 * 接口域名的管理
 */
const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}
export default base;

通过base.js来管理我们的接口域名，不管有多少个都可以通过这里进行接口的定义。即使修改起来，也是很方便的。

最后就是接口模块的说明，例如上面的article.js:

/**

• article模块接口列表
  */

import base from './base'; // 导入接口域名列表
import axios from '@/utils/http'; // 导入http中创建的axios实例
import qs from 'qs'; // 根据需求是否导入qs模块

const article = {    
    // 新闻列表    
    articleList () {        
        return axios.get(`${base.sq}/topics`);    
    },    
    // 新闻详情,演示    
    articleDetail (id, params) {        
        return axios.get(`${base.sq}/topic/${id}`, {            
            params: params        
        });    
    },
    // post提交    
    login (params) {        
        return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));    
    }
    // 其他接口…………
}

export default article;

1.通过直接引入我们封装好的axios实例，然后定义接口、调用axios实例并返回，可以更灵活的使用axios，比如你可以对post请求时提交的数据进行一个qs序列化的处理等。

2.请求的配置更灵活，你可以针对某个需求进行一个不同的配置。关于配置的优先级，axios文档说的很清楚，这个顺序是：在 lib/defaults.js 找到的库的默认值，然后是实例的 defaults 属性，最后是请求的 config 参数。后者将优先于前者。

3.restful风格的接口，也可以通过这种方式灵活的设置api接口地址。

最后，为了方便api的调用，我们需要将其挂载到vue的原型上。在main.js中：

import Vue from 'vue'
import App from './App'
import router from './router' // 导入路由文件
import store from './store' // 导入vuex文件
import api from './api' // 导入api接口

Vue.prototype.$api = api; // 将api挂载到vue的原型上复制代码

然后我们可以在页面中这样调用接口，

methods: {    
    onLoad(id) {      
        this.$api.article.articleDetail(id, {        
            api: 123      
        }).then(res=> {
            // 执行某些操作      
        })    
    }  
}

再提一下断网的处理，这里只做一个简单的示例：

这是app.vue，这里简单演示一下断网。在http.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。断网情况下，加载断网组件，不加载对应页面的组件。当点击刷新的时候，我们通过跳转refesh页面然后立即返回的方式来实现重新获取数据的操作。因此我们需要新建一个refresh.vue页面，并在其beforeRouteEnter钩子中再返回当前页面。

// refresh.vue
beforeRouteEnter (to, from, next) {
    next(vm => {            
        vm.$router.replace(from.fullPath)        
    })    
}

全局通用的断网提示

cnpm install axios -S
import axios from 'axios';
import { Message } from 'element-ui';

axios.defaults.timeout = 5000;
axios.defaults.baseURL ='';

//http request 拦截器
axios.interceptors.request.use(
  config => {
    // const token = getCookie('名称');注意使用的时候需要引入cookie方法，推荐js-cookie
    config.data = JSON.stringify(config.data);
    config.headers = {
      'Content-Type':'application/x-www-form-urlencoded'
    }
    // if(token){
    //   config.params = {'token':token}
    // }
    return config;
  },
  error => {
    return Promise.reject(err);
  }
);


//http response 拦截器
axios.interceptors.response.use(
  response => {
    if(response.data.errCode ==2){
      router.push({
        path:"/login",
        querry:{redirect:router.currentRoute.fullPath}//从哪个页面跳转
      })
    }
    return response;
  },
  error => {
    return Promise.reject(error)
  }
)


/**
 * 封装get方法
 * @param url
 * @param data
 * @returns {Promise}
 */

export function fetch(url,params={}){
  return new Promise((resolve,reject) => {
    axios.get(url,{
      params:params
    })
    .then(response => {
      resolve(response.data);
    })
    .catch(err => {
      reject(err)
    })
  })
}


/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          },err => {
            reject(err)
          })
   })
 }

/**

• 封装patch请求
• @param url
• @param data
• @returns {Promise}
  */

export function patch(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.patch(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

/**

• 封装put请求
• @param url
• @param data
• @returns {Promise}
  */

export function put(url,data = {}){
  return new Promise((resolve,reject) => {
    axios.put(url,data)
         .then(response => {
           resolve(response.data);
         },err => {
           reject(err)
         })
  })
}

第三步
在main.js中引入

import axios from 'axios'
import {post,fetch,patch,put} from './utils/http'

//定义全局变量

Vue.prototype.$post=post;
Vue.prototype.$fetch=fetch;
Vue.prototype.$patch=patch;
Vue.prototype.$put=put;

最后在组件里直接使用

 mounted(){
    this.$fetch('/api/v2/movie/top250')
      .then((response) => {
        console.log(response)
      })
  },

三. fetch

1.特点

fetch是一种HTTP数据请求的方式，是XMLHttpRequest的一种替代方案。fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

1、第一个参数是URL:
2、第二个是可选参数，可以控制不同配置的 init 对象
3、使用了 JavaScript Promises 来处理结果/回调:

2.fetch的封装

export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
    type = type.toUpperCase();
    url = baseUrl + url;

    if (type == 'GET') {
        let dataStr = ''; //数据拼接字符串
        Object.keys(data).forEach(key => {
            dataStr += key + '=' + data[key] + '&';
        })

        if (dataStr !== '') {
            dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
            url = url + '?' + dataStr;
        }
    }

    if (window.fetch && method == 'fetch') {
        let requestConfig = {
            credentials: 'include',//为了在当前域名内自动发送 cookie ， 必须提供这个选项
            method: type,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            mode: "cors",//请求的模式
            cache: "force-cache"
        }

        if (type == 'POST') {
            Object.defineProperty(requestConfig, 'body', {
                value: JSON.stringify(data)
            })
        }
        
        try {
            const response = await fetch(url, requestConfig);
            const responseJson = await response.json();
            return responseJson
        } catch (error) {
            throw new Error(error)
        }
    } else {
        return new Promise((resolve, reject) => {
            let requestObj;
            if (window.XMLHttpRequest) {
                requestObj = new XMLHttpRequest();
            } else {
                requestObj = new ActiveXObject;
            }

            let sendData = '';
            if (type == 'POST') {
                sendData = JSON.stringify(data);
            }

            requestObj.open(type, url, true);
            requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            requestObj.send(sendData);

            requestObj.onreadystatechange = () => {
                if (requestObj.readyState == 4) {
                    if (requestObj.status == 200) {
                        let obj = requestObj.response
                        if (typeof obj !== 'object') {
                            obj = JSON.parse(obj);
                        }
                        resolve(obj)
                    } else {
                        reject(requestObj)
                    }
                }
            }
        })
    }
}

3.fetch的配置

一个基本的 fetch 请求设置起来很简单。看看下面的代码：

fetch(‘http://example.com/movies.json’)
.then(function(response) {
return response.json();
})
.then(function(myJson) {
console.log(myJson);
});
这里我们通过网络获取一个 JSON 文件并将其打印到控制台。最简单的用法是只提供一个参数用来指明想 fetch() 到的资源路径，然后返回一个包含响应结果的promise（一个 Response 对象）。

当然它只是一个 HTTP 响应，而不是真的JSON。为了获取JSON的内容，我们需要使用 json() 方法（在 Body mixin 中定义，被 Request 和 Response 对象实现）。

注意：Body mixin 还有其他相似的方法，用于获取其他类型的内容。参考 Body。

最好使用符合内容安全策略 (CSP)的链接而不是使用直接指向资源地址的方式来进行Fetch的请求。

支持的请求参数
fetch() 接受第二个可选参数，一个可以控制不同配置的 init 对象：

参考 fetch()，查看所有可选的配置和更多描述。

// Example POST method implementation:

postData(‘http://example.com/answer’, {answer: 42})
.then(data => console.log(data)) // JSON from response.json() call
.catch(error => console.error(error))

function postData(url, data) {
// Default options are marked with *
return fetch(url, {
body: JSON.stringify(data), // must match ‘Content-Type’ header
cache: ‘no-cache’, // *default, no-cache, reload, force-cache, only-if-cached
credentials: ‘same-origin’, // include, same-origin, *omit
headers: {
‘user-agent’: ‘Mozilla/4.0 MDN Example’,
‘content-type’: ‘application/json’
},
method: ‘POST’, // *GET, POST, PUT, DELETE, etc.
mode: ‘cors’, // no-cors, cors, *same-origin
redirect: ‘follow’, // manual, *follow, error
referrer: ‘no-referrer’, // *client, no-referrer
})
.then(response => response.json()) // parses response to JSON
}
发送带凭据的请求
为了让浏览器发送包含凭据的请求（即使是跨域源），要将credentials: 'include’添加到传递给 fetch()方法的init对象。

fetch(‘https://example.com’, {
credentials: ‘include’
})
如果你只想在请求URL与调用脚本位于同一起源处时发送凭据，请添加 credentials: ‘same-origin’。

// The calling script is on the origin ‘https://example.com’

fetch(‘https://example.com’, {
credentials: ‘same-origin’
})
要改为确保浏览器不在请求中包含凭据，请使用 credentials: ‘omit’。

fetch(‘https://example.com’, {
credentials: ‘omit’
})
上传 JSON 数据
使用 fetch() POST JSON数据

var url = ‘https://example.com/profile’;
var data = {username: ‘example’};

fetch(url, {
method: ‘POST’, // or ‘PUT’
body: JSON.stringify(data), // data can be string or {object}!
headers: new Headers({
‘Content-Type’: ‘application/json’
})
}).then(res => res.json())
.catch(error => console.error(‘Error:’, error))
.then(response => console.log(‘Success:’, response));
上传文件
可以通过 HTML 元素，FormData() 和 fetch() 上传文件。

var formData = new FormData();
var fileField = document.querySelector(“input[type=‘file’]”);

formData.append(‘username’, ‘abc123’);
formData.append(‘avatar’, fileField.files[0]);

fetch(‘https://example.com/profile/avatar’, {
method: ‘PUT’,
body: formData
})
.then(response => response.json())
.catch(error => console.error(‘Error:’, error))
.then(response => console.log(‘Success:’, response));
上传多个文件
可以通过HTML 元素，FormData() 和 fetch() 上传文件。

var formData = new FormData();
var photos = document.querySelector(“input[type=‘file’][multiple]”);

formData.append(‘title’, ‘My Vegas Vacation’);
// formData 只接受文件、Blob 或字符串，不能直接传递数组，所以必须循环嵌入
for (let i = 0; i < photos.files.length; i++) {
formData.append(‘photo’, photos.files[i]);
}

fetch(‘https://example.com/posts’, {
method: ‘POST’,
body: formData
})
.then(response => response.json())
.then(response => console.log(‘Success:’, JSON.stringify(response)))
.catch(error => console.error(‘Error:’, error));
检测请求是否成功
如果遇到网络故障，fetch() promise 将会 reject，带上一个 TypeError 对象。虽然这个情况经常是遇到了权限问题或类似问题——比如 404 不是一个网络故障。想要精确的判断 fetch() 是否成功，需要包含 promise resolved 的情况，此时再判断 Response.ok 是不是为 true。类似以下代码：

fetch(‘flowers.jpg’).then(function(response) {
if(response.ok) {
return response.blob();
}
throw new Error(‘Network response was not ok.’);
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
}).catch(function(error) {
console.log('There has been a problem with your fetch operation: ', error.message);
});
自定义请求对象
除了传给 fetch() 一个资源的地址，你还可以通过使用 Request() 构造函数来创建一个 request 对象，然后再作为参数传给 fetch()：

var myHeaders = new Headers();

var myInit = { method: ‘GET’,
headers: myHeaders,
mode: ‘cors’,
cache: ‘default’ };

var myRequest = new Request(‘flowers.jpg’, myInit);

fetch(myRequest).then(function(response) {
return response.blob();
}).then(function(myBlob) {
var objectURL = URL.createObjectURL(myBlob);
myImage.src = objectURL;
});
Request() 和 fetch() 接受同样的参数。你甚至可以传入一个已存在的 request 对象来创造一个拷贝：

var anotherRequest = new Request(myRequest,myInit);
这个很有用，因为 request 和 response bodies 只能被使用一次（译者注：这里的意思是因为设计成了 stream 的方式，所以它们只能被读取一次）。创建一个拷贝就可以再次使用 request/response 了，当然也可以使用不同的 init 参数。

注意：clone() 方法也可以用于创建一个拷贝。它和上述方法一样，如果 request 或 response 的 body 已经被读取过，那么将执行失败。区别在于， clone() 出的 body 被读取不会导致原 body 被标记为已读取。

Headers
使用 Headers 的接口，你可以通过 Headers() 构造函数来创建一个你自己的 headers 对象。一个 headers 对象是一个简单的多名值对：

var content = “Hello World”;
var myHeaders = new Headers();
myHeaders.append(“Content-Type”, “text/plain”);
myHeaders.append(“Content-Length”, content.length.toString());
myHeaders.append(“X-Custom-Header”, “ProcessThisImmediately”);
也可以传一个多维数组或者对象字面量：

myHeaders = new Headers({
“Content-Type”: “text/plain”,
“Content-Length”: content.length.toString(),
“X-Custom-Header”: “ProcessThisImmediately”,
});
它的内容可以被获取：

console.log(myHeaders.has(“Content-Type”)); // true
console.log(myHeaders.has(“Set-Cookie”)); // false
myHeaders.set(“Content-Type”, “text/html”);
myHeaders.append(“X-Custom-Header”, “AnotherValue”);

console.log(myHeaders.get(“Content-Length”)); // 11
console.log(myHeaders.getAll(“X-Custom-Header”)); // [“ProcessThisImmediately”, “AnotherValue”]

myHeaders.delete(“X-Custom-Header”);
console.log(myHeaders.getAll(“X-Custom-Header”)); // [ ]
虽然一些操作只能在 ServiceWorkers 中使用，但是它提供了更方便的操作 Headers 的 API。

如果使用了一个不合法的HTTP Header属性名，那么Headers的方法通常都抛出 TypeError 异常。如果不小心写入了一个不可写的属性，也会抛出一个 TypeError 异常。除此以外的情况，失败了并不抛出异常。例如：

var myResponse = Response.error();
try {
myResponse.headers.set(“Origin”, “http://mybank.com”);
} catch(e) {
console.log(“Cannot pretend to be a bank!”);
}
最好在在使用之前检查内容类型 content-type 是否正确，比如：

fetch(myRequest).then(function(response) {
if(response.headers.get(“content-type”) === “application/json”) {
return response.json().then(function(json) {
// process your JSON further
});
} else {
console.log(“Oops, we haven’t got JSON!”);
}
});
Guard
由于 Headers 可以在 request 请求中被发送或者在 response 请求中被接收，并且规定了哪些参数是可写的，Headers 对象有一个特殊的 guard 属性。这个属性没有暴露给 Web，但是它影响到哪些内容可以在 Headers 对象中被操作。

可能的值如下：

none：默认的
request：从 request 中获得的 headers（Request.headers）只读
request-no-cors：从不同域（Request.mode no-cors）的 request 中获得的 headers 只读
response：从 response 中获得的 headers（Response.headers）只读
immutable：在 ServiceWorkers 中最常用的，所有的 headers 都只读。
注意：你不可以添加或者修改一个 guard 属性是 request 的 Request Header 的 Content-Length 属性。同样地，插入 Set-Cookie 属性到一个 response header 是不允许的，因此，Service Worker 中，不能给合成的 Response 的 header 添加一些 cookie。

Response 对象
如上所述，Response 实例是在 fetch() 处理完 promise 之后返回的。

你会用到的最常见的 response 属性有:

Response.status — 整数（默认值为200）为response的状态码。
Response.statusText — 字符串（默认值为"OK"），该值与 HTTP 状态码消息对应。
Response.ok — 如上所示，该属性是来检查response的状态是否在 200 - 299（包括200 和 299）这个范围内。该属性返回一个布尔值。
它的实例也可用通过 JavaScript 来创建，但只有在 ServiceWorkers 中才真正有用，当使用 respondWith() 方法并提供了一个自定义的 response 来接受 request 时：

var myBody = new Blob();

addEventListener(‘fetch’, function(event) {
event.respondWith(new Response(myBody, {
headers: { “Content-Type” : “text/plain” }
});
});
Response() 构造方法接受两个可选参数—— response 的数据体和一个初始化对象（与Request() 所接受的 init 参数类似。）

注意: 静态方法 error() 只是返回了错误的response。与此类似地，redirect() 只是返回了一个可以重定向至某 URL 的 response。这些也只与 Service Worker 有关。

Body
不管是请求还是响应都能够包含 body 对象。body 也可以是以下任意类型的实例。

ArrayBuffer
ArrayBufferView (Uint8Array等)
Blob/File
string
URLSearchParams
FormData
Body 类定义了以下方法（这些方法都被 Request 和Response所实现）以获取 body 内容。这些方法都会返回一个被解析后的Promise对象和数据。

arrayBuffer()
blob()
json()
text()
formData()
比起XHR来，这些方法让非文本化的数据使用起来更加简单。

请求体可以由传入 body 参数来进行设置：

var form = new FormData(document.getElementById(‘login-form’));
fetch("/login", {
method: “POST”,
body: form
})
request和response（包括 fetch() 方法）都会试着自动设置 Content-Type。如果没有设置 Content-Type 值，发送的请求也会自动设值。

特性检测
Fetch API 的支持情况，可以通过检测Headers, Request, Response 或 fetch()是否在Window 或 Worker 域中。例如：

if(self.fetch) {
// run my fetch request here
} else {
// do something with XMLHttpRequest?
}
Polyfill
如果要在不支持的浏览器中使用 Fetch，可以使用 Fetch Polyfill。

4…Ajax,Axios,fetch的区别

• Ajax
• 针对MVC的编程设计,不符合现在前端MVVM的趋势
• 基于原生的XHR开发，XHR本身的架构不够清晰
• JQuery较大，单纯使用ajax却要引入整个JQuery非常的不合理
Axios
• 从 node.js 创建 http 请求
• 支持 Promise API，基于标准的Promise实现，支持async/await
• 客户端支持防止CSRF（请求中携带cookie）
• 提供了一些并发请求的接口（重要，方便了很多的操作）
Fetch
• 更加底层，提供的API丰富（request, response）
• 符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里
• 更好更方便的写法
• 脱离了XHR，是ES规范里新的实现方式
• 跨域处理（mode为"no-cors"）
缺点：
• fetch只对网络请求报错，对400，500都当做成功的请求，需要封装去处理
• fetch默认不会带cookie，需要添加配置项fetch(url, {credentials: ‘include’})
• fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行，造成了流量的浪费
• fetch没有办法原生监测请求的进度，而XHR可以
• 所有版本的 IE 均不支持原生 Fetch，fetch-ie8 会自动使用 XHR 做 polyfill。但在跨域时有个问题需要处理。IE8, 9 的 XHR 不支持 CORS 跨域，不支持传 Cookie！所以推荐使用 fetch-jsonp
接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject， 即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。
fetch() 不会接受跨域 cookies；你也不能使用 fetch() 建立起跨域会话。其他网站的 Set-Cookie 头部字段将会被无视。
fetch 不会发送 cookies。除非你使用了credentials 的初始化选项。（自 2017 年 8 月 25 日以后，默认的 credentials 政策变更为 same-origin

四. async/await

1async/await特点

async/await更加语义化，async 是“异步”的简写，async function 用于申明一个 function 是异步的； await，可以认为是async wait的简写， 用于等待一个异步方法执行完成；

async/await是一个用同步思维解决异步问题的方案（等结果出来之后，代码才会继续往下执行）

可以通过多层 async function 的同步写法代替传统的callback嵌套

2.async function语法

自动将常规函数转换成Promise，返回值也是一个Promise对象

只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数

异步函数内部可以使用await

async function name([param[, param[, … param]]]) { statements }
name: 函数名称。
param: 要传递给函数的参数的名称
statements: 函数体语句。
返回值: 返回的Promise对象会以async function的返回值进行解析，或者以该函数抛出的异常进行回绝。

3.await语法

await 放置在Promise调用之前，await 强制后面点代码等待，直到Promise对象resolve，得到resolve的值作为await表达式的运算结果

await只能在async函数内部使用,用在普通函数里就会报错
错误处理
在async函数里，无论是Promise reject的数据还是逻辑报错，都会被默默吞掉,所以最好把await放入try{}catch{}中，catch能够捕捉到Promise对象rejected的数据或者抛出的异常

function timeout(ms) {

return new Promise((resolve, reject) => {

setTimeout(() => {reject('error')}, ms);  //reject模拟出错，返回error

});

}

async function asyncPrint(ms) {

try {

 console.log('start');

 await timeout(ms);  //这里返回了错误

 console.log('end');  //所以这句代码不会被执行了

} catch(err) {

 console.log(err); //这里捕捉到错误error

}

}

asyncPrint(1000);
如果不用try/catch的话，也可以像下面这样处理错误（因为async函数执行后返回一个promise）

function timeout(ms) {

return new Promise((resolve, reject) => {

setTimeout(() => {reject('error')}, ms);  //reject模拟出错，返回error

});

}

async function asyncPrint(ms) {

console.log(‘start’);

await timeout(ms)

console.log(‘end’); //这句代码不会被执行了

}

asyncPrint(1000).catch(err => {

console.log(err)； // 从这里捕捉到错误

});
如果你不想让错误中断后面代码的执行，可以提前截留住错误，像下面

function timeout(ms) {

return new Promise((resolve, reject) => {

setTimeout(() => {

    reject('error')

}, ms);  //reject模拟出错，返回error

});

}

async function asyncPrint(ms) {

console.log(‘start’);

await timeout(ms).catch(err => { // 注意要用catch

console.log(err)

})

console.log(‘end’); //这句代码会被执行

}

asyncPrint(1000);

4.使用场景

多个await命令的异步操作，如果不存在依赖关系（后面的await不依赖前一个await返回的结果），用Promise.all()让它们同时触发

function test1 () {
return new Promise((resolve, reject) => {

    setTimeout(() => {

        resolve(1)

    }, 1000)

})

}

function test2 () {

return new Promise((resolve, reject) => {

    setTimeout(() => {

        resolve(2)

    }, 2000)

})

}

async function exc1 () {

console.log('exc1 start:',Date.now())

let res1 = await test1();

let res2 = await test2(); // 不依赖 res1 的值

console.log('exc1 end:', Date.now())

}

async function exc2 () {

console.log('exc2 start:',Date.now())

let [res1, res2] = await Promise.all([test1(), test2()])

console.log('exc2 end:', Date.now())

}

exc1();
exc2();
exc1 的两个并列await的写法，比较耗时，只有test1执行完了才会执行test2

你可以在浏览器的Console里尝试一下，会发现exc2的用Promise.all执行更快一些

在自己的项目中通过 babel 来使用。

只需要设置 presets 为 stage-3 即可。
安装依赖：

npm install babel-preset-es2015 babel-preset-stage-3 babel-runtime babel-plugin-transform-runtime

修改.babelrc:

“presets”: [“es2015”, “stage-3”],

“plugins”: [“transform-runtime”]
这样就可以在项目中使用 async 函数了。

5.优点
什么是Async/Await?
async/await是写异步代码的新方式，以前的方法有回调函数和Promise。
async/await是基于Promise实现的，它不能用于普通的回调函数。
async/await与Promise一样，是非阻塞的。
async/await使得异步代码看起来像同步代码，这正是它的魔力所在。
Async/Await语法
示例中，getJSON函数返回一个promise，这个promise成功resolve时会返回一个JSON对象。我们只是调用这个函数，打印返回的JSON对象，然后返回”done”。

使用Promise是这样的:

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

使用Async/Await是这样的:

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

它们有一些细微不同:

函数前面多了一个aync关键字。await关键字只能用在aync定义的函数内。async函数会隐式地返回一个promise，该promise的reosolve值就是函数return的值。(示例中reosolve值就是字符串”done”)
第1点暗示我们不能在最外层代码中使用await，因为不在async函数内。

// 不能在最外层代码中使用await
await makeRequest()

// 这是会出事情的 
makeRequest().then((result) => {
  // 代码
})

await getJSON()表示console.log会等到getJSON的promise成功reosolve之后再执行。

为什么Async/Await更好？

1. 简洁
   由示例可知，使用Async/Await明显节约了不少代码。我们不需要写.then，不需要写匿名函数处理Promise的resolve值，也不需要定义多余的data变量，还避免了嵌套代码。这些小的优点会迅速累计起来，这在之后的代码示例中会更加明显。

2. 错误处理
   Async/Await让try/catch可以同时处理同步和异步错误。在下面的promise示例中，try/catch不能处理JSON.parse的错误，因为它在Promise中。我们需要使用.catch，这样错误处理代码非常冗余。并且，在我们的实际生产代码会更加复杂。

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // JSON.parse可能会出错
        const data = JSON.parse(result)
        console.log(data)
      })
      // 取消注释，处理异步代码的错误
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

使用aync/await的话，catch能处理JSON.parse错误:

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

3. 条件语句
   下面示例中，需要获取数据，然后根据返回数据决定是直接返回，还是继续获取更多的数据。

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

这些代码看着就头痛。嵌套（6层），括号，return语句很容易让人感到迷茫，而它们只是需要将最终结果传递到最外层的Promise。

上面的代码使用async/await编写可以大大地提高可读性:

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

4. 中间值
   你很可能遇到过这样的场景，调用promise1，使用promise1返回的结果去调用promise2，然后使用两者的结果去调用promise3。你的代码很可能是这样的:

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return promise2(value1)
        .then(value2 => {        
          return promise3(value1, value2)
        })
    })
}

如果promise3不需要value1，可以很简单地将promise嵌套铺平。如果你忍受不了嵌套，你可以将value 1 & 2 放进Promise.all来避免深层嵌套：

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      return Promise.all([value1, promise2(value1)])
    })
    .then(([value1, value2]) => {      
      return promise3(value1, value2)
    })
}

这种方法为了可读性牺牲了语义。除了避免嵌套，并没有其他理由将value1和value2放在一个数组中。

使用async/await的话，代码会变得异常简单和直观。

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

5. 错误栈
   下面示例中调用了多个Promise，假设Promise链中某个地方抛出了一个错误:

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
  })

Promise链中返回的错误栈没有给出错误发生位置的线索。更糟糕的是，它会误导我们；错误栈中唯一的函数名为callAPromise，然而它和错误没有关系。(文件名和行号还是有用的)。

然而，async/await中的错误栈会指向错误所在的函数:

c

onst makeRequest = async () => {
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  throw new Error("oops");
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at makeRequest (index.js:7:9)
  })

在开发环境中，这一点优势并不大。但是，当你分析生产环境的错误日志时，它将非常有用。这时，知道错误发生在makeRequest比知道错误发生在then链中要好。

6. 调试
   最后一点，也是非常重要的一点在于，async/await能够使得代码调试更简单。2个理由使得调试Promise变得非常痛苦:

不能在返回表达式的箭头函数中设置断点 Fqbv84viF2A97r63UA6F_Hbidrx
如果你在.then代码块中设置断点，使用Step Over快捷键，调试器不会跳到下一个.then，因为它只会跳过异步代码。
使用await/async时，你不再需要那么多箭头函数，这样你就可以像调试同步代码一样跳过await语句。

五. promise

1.概念

Promise 是 ES6 中的一个内置对象，本身是一个构造函数，通过 new 可以创建一个 Promise 对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外），Promise 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据。代码风格，容易理解，便于维护。多个异步等待合并便于解决。
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

2.方法

resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。
promise有三个状态：
1、pending[待定]初始状态
2、fulfilled[实现]操作成功
3、rejected[被否决]操作失败
当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
promise状态一经改变，不会再变。
Promise对象的状态改变，只有两种可能：
从pending变为fulfilled
从pending变为rejected。
这两种情况只要发生，状态就凝固了，不会再变了
二、试想一个页面聊天系统，我们需要从两个不同的URL分别获得用户的个人信息和好友列表，这两个任务是可以并行执行的，用Promise.all()实现如下：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
// 同时执行p1和p2，并在它们都完成后执行then:
Promise.all([p1, p2]).then(function (results) {
    console.log(results); // 获得一个Array: ['P1', 'P2']
});

有些时候，多个异步任务是为了容错。比如，同时向两个URL读取用户的个人信息，只需要获得先返回的结果即可。这种情况下，用Promise.race()实现：

var p1 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
    setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
    console.log(result); // 'P1'
});

3.错误处理

Promise会自动捕获内部异常，并交给rejected响应函数处理。
第一种：reject(‘错误信息’).then(() => {}, () => {错误处理逻辑})
第二种：throw new Error(‘错误信息’).catch( () => {错误处理逻辑})
推荐使用第二种方式，更加清晰好读，并且可以捕获前面所有的错误（可以捕获N个then回调错误），catch也会返回一个promise实例，并且是resolved状态

4.setTimeout、Promise、Async/Await 的区别

事件循环中分为宏任务队列和微任务队列
其中setTimeout的回调函数放到宏任务队列里，等到执行栈清空以后执行promise.then里的回调函数会放到相应宏任务的微任务队列里，等宏任务里面的同步代码执行完再执行async函数表示函数里面可能会有异步方法，await后面跟一个表达式
async方法执行时，遇到await会立即执行表达式，然后把表达式后面的代码放到微任务队列里，让出执行栈让同步代码先执行

5.使用class 手写一个promise

//创建一个Promise的类

  class Promise{
    constructor(executer){//构造函数constructor里面是个执行器
      this.status = 'pending';//默认的状态 pending
      this.value = undefined//成功的值默认undefined
      this.reason = undefined//失败的值默认undefined
      //状态只有在pending时候才能改变
      let resolveFn = value =>{
        //判断只有等待时才能resolve成功
        if(this.status == pending){
          this.status = 'resolve';
          this.value = value;
        }
      }
      //判断只有等待时才能reject失败
      let rejectFn = reason =>{
        if(this.status == pending){
          this.status = 'reject';
          this.reason = reason;
        }
      }    
      try{
        //把resolve和reject两个函数传给执行器executer
        executer(resolve,reject);
      }catch(e){
        reject(e);//失败的话进catch
      }
    }
    then(onFufilled,onReject){
      //如果状态成功调用onFufilled
      if(this.status = 'resolve'){
        onFufilled(this.value);
      }
      //如果状态失败调用onReject
      if(this.status = 'reject'){
        onReject(this.reason);
      }
    }
  }

六、跨域概念，解决方法

1:什么情况造成跨域？
同源策略限制 不同源会造成跨域。以下任意一种情况不同，都是不同源。

http://www.baidu.com/8080/index.html
http:// 协议不同
www 子域名不同
baidu.com 主域名不同
8080 端口号不同
www.baidu.com ip地址和网址不同
2:跨域解决方案有哪些？
1:jsonp 只能解决get跨域(问的最多)
原理：动态创建一个script标签。利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容。
步骤：
去创建一个script标签
script的src属性设置接口地址
接口参数,必须要带一个自定义函数名 要不然后台无法返回数据。
通过定义函数名去接收后台返回数据
//去创建一个script标签
var script = document.createElement(“script”);
//script的src属性设置接口地址 并带一个callback回调函数名称
script.src = “http://127.0.0.1:8888/index.php?callback=jsonpCallback”;
//插入到页面
document.head.appendChild(script);
//通过定义函数名去接收后台返回数据
function jsonpCallback(data){
//注意 jsonp返回的数据是json对象可以直接使用
//ajax 取得数据是json字符串需要转换成json对象才可以使用。
}

2:CORS：跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器将会允许跨域请求
限制：浏览器需要支持HTML5，可以支持POST，PUT等方法兼容ie9以上
需要后台设置
Access-Control-Allow-Origin: * //允许所有域名访问，或者
Access-Control-Allow-Origin: http://a.com //只允许所有域名访问
3:设置 document.domain
原理：相同主域名不同子域名下的页面，可以设置document.domain让它们同域
限制：同域document提供的是页面间的互操作，需要载入iframe页面
// URL http://a.com/foo
var ifr = document.createElement(‘iframe’);
ifr.src = ‘http://b.a.com/bar’;
ifr.onload = function(){
var ifrdoc = ifr.contentDocument || ifr.contentWindow.document;
ifrdoc.getElementsById(“foo”).innerHTML);
};

ifr.style.display = ‘none’;
document.body.appendChild(ifr);
4:用Apache做转发（逆向代理），让跨域变成同域
7:http常见状态码有哪些？
一: 2开头状态码
2xx (成功)表示成功处理了请求的状态代码
200 (成功) 服务器已成功处理了请求。 通常。
二: 3开头状态码
3xx (重定向) 表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。
304 (未修改) 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。
三: 4开头状态码
4xx(请求错误) 这些状态代码表示请求可能出错，妨碍了服务器的处理
1:400 (错误请求) 服务器不理解请求的语法。

2:403 (禁止) 服务器拒绝请求。

3:404 (未找到) 服务器找不到请求的网页。
四: 5开头状态码
5xx(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错
500 (服务器内部错误) 服务器遇到错误，无法完成请求。

501 (尚未实施) 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。

502 (错误网关) 服务器作为网关或代理，从上游服务器收到无效响应。

503 (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常，这只是暂时状态。

504 (网关超时) 服务器作为网关或代理，但是没有及时从上游服务器收到请求。

505 (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。