4.2、浏览器哀求详解（ajax、fetch、axios使用，手写ajax） ...

在浏览器端发送网络哀求的常见方式：

• ajax；
  
• fetch；
  
• axios；
  

1.ajax

Ajax 是一个技能统称，是一个概念模子，它席卷了很多技能，并不特指某一技能，它很重要的特性之一就是让页面实现局部革新。
特点：

• 局部革新页面，无需重载整个页面。
  

简单来说，Ajax 是一种头脑，XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式。
手写ajax

使用 XMLHttpRequest 模块实现 Ajax。
1、创建异步对象

1. let xmlHttp;
2. if (window.XMLHttpRequest) {
3.   // code for IE7+, Firefox, Chrome, Opera, Safari
4.   xmlHttp = new XMLHttpRequest();
5. } else {
6.   // code for IE6, IE5
7.   xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
8. }

复制代码

创建的这个异步对象上有很多属性和方法，常用的有

• onreadystatechange：监听异步对象哀求状态码readyState的改变，每当readyState改变时，就会触发onreadystatechange事件；
  
• readyState：哀求状态码（readyState表示异步对象现在的状态，状态码从0到4）：
  0: 表示哀求未初始化，还没有调用 open()；
  1: 服务器连接已创建，但是还没有调用 send()；
  2: 哀求已接收，正在处理中（通常现在可以从响应中获取内容头）；
  3: 哀求处理中，通常响应中已有部门数据可用了，没有全部完成；
  4: 当readyState状态码为4时，表示哀求已完成；此阶段确认全部数据都已经剖析完毕，可以通过异步对象的属性获取对应数据；
  
• status：http状态码
  http状态码表示成功的http状态码有
  xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304
  
• responseText：后台返回的字符串情势的响应数据；
  
• responseXML：后台返回的XML情势的响应数据；
  

2、设置哀求方式和哀求地址
创建异步对象之后，通过open()方法设置ajax哀求方式和哀求地址 格式：
xmlHttp.open(“GET/POST”,“ajax-get.txt”,true)
   第一个参数：哀求的范例；GET 还是 POST；
第二个参数：表示哀求的文件的地址url；
第三个参数：设置哀求方法是不是异步async，true为异步，false为同步。AJAX存在的意义就是发异步哀求，所以第三个参数永远传true；
  留意：有个标题，就是IE中的缓存标题
在IE浏览器中，如果通过Ajax发送GET哀求，那么IE浏览器以为，同一个URL只有一个效果，如果地址没有发生厘革，它就会把上一次返回的效果，直接返回。如许我们不能实时的拿到厘革后的数据。如果要想我们拿到实时数据，必须保证每次的URL都是不一样的，有两种方式：
   

• Math.random()；
  
• new Date().getTime()；
  

  即在哀求地址后面拼接上?t=随机数或者1970.01.01至当前的毫秒数 所以在IE中通过ajax发送get哀求时，可以设置哀求地址为：

1. xmlHttp.open("GET","ajax-get.txt?t=" + (new Date().getTime()),true);
2. //或
3. xmlHttp.open("GET","ajax-get.txt?t=" + Math.random(),true);

复制代码

3、发送哀求
直接通过异步对象的send()发送哀求

1. xmlHttp.send();

复制代码

特别留意的是： 如果发送POST哀求，使用setRequestHeader()来添加 HTTP哀求头，并在send()方法中通报要发送的数据：

1. xmlHttp.open("POST","ajax_test.html",true);
2. xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3. xmlHttp.send("fname=Henry&lname=Ford");

复制代码

4、通过onreadystatechange监听状态厘革
当异步对象的readyState发生改变，会触发onreadystatechange函数，当readyState变成为4时，表示当前状态是哀求完毕的状态，同时当http的响应码status为200到300之间（包括200和300）或为304时，表示ajax哀求成功;当http状态码不是200到300之间的数也不是304时，表示哀求不成功

1. //4.监听状态变化
2. xmlHttp.onreadystatechange = () => {
3. // 判断当前状态改变是请求完毕的状态吗
4. if (xmlHttp.readyState === 4) {
5.     if (xmlHttp.status >= 200 && xmlHttp.status < 300 || xmlHttp.status == 304) {
6.         console.log("成功的接收到服务器返回的数据");
7.     }else{
8.         console.log("不成功！");
9.     }   
10. }
11. }  

