Fetch API 与 Axios

栏目: jQuery · 发布时间: 4年前

内容简介:ES6的出现带来了Promise语法,实现了js的callback的变化;XHR是ajax请求的基础,以往的异步请求用到了大量的ajax譬如jq等,Promise的基础上封装的Fetch API更加优雅 已经大量用于客服端和服务器端,譬如 Axios,本文主要讲述Fetch API 与 Ajax的不同点和基础应用,和Axios API这种是链式写法,第一个获取请求成功信息,第二个获取请求失败信息,第三个捕获异常fetch 接受两个参数,一个是URL,另一个「可选」是请求体「method,body,heade

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web Security, Privacy and Commerce, 2nd Edition

Web Security, Privacy and Commerce, 2nd Edition

Simson Garfinkel / O'Reilly Media / 2002-01-15 / USD 44.95

Since the first edition of this classic reference was published, World Wide Web use has exploded and e-commerce has become a daily part of business and personal life. As Web use has grown, so have ......一起来看看 《Web Security, Privacy and Commerce, 2nd Edition》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换