使用Koa mock数据和使用fetch获取数据

Koa官网

MDN上关于fetch的解释

使用Koa

前端开发中，在后端接口未完成的情况下如何获取数据？可以采用Mock数据的方式，按照后端提供的接口格式临时生成数据。

安装Koa

npm install koa koa-body koa-router --save-dev

使用Koa

const Koa =require("koa");
const Router =require("koa-router");
const app = new Koa();
const router = new Router();
router.get("/",(ctx)=>{
    ctx.response.type = 'text/html';    // 设置response的Content-Type:
    ctx.response.body = "index";        // 设置response的内容:
})
router.get("/api/:id",(ctx)=>{          // 带参数的请求
    ctx.response.type = 'text/html';
    ctx.response.body = "api"+ctx.params.id;
})
app.use(router.routes());
app.listen(3000);                       // 监听端口

运行

node server.js

webpack-dev-server中配置代理解决跨域

// 在webpack.config.js中配置
module.exports = {
    // ...
    devServer: {
        proxy : {
            "/api":{
                target: 'http://localhost:3000',
                secure: false
            }
        }
    } 
}

配置代理之后，所有/api下访问的路径都将在http://localhost:3000下访问。例如访问http://localhost:8080/api/a，实际上访问的为http://localhost:3000/api/a

---

使用fetch获取数据

fetch() 方法提供了一种简单合理的方式来跨网络异步获取资源，fetch()请求后返回一个Promise对象

• 当接受到HTTP响应时，fetch返回的对象都为resolve状态。只有网络故障或者请求被阻止时，才会被标记为reject
• fetch默认不会从服务端发送或接收任何cookies，要发送cookies，必须设置credentials选项

fetch在Chrome、firedox下都有原生的支持，为了兼容其他浏览器，可安装whatwg-fetch

npm install whatwg-fetch --save

导入fetch：

import 'whatwg-fetch'

fetch使用的语法格式为：

Promise fetch(input[, init]);

基本的fetch请求

可以将要请求的资源的路径作为参数传入fetch，fetch请求后返回一个Promise对象。

fetch("/api/12")
    .then(function(res){
        res.text().then(function(text){
            console.log(text)
        });
    });

带请求参数的fetch

fetch可以接受第二个参数，是一个配置对象，可以对请求进行设置。可选的参数：

• method:请求使用的方法，如GET、POST
• headers:请求的头信息
• body:请求的body信息。GET或HEAD方法的请求不能包含body信息
• mode:请求的模式，如cors、no-cors
• credentials:请求的credentials,
• cache:请求的cache模式：default、no-store、reload、no-cache、force-cache、only-if-cached
• redirect:可用的redirect模式：follow(自动重定向)、error(如果产生重定向将自动终止并抛出一个错误)、manual(手动处理重定向)
• referrer:no-refer、client、一个URL

MDN上的一个例子

fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })

默认情况下，fetch请求中不带凭据信息。若要发送带凭据的请求(如cookie)，需要在fetch请求配置对象中设置credentials选项。credentials选项的含义为

• include:任何请求(包含跨域源)都包含凭据
• same-origin:同源请求包含凭据
• omit:请求不包含凭据

fetch上传JSON数据

var data = { a:1 };
fetch(url,{
    method  : "POST",
    body    : JSON.Stringify(data),
    headers : {
      'content-type': 'application/json'
    },
})

fetch上传文件

var formData = new FormData();
var fileField = document.querySelector("input[type='file']");
formData.append("file", fileField.files[0]);
fetch("url",{
    method  : "PUT",
    body    : formData
})

Header

Header对象包含了请求或者响应中的头部信息，并封装了对头部信息的增加、删除、修改、查找操作。

构造一个Header对象：

var myHeader = new Header();

Header对象常用方法：

• append():添加一个值
• delete():删除一个header
• get():获取指定header的第一个值
• getAll():获取指定header的所有值的数组
• has():判断是否有某个header
• entries():以迭代器形式返回Headers对象中所有键值对

// 检查 content type 是否正确
fetch(url).then(function(response) {
  if(response.headers.get("content-type") === "application/json") {
    return response.json().then(function(json) {
      // process your JSON further
    });
  } else {
    console.log("Oops, we haven't got JSON!");
  }
});

Response

fetch中Response对象是fetch一次请求的响应数据。也可以表示其他API操作返回的一个Response对象。

若要自定义一个Response对象：

var myResponse = new Response();

Response对象的常用属性：

• status:响应的状态码
• OK:成功(状态码200~299)或者失败
• statusText:状态信息
• headers:响应的headers对象

Response对象的常用方法：

• arrayBuffer():读取Response对象并返回一个解析为ArrayBuffer格式的promise对象
• blob():读取Response对象并返回一个解析为Blob格式的promise对象
• json():读取Response对象并返回一个解析为JSON格式的promise对象
• text():读取Response对象并返回一个解析为USVString格式的promise对象
• formData():读取Response对象并返回一个解析为FormData格式的promise对象

因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次（在读取之后会设置成已读状态）

var myImage = document.querySelector('.my-image');
fetch('flowers.jpg').then(function(response) {
    return response.blob();
}).then(function(response) {
    var objectURL = URL.createObjectURL(response);
    myImage.src = objectURL;
});

Body

请求和响应中都包含body对象，body可以是ArrayBuffer、ArrayBufferView、Blob/File、String、URLSearchParams、FormData的实例。

要获取body的内容，可以通过以下方法，这些方法都返回一个被解析后的promise对象和数据

• arrayBuffer()

• blob()

  // fetch一张图片并显示
  var myImage = document.querySelector('img');
  var myRequest = new Request('flowers.jpg');
  fetch(myRequest)
    .then(function(response) {
      return response.blob();
    })
    .then(function(myBlob) {
      var objectURL = URL.createObjectURL(myBlob);
      myImage.src = objectURL;
    });

• json()

  response.json()
    .then((data) => {
      console.log(data);
    });

• text()

  response.text().then(function (text) {
      console.log(text);
  });

• formData()