阅读 225

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

参考资料

MDN使用 Fetch

Axios使用说明

传统 Ajax 已死,Fetch 永生

关注下面的标签,发现更多相似文章
评论