Fetch的用法以及数据Mock

fetch是一种可代替 ajax 获取/提交数据的技术，有些高级浏览器已经可以window.fetch使用了。相比于使用 jQuery.ajax 它轻量（只做这一件事），而且它原生支持 promise ，更加符合现在编程习惯。

安装

npm install whatwg-fetch --save，即可安装，为了兼容老版本的浏览器，还需要安装npm install es6-promise --save

fetch的用法

fetch(url,init).then(function(response) {  } )

参数:
url代表要获取的资源，可能值是一个url或者一个Request对象

init: 可选，是一个对象，参数有

• method: 请求使用的方法get或者post

• headers: 请求头信息，是一个对象

     headers: {
            "Content-Type": "application/json"
              },

• body: 请求的 body 信息：可能是一个 Blob、BufferSource、FormData、URLSearchParams 或者 USVString 对象。注意 GET 或 HEAD 方法的请求不能包含 body 信息。

• mode: 请求的模式，如 cors、 no-cors 或者 same-origin,默认为no-cors,该模式允许来自 CDN 的脚本、其他域的图片和其他一些跨域资源，但是首先有个前提条件，就是请求的 method 只能是HEAD、GET 或 POST。此外，如果 ServiceWorkers 拦截了这些请求，它不能随意添加或者修改除这些之外 Header 属性。第三，JS 不能访问 Response 对象中的任何属性，这确保了跨域时 ServiceWorkers 的安全和隐私信息泄漏问题。cors模式允许跨域请求,same-origin模式对于跨域的请求，将返回一个 error，这样确保所有的请求遵守同源策略。

• credentials: ‘include’ //表示跨域是可以带cookie的(fetch跨域请求默认不会带cookie,需手动指定这个参数)

• cache: 请求的 cache 模式: default, no-store, reload, no-cache, force-cache, or only-if-cached.

返回值：一个 Promise，resolve 时回传 Response 对象。

get的基本使用

首先引入依赖的插件

import 'whatwg-fetch' 
import 'es6-promise'

var result = fetch('/api/1', { 
    credentials: 'include', 
    headers: { 
        'Accept': 'application/json, text/plain, */*'
     } 
});

fetch( )方法请求数据，返回的是一个promise对象，下来就可以使用promise的语法结构

result.then(res=>{
    return res.text()
}).then(text=>{
    console.log(text)
})

result.then(res=>{
    return res.json()
}).then(json=>{
    console.log(json)
})

注意，以上两个用法中，只有res.text( )和res.json( )是不一样的，这两个方法就是将返回的Response 数据转换成 字符串 或者 json格式

post的基本使用

import 'whatwg-fetch' 
import 'es6-promise'

var result = fetch(url,{
    method:'post',
    credentials: 'include',
    headers:{
        'Accept': 'application/json, text/plain, */*', 
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: "a=100&b=200"
})

fetch 提交数据之后，返回的结果也是一个promise对象，跟get方法一样，所以处理方式也一样

抽象post和get

如果每次获取数据，都会像上面一样写好多代码，太冗余了。我们可以将get和post分为两个方法抽象出来，分为两个js文件

get.js

import "whatwg-fetch"
import "es6-promise"

export function get(url){
    var result = fetch(url,{
        credentials:"include",
        headers:{
            'Accept':'application/json,text/plain,*/*'
        }
    });

    return result;
}

post.js

import "whatwg-fetch"
import "es6-promise"

// 将对象拼接成 key1=val1&key2=val2&key3=val3 的字符串形式

function obj2params(obj){
    var result = "";
    var item;
    for(item in obj){
        result += '&'+ item + '=' + encodeURIComponent(obj[item]);
    }

    //因为result第一个参数是 & 所以需要去掉
    if(result){
        result = result.slice(1);
    }

    return result;
}


// 发送  请求
export function post(url,paramsObj){
    var result = fetch(url,{
        method:'POST',
        credentials:'include',
        headers:{
            'Accept':'appliaction/json,text/plain,*/*',
            'Content-Type':'application/x-www-form-urlencoded'
        },
        body:obj2params(paramsObj)
    });

    return result;
}

需要注意的是，在post.js中，将参数做了处理，因为上面的代码中提到，body: “a=100&b=200”这种参数格式是有要求的，而我们平时在js中，最多用到的就是JSON格式的数据，因此需要转一下

这两个方法抽象出来，在从其他组件中调用就变的很简单了

数据Mock

安装，我们使用的是koa来做后端接口的模拟，因此需要安装koa以及相关的插件npm install koa koa-body koa-router --save-dev，注意这里使用–save-dev，意思是我们只在开发过程中使用 koa ，项目发布之后 koa 就没用了。因为发布之后的项目，使用的就是后端工程师开发的线上的接口，而不是我们基于 koa 写的接口。

模拟动态接口

即自己用一个 web 框架，按照既定的接口和数据结构的要求，自己模拟后端接口的功能，让前端项目能顺利跑起来。该方式适用于新开发的项目，后端和前端同时开发。

我们将模拟接口的代码写在./mock目录下，接口文件是./mock/server.js(开发真正的项目时，会分成多个不同的模块)

注意：在package.json中需要增加如下代码，然后npm run mock即可启动模拟的接口服务

"scripts": { "mock": "node --harmony ./mock/server.js", },

使用webpack-dev-server的代理

koa 接口的端口是3000，而我们项目的接口是8080，这样不就跨域了吗？————如果默认情况下，肯定是跨域了。此时就需要 webpack-dev-server 做一个代理的转发。配置代码在./webpack.config.js中

devServer: {
        proxy: {
          // 凡是 `/api` 开头的 http 请求，都会被代理到 localhost:3000 上，由 koa 提供 mock 数据。
          // koa 代码在 ./mock 目录中，启动命令为 npm run mock
          '/api': {
            target: 'http://localhost:3000',
            secure: false
          }
        },
        contentBase: "./public", //本地服务器所加载的页面所在的目录
        colors: true, //终端中输出结果为彩色
        historyApiFallback: true, //不跳转
        inline: true, //实时刷新
        hot: true  // 使用热加载插件 HotModuleReplacementPlugin
    }