复制代码

5、处理返回的效果
如果成功，可通过异步对象的responseText属性来获取服务器返回的字符串
接下来，我们来封装一个方法ajax()用于发送哀求
ajax()方法调用：

1. ajax({
2.   type: 'GET',
3.   url: 'http://localhost:3000/posts',
4.   timeout: 1000,//方法设置超时时间
5.   data:[{name:'张三'}]
6.   success: data => {
7.     console.log('success', data);
8.   },
9.   error: err => {
10.     console.log('error', err);
11.   },
12. });

复制代码

实现法ajax()：

1. const ajax = option => {  //  0.将data对象转换成字符串  //处理obj  const objToString = data => {    data.t = new Date().getTime();    let res = [];    for (let key in data) {      //需要将key和value转成非中文的情势，因为url不能有中文。使用encodeURIComponent();      res.push(encodeURIComponent(key) + ' = ' + encodeURIComponent(data[key]));    }    return res.join('&');  };  let str = objToString(option.data || {});  //  1.创建一个异步对象xmlHttp；  var xmlHttp, timer;  if (window.XMLHttpRequest) {    xmlHttp = new XMLHttpRequest();  } else if (xmlHttp) {    // code for IE6, IE5    xmlHttp = new ActiveXObject('Microsoft.xmlHttp');  }  //  2.设置哀求方式和哀求地址；  // 判定哀求的范例是POST还是GET  if (option.type.toLowerCase() === 'get') {    xmlHttp.open(option.type, option.url + '?' + str, true);    //  3.发送哀求；    xmlHttp.send();
2.   } else {    xmlHttp.open(option.type, option.url, true);    // 留意：在post哀求中，必须在open和send之间添加HTTP哀求头：setRequestHeader(header,value);    xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');    //  3.发送哀求；    xmlHttp.send(str);  }  //  4.监听状态的厘革；  xmlHttp.onreadystatechange = function () {    clearInterval(timer);    debugger;    if (xmlHttp.readyState === 4) {      if ((xmlHttp.status >= 200 && xmlHttp.status < 300) || xmlHttp.status == 304) {        //  5.处理返回的效果；        option.success(xmlHttp.responseText); //成功后回调；      } else {        option.error(xmlHttp.responseText); //失败后回调；      }    }  };  //判定外界是否传入了超时时间  if (option.timeout) {    timer = setInterval(function () {      xmlHttp.abort(); //制止哀求      clearInterval(timer);    }, option.timeout);  }};

复制代码

ajax只是一种异步哀求的方式，并不特指某一种具体的实现方式，但随着使用这种方式实现网络哀求时内部又包含哀求的情况，就会出现回调地狱，这也是XHR的诟病之一，因此，后来才催生了更加优雅的哀求方式。
2. fetch

Fetch 是在 ES6 出现的，它使用了 ES6 提出的 Promise 对象。它是 XMLHttpRequest 的替代品。
有人把它与 Ajax 作比较，实在这是不对的，我们通常所说的Ajax 是指使用 XMLHttpRequest 实现的 Ajax，所以真正应该和 XMLHttpRequest 作比较。
   Fetch 是一个 API，它是真实存在的，它是基于 Promise 的。
发起阅读：MDN
  fetch()的功能与 XMLHttpRequest 基本相同，但有三个差异：

• fetch使用 Promise，倒霉用回调函数，因此大大简化了写法，写起来更简洁；
  
• fetch采用模块化设计，API 分散在多个对象上（Response 对象、Request 对象、Headers 对象），更公道一些；相比之下，XMLHttpRequest 的 API 设计并不是很好，输入、输出、状态都在同一个接口管理，容易写出非常混乱的代码；
  
• fetch通过数据流（Stream 对象）处理数据，可以分块读取，有利于进步网站性能体现，淘汰内存占用，对于哀求大文件或者网速慢的场景相当有用。XMLHTTPRequest 对象不支持数据流，所有的数据必须放在缓存里，不支持分块读取，必须等待全部拿到后，再一次性吐出来；
  

在用法上，fetch()继承一个 URL 字符串作为参数，默认向该网址发出 GET 哀求，返回一个 Promise 对象。它的基本用法如下。

1. fetch(url)
2.   .then(...)
3.   .catch(...)

复制代码

下面是一个demo，从服务器获取 JSON 数据。

1. fetch('https://api.github.com/users/ruanyf')
2.   .then(response => response.json())
3.   .then(json => console.log(json))
4.   .catch(err => console.log('Request Failed', err));

复制代码

fetch()接收到的response是一个 Stream 对象，response.json()是一个异步操纵，取出所有内容，并将其转为 JSON 对象。
Promise 可以使用 await 语法改写，使得语义更清晰。

1. async function getJSON() {
2.   let url = 'https://api.github.com/users/ruanyf';
3.   try {
4.     let response = await fetch(url);
5.     return await response.json();
6.   } catch (error) {
7.     console.log('Request Failed', error);
8.   }
9. }

复制代码

上面示例中，await语句必须放在try…catch里面，如许才气捕捉异步操纵中可能发生的错误。
2.1 Response

fetch()哀求成功以后，得到的是一个 Response 对象

1. const response = await fetch(url);

复制代码

Response 包含的数据通过 Stream 接口异步读取，但是它还包含一些同步属性，对应 HTTP 回应的标头信息，可以立刻读取。
标头信息：

• Response.ok：属性返回一个布尔值，表示哀求是否成功，true对应 HTTP 哀求的状态码 200 到 299，false对应其他的状态码；
  
• Response.status：属性返回一个数字，表示 HTTP 回应的状态码（例如200，表示成功哀求）；
  
• Response.statusText：属性返回一个字符串，表示 HTTP 回应的状态信息（例如哀求成功以后，服务器返回"OK"）；
  
• Response.url：属性返回哀求的 URL。如果 URL 存在跳转，该属性返回的是最终 URL;
  
• Response.type：属性返回哀求的范例。可能的值如下：
  
  
  
  • basic：普通哀求，即同源哀求；
    
  • cors：跨域哀求；
    
  • error：网络错误，重要用于 Service Worker；
    
  • opaque：如果fetch()哀求的type属性设为no-cors，就会返回这个值。表示发出的是简单的跨域哀求，雷同表单的那种跨域哀求；
    
  • opaqueredirect：如果fetch()哀求的redirect属性设为manual，就会返回这个值；
    
  
  
• Response.redirected：属性返回一个布尔值，表示哀求是否发生过跳转。
  

判定哀求是否成功
fetch()发出哀求以后，有一个很重要的留意点：只有网络错误，或者无法连接时，fetch()才会报错，其他情况都不会报错，而是以为哀求成功。
这就是说，纵然服务器返回的状态码是 4xx 或 5xx，fetch()也不会报错（即 Promise 不会变为 rejected状态）。
那怎么判定哀求是否成功呢？
1、Response.status属性，得到 HTTP 回应的真实状态码
response.status属性只有即是 2xx （200~299），才气认定哀求成功。这里不用考虑网址跳转（状态码为 3xx），因为fetch()会将跳转的状态码自动转为 200。

• response.ok是否为true
  

Response.headers
Response 对象另有一个Response.headers属性，指向一个 Headers 对象，对应 HTTP 回应的所有标头。
Headers 对象提供了以下方法，用来操纵标头。
   Headers.get()：根据指定的键名，返回键值。
Headers.has()：返回一个布尔值，表示是否包含某个标头。
Headers.set()：将指定的键名设置为新的键值，如果该键名不存在则会添加。
Headers.append()：添加标头。 Headers.delete()：删除标头。
Headers.keys()：返回一个遍历器，可以依次遍历所有键名。
Headers.values()：返回一个遍历器，可以依次遍历所有键值。
Headers.entries()：返回一个遍历器，可以依次遍历所有键值对（[key, value]）。
Headers.forEach()：依次遍历标头，每个标头都会实行一次参数函数。
  如：

1. let response =  await  fetch(url);  
2. response.headers.get('Content-Type')
3. // application/json; charset=utf-8

复制代码

读取内容的方法
Response对象根据服务器返回的不同范例的数据，提供了不同的读取方法。

• response.text()：得到文本字符串；比如 HTML 文件。
  
• response.json()：得到 JSON 对象；
  
• response.blob()：得到二进制 Blob 对象；读取图片文件。
  
• response.formData()：得到 FormData 表单对象；重要用在 Service Worker 里面，拦截用户提交的表单，修改某些数据以后，再提交给服务器。
  
• response.arrayBuffer()：得到二进制 ArrayBuffer 对象；重要用于获取流媒体文件。
  

这5个读取方法都是异步的，返回的都是 Promise 对象。必须等到异步操纵结束，才气得到服务器返回的完备数据。
如：

1. const response = await fetch('/users.html');
2. const body = await response.text();
3. document.body.innerHTML = body

复制代码

Response.clone
Stream 对象只能读取一次，读取完就没了。这意味着，前一节的五个读取方法，只能使用一个，否则会报错。

1. let text =  await response.text();
2. let json =  await response.json();  // 报错

复制代码

Response 对象提供Response.clone()方法，创建Response对象的副本，实现多次读取。

1. const response1 = await fetch('flowers.jpg');
2. const response2 = response1.clone();
4. const myBlob1 = await response1.blob();
5. const myBlob2 = await response2.blob();
7. image1.src = URL.createObjectURL(myBlob1);
8. image2.src = URL.createObjectURL(myBlob2);

复制代码

上面示例中，response.clone()复制了一份 Response 对象，然后将同一张图片读取了两次。
Response.body
Response.body属性是 Response 对象暴暴露的底层接口，返回一个 ReadableStream 对象，供用户操纵。
它可以用来分块读取内容，应用之一就是表现下载的进度。

1. const response = await fetch('flower.jpg');
2. const reader = response.body.getReader();
4. while(true) {
5.   const {done, value} = await reader.read();
7.   if (done) {
8.     break;
9.   }
11.   console.log(`Received ${value.length} bytes`)
12. }

复制代码

response.body.getReader()方法返回一个遍历器。这个遍历器的read()方法每次返回一个对象，表示本次读取的内容块。
这个对象的done属性是一个布尔值，用来判定有没有读完；value属性是一个 arrayBuffer 数组，表示内容块的内容，而value.length属性是当前块的大小
2.2 定制 HTTP 哀求

fetch()的第一个参数是 URL，还可以继承第二个参数，作为配置对象，定制发出的 HTTP 哀求

1. fetch(url, optionObj)

复制代码

HTTP 哀求的方法、标头、数据体都在这个对象里面设置。
如：

2. const response = await fetch(url, {
3.   method: 'POST',
4.   headers: {
5.     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8",
6.   },
7.   body: 'foo=bar&lorem=ipsum',
8. });
10. const json = await response.json();

复制代码

2.3 option API

fetch()第二个参数的完备 API 如下：

1. const response = fetch(url, {
2.   method: "GET",
3.   headers: {
4.     "Content-Type": "text/plain;charset=UTF-8"
5.   },
6.   body: undefined,
7.   referrer: "about:client",//用于设定fetch()请求的referer标头
8.   referrerPolicy: "no-referrer-when-downgrade",//用于设定Referer标头的规则
9.   mode: "cors", //mode属性指定请求的模式 跨域/同源
10.   credentials: "same-origin",//是否发送 Cookie
11.   cache: "default",//指定如何处理缓存 请求远程服务器与更不更新缓存
12.   redirect: "follow",//指定 HTTP 跳转的处理方法 如果页面发生跳转，fetch()跟随/报错/指向新url
13.   integrity: "",//指定一个哈希值，用于检查 HTTP 回应传回的数据是否等于这个预先设定的哈希值,比如，下载文件时，检查文件的 SHA-256 哈希值是否相符，确保没有被篡改
14.   keepalive: false,//为true时 表示页面卸载时，告诉浏览器在后台保持连接，继续发送数据,使用场景用户离开网页时，脚本向服务器提交一些用户行为的统计信息
15.   signal: undefined//指定一个 AbortSignal 实例，用于取消fetch()请求
16. });

复制代码

可以去 Fetch_API检察具体api
2.4 fetch cancel

fetch()哀求发送以后，如果中途想要取消，需要使用AbortController对象。
controller.abort()方法用于发出取消信号
下面是一个1秒后自动取消哀求的例子。

1. let controller = new AbortController();
2. setTimeout(() => controller.abort(), 1000);
4. try {
5.   let response = await fetch('/long-operation', {
6.     signal: controller.signal
7.   });
8. } catch(err) {
9.   if (err.name == 'AbortError') {
10.     console.log('Aborted!');
11.   } else {
12.     throw err;
13.   }
14. }

复制代码

3.axios

axios是一个用于网络哀求的第三方库，是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，它本身具有以下特征：

• 从浏览器中创建 XMLHttpRequest；
  
• 从 node.js 发出 http 哀求；
  
• 支持 Promise API；
  
• 拦截哀求和响应；
  
• 转换哀求和响应数据；
  
• 取消哀求；
  
• 自动转换JSON数据；
  
• 客户端支持防止CSRF/XSRF；
  

3.1 基本使用

最基本的配置项应该包括：

• method 哀求的方法（可选值： get , post 等）；
  
• url 哀求的地址 （必须项）；
  
• data 哀求发送的数据（post等哀求需要）；
  

1. axios({
2.   method: 'post',
3.   url: '/user/12345',
4.   data: {
5.     firstName: 'Fred',
6.     lastName: 'Flintstone'
7.   }
8. });

复制代码

哀求响应的处理在 then 和 catch 回调中，哀求正常会进入 then ，哀求异常则会进 catch

1. // 发送 POST 请求
2. axios({
3.   method: 'post',
4.   url: '/user/12345',
5.   data: {
6.     firstName: 'Fred',
7.     lastName: 'Flintstone'
8.   }
9. }).then(res => {
10.     consloe.log(res)
11. }).catch(err => {
12.     console.log(err)
13. })
15. // 发送 GET 请求（默认的方法）
16. axios('/user/12345');

复制代码

也可以使用axios.get()和axios.post()

1. // 发送GET请求
2. axios.get('/user?ID=12345').then(function (response) {
3.   console.log(response);
4. }).catch(function (error) {
5.   console.log(error);
6. });
8. // 发送POST请求
9. axios.post('/user', {
10.   firstName: 'Fred',
11.   lastName: 'Flintstone'
12. }).then(function (response) {
13.   console.log(response);
14. }).catch(function (error) {
15.   console.log(error);
16. });

复制代码

3.2 响应数据

其中的 data 是后端返回的数据，一般只需要关注 response 中的 data 字段就行

1. {
2.   // `data` 由服务器提供的响应
3.   data: {},
4.   // `status` 来自服务器响应的 HTTP 状态码
5.   status: 200,
6.   // `statusText` 来自服务器响应的 HTTP 状态信息
7.   statusText: 'OK',
8.   // `headers` 服务器响应的头
9.   headers: {},
10.    // `config` 是为请求提供的配置信息
11.   config: {},
12.   request: {}
13. }

复制代码

3.3 创建实例（封装）

可以使用自定义配置新建一个 axios 实例 axios.create([config])：

1. const instance = axios.create({
2.   baseURL: 'https://some-domain.com/api/',
3.   timeout: 1000,
4.   headers: {'X-Custom-Header': 'foobar'}
5. });

复制代码

以下是实例所拥有的方法

• request(config)；
  
• get(url[, config])；
  
• delete(url[, config])；
  
• head(url[, config])；
  
• options(url[, config])；
  
• post(url[, data[, config]])；
  
• put(url[, data[, config]])；
  
• patch(url[, data[, config]])；
  

axios会把这些 方法中的config 会和创建实例时指定的 config 合并到一起使用
3.4 拦截器

• axios.interceptors.request 哀求拦截器
  
• axios.interceptors.response 响应拦截器
  

1. // 添加请求拦截器
2. axios.interceptors.request.use(function (config) {
3.   // 在发送请求之前做些什么
4.   config.header["Token"] = "xxxx"
5.   return config;
6. }, function (error) {
7.   // 对请求错误做些什么
8.   return Promise.reject(error);
9. });
11. // 添加响应拦截器
12. axios.interceptors.response.use(function (response) {
13.   // 对响应数据做点什么
14.   if (response.status === 200){
15.     return response.data
16.   } else {
17.     return Promise.reject(new Error('error'))
18.   }
19. }, function (error) {
20.   // 对响应错误做点什么
21.   return Promise.reject(error);
22. });

复制代码

如果想要取消拦截器，可以通过使用一个变量来接收设置拦截器时返回的实例，然后使用 eject 来取消拦截器

1. const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
2. axios.interceptors.request.eject(myInterceptor);

复制代码

3.5 完备的哀求配置

1. {
2.    // `url` 是用于请求的服务器 URL
3.   url: '/user',
4.   // `method` 是创建请求时使用的方法
5.   method: 'get', // default
6.   // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
7.   // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
8.   baseURL: 'https://some-domain.com/api/',
9.   // `transformRequest` 允许在向服务器发送前，修改请求数据
10.   // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
11.   // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
12.   transformRequest: [function (data, headers) {
13.     // 对 data 进行任意转换处理
14.     return data;
15.   }],
16.   // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
17.   transformResponse: [function (data) {
18.     // 对 data 进行任意转换处理
19.     return data;
20.   }],
21.   // `headers` 是即将被发送的自定义请求头
22.   headers: {'X-Requested-With': 'XMLHttpRequest'},
23.   // `params` 是即将与请求一起发送的 URL 参数
24.   // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
25.   params: {
26.     ID: 12345
27.   },
28.    // `paramsSerializer` 是一个负责 `params` 序列化的函数
29.   // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
30.   paramsSerializer: function(params) {
31.     return Qs.stringify(params, {arrayFormat: 'brackets'})
32.   },
33.   // `data` 是作为请求主体被发送的数据
34.   // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
35.   // 在没有设置 `transformRequest` 时，必须是以下类型之一：
36.   // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
37.   // - 浏览器专属：FormData, File, Blob
38.   // - Node 专属： Stream
39.   data: {
40.     firstName: 'Fred'
41.   },
42.   // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
43.   // 如果请求话费了超过 `timeout` 的时间，请求将被中断
44.   timeout: 1000,
45.    // `withCredentials` 表示跨域请求时是否需要使用凭证
46.   withCredentials: false, // default
47.   // `adapter` 允许自定义处理请求，以使测试更轻松
48.   // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
49.   adapter: function (config) {
50.     /* ... */
51.   },
52. // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
53.   // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
54.   auth: {
55.     username: 'janedoe',
56.     password: 's00pers3cret'
57.   },
58.    // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
59.   responseType: 'json', // default
60.   // `responseEncoding` indicates encoding to use for decoding responses
61.   // Note: Ignored for `responseType` of 'stream' or client-side requests
62.   responseEncoding: 'utf8', // default
63.    // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
64.   xsrfCookieName: 'XSRF-TOKEN', // default
65.   // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
66.   xsrfHeaderName: 'X-XSRF-TOKEN', // default
67.    // `onUploadProgress` 允许为上传处理进度事件
68.   onUploadProgress: function (progressEvent) {
69.     // Do whatever you want with the native progress event
70.   },
71.   // `onDownloadProgress` 允许为下载处理进度事件
72.   onDownloadProgress: function (progressEvent) {
73.     // 对原生进度事件的处理
74.   },
75.    // `maxContentLength` 定义允许的响应内容的最大尺寸
76.   maxContentLength: 2000,
77.   // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
78.   validateStatus: function (status) {
79.     return status >= 200 && status < 300; // default
80.   },
81.   // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
82.   // 如果设置为0，将不会 follow 任何重定向
83.   maxRedirects: 5, // default
84.   // `socketPath` defines a UNIX Socket to be used in node.js.
85.   // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
86.   // Only either `socketPath` or `proxy` can be specified.
87.   // If both are specified, `socketPath` is used.
88.   socketPath: null, // default
89.   // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
90.   // `keepAlive` 默认没有启用
91.   httpAgent: new http.Agent({ keepAlive: true }),
92.   httpsAgent: new https.Agent({ keepAlive: true }),
93.   // 'proxy' 定义代理服务器的主机名称和端口
94.   // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
95.   // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
96.   proxy: {
97.     host: '127.0.0.1',
98.     port: 9000,
99.     auth: {
100.       username: 'mikeymike',
101.       password: 'rapunz3l'
102.     }
103.   },
104.   // `cancelToken` 指定用于取消请求的 cancel token
105.   // （查看后面的 Cancellation 这节了解更多）
106.   cancelToken: new CancelToken(function (cancel) {
107.   })
108. }

复制代码

总结

• Ajax 是Async Javascript And Xml的简称，它是原生JavaScript的一种哀求方案，使用 XMLHttpRequest 进行异步哀求数据，实现无感革新数据；
  
• Fetch 是 ES6 新推出的一套异步哀求方案，它天生自带 Promise，同时也是原生的，如果在较小项目中为了项目大小着想和兼容性不是那么高的前提下不妨可以用它来进行异步哀求也是不错的；
  
• Axios 是基于 Ajax 和 Promise 封装的一个库，可以使用Promise来更好的管控哀求回调嵌套造成的回调地狱；
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。