使用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<Response> fetch(input[, init]);

基本的fetch请求

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

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

带请求参数的fetch

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

  • method:请求使用的方法,如GETPOST
  • headers:请求的头信息
  • body:请求的body信息。GETHEAD方法的请求不能包含body信息
  • mode:请求的模式,如corsno-cors
  • credentials:请求的credentials,
  • cache:请求的cache模式:defaultno-storereloadno-cacheforce-cacheonly-if-cached
  • redirect:可用的redirect模式:follow(自动重定向)、error(如果产生重定向将自动终止并抛出一个错误)、manual(手动处理重定向)
  • referrer:no-referclient、一个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对象:

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可以是ArrayBufferArrayBufferViewBlob/FileStringURLSearchParamsFormData的实例。

要获取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()

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页