fetch axios async/await 接口调用

fetch

Fetch API

fetch基本特性

• 相比Ajax更加简单地数据获取方式，功能更强大，更灵活，可以看作是传统Ajax升级版
• 一个基本地fetch请求很简单，如下：

fetch(url)
  .then(function(response) {
   
    return response.text();
  })
  .then(function(data) {
   
    console.log(data);
  });
  /*
  第一个then方法获取数据，但不可以直接拿到数据
  返回值是一个Promise对象，这个返回值不管请求是否成功都返回一个Promise对象
  第二个then就可以直接拿到数据使用
  */

• fetch接受第二个可选参数

fetch(url, {
   
   // 设置发送请求方式
   method: 'POST',
   
   //处理发送请求的json数据
   body: JSON.stringify(data), 
   
   // 设置请求头
   headers: {
   
     'content-type': 'application/json' // 数据格式
   },
   
   //包含请求的缓存模式 (default, reload, no-cache)
   cache: 'no-cache',

   //包含请求的模式 (cors, no-cors, same-origin, navigate)
   //no-cors: 常用于跨域请求不带CORS响应头场景
   //cors表示同域和带有CORS响应头的跨域下可请求成功
   mode: 'cors'
 })
 .then(response => response