Fetch API 与 Axios

ES6的出现带来了Promise语法，实现了js的callback的变化；XHR是ajax请求的基础，以往的异步请求用到了大量的ajax譬如jq等，Promise的基础上封装的Fetch API更加优雅 已经大量用于客服端和服务器端，譬如 Axios，本文主要讲述Fetch API 与 Ajax的不同点和基础应用，和Axios API

XHR 与 Fetch 发送请求

使用XHR发送请求：

var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.responseType = 'json';
    
    xhr.onload = function() {
      console.log(xhr.response);
    };
    
    xhr.onerror = function() {
      console.log("Oops, error");
    };
    
    xhr.send();
复制代码

• 创建XML
• 发送请求
• 通过回调获取响应信息

使用 Fecth API 发送请求如下：

fetch(url).then(
        response => response.json()
    ).then(
    data => console.log(data)
    ).catch(
    e => console.log("Oops, error", e)
    )

复制代码

这种是链式写法，第一个获取请求成功信息，第二个获取请求失败信息，第三个捕获异常

Fetch 与 XHR 不同

• Fetch接收到错误状态码『404, 500 ...』时候, 返回的Promise状态为 resolve『完成状态』，只有在网络故障或者请求被阻止『跨域』才是reject『拒绝状态』。而XHR 会直接返回为error
• Fetch需要设置credentials才能从服务端发送或接收任何 cookies

Fetch API 基本应用

fetch 接受两个参数，一个是URL，另一个「可选」是请求体「method，body，headers...」

• 发送GET请求：

fetch('https://example.com')
复制代码

• 发送 POST请求：

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'
  })
复制代码

其他参照MDN文档

基于Promise封装的js库「axios API」

用法是Fetch与JQ的大集合

• GET请求

axios.get('https://example.com')
复制代码

• URL带参请求：

axios.get('/user?ID=12345')
    // 用 params 封装
    axios.get('/user', {
    params: {
      ID: 12345
    }
  })
复制代码

• POST请求：

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
复制代码

• 传递配置创建请求：

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
复制代码

• 同时内置了其他方法

axios.request(config)
    axios.get(url[, config])
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])
复制代码