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';
ctx.response.body = "index";
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中配置代理解决跨域
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
- --
导入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:请求使用的方法，如GET、POSTheaders:请求的头信息body:请求的body信息。GET或HEAD方法的请求不能包含body信息mode:请求的模式，如cors、no-corscredentials:请求的credentials,cache:请求的cache模式：default、no-store、reload、no-cache、force-cache、only-if-cachedredirect:可用的redirect模式：follow(自动重定向)、error(如果产生重定向将自动终止并抛出一个错误)、manual(手动处理重定向)referrer:no-refer、client、一个URL
MDN上的一个例子
fetch(url, {
body: JSON.stringify(data),
cache: 'no-cache',
credentials: 'same-origin',
headers: {
'user-agent': 'Mozilla/4.0 MDN Example',
'content-type': 'application/json'
method: 'POST',
mode: 'cors',
redirect: 'follow',
referrer: '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():删除一个headerget():获取指定header的第一个值getAll():获取指定header的所有值的数组has():判断是否有某个headerentries():以迭代器形式返回Headers对象中所有键值对
fetch(url).then(function(response) {
if(response.headers.get("content-type") === "application/json") {
return response.json().then(function(json) {
} 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可以是ArrayBuffer、ArrayBufferView、Blob/File、String、URLSearchParams、FormData的实例。
要获取body的内容，可以通过以下方法，这些方法都返回一个被解析后的promise对象和数据
arrayBuffer()
blob()
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()
Koa mock数据和使用fetch获取数据Koa官网MDN上关于fetch的解释使用Koa 前端开发中，在后端接口未完成的情况下如何获取数据？可以采用Mock数据的方式，按照后端提供的接口格式临时生成数据。安装Koanpm install koa koa-body koa-router --save-dev使用Koaconst Koa =...
代理客户端去请求服务器，隐藏了真实客户端，服务器并不知道真实的客户端是谁。
反向代理隐藏了真正的服务端，就像你每天使用百度的时候，只知道敲打www.baidu.com就可以打开百度搜索页面，但背后成千上万台百度服务器具体是哪一台为我们服务的，我们并不知道。我们只知道这个代理服务器，它会把我们的请求转发到真实为我们服务的那台服务器那里去。
接口代理的简单实...
Fetch API 提供了一个 JavaScript 接口，用于访问和操纵 HTTP 管道的一些具体部分，例如请求和响应。
它还提供了一个全局 fetch() 方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。
这种功能以前是使用 XMLHttpRequest 实现的。
koa开发后台时，前端用fetch发送http请求。在上传文件的时候，后台始终读取不到文件，经过笔者几个小时的采坑，终于解决，此贴用来记录一下，以防之后再碰到类似的问题。
首先，上代码：
服务器端：
接下来是 koa-router 里处理文件上传的代码：
在这里需要注意，在用koa-body 的时候要配置成下面这样：
下面是前端代码：
切记：请求的 header 不要...
ES6中fetch大有取代ajax的现象，fetch一般用法为fetch(url，option).then().catch();
我们使用post方式传参时，一般在option中希望直接传json形式，可是后台node无法接收到数据；代码如下：//前台代码
fetch(url , {
method: 'POST',
headers: {},
body:obj, //obj
/* 代理配置 start */
const proxy = require('koa2-proxy-middleware'); //引入代理模块
const proxyOptions = {
在阅读本文前请先确保已安装好node.js(点击此处下载node.js)配置好环境变量相关(点击此处跳转安装配置教程)，本文编辑器为vscode(点击此处下载vscode)IDE可根据个人喜好使用，那么下载好运行环境和编辑的IDE之后，就开始了。
node.j + koa2爬虫需要中间件列表
cheerio: 爬虫数据抓取的中间件
superagent-charset： 解决爬虫数据中文乱码问...
最近老师布置了个作业，要我们用爬虫爬取新闻并展示出来，因为我不会Python，网上查阅资料发现nodejs做的爬虫也不差，所以就用自己顺手的js来写一个乞丐版的爬虫吧...，我打算爬一下隔壁学校的新闻网页作为案例，网站地址为：http://www.dgut.edu.cn/dgut/ggyw/news_list.shtml
1.在本机上运行nodejs需要安装nodejs环...
将mock和koa的配置文件单独存放在一个文件夹中，例如`server`文件夹，然后使用webpack的`devServer`配置项将请求代理到`server`文件夹中的koa服务器。
具体步骤如下：
1. 在项目根目录下创建`server`文件夹，并在其中创建`index.js`文件作为koa服务器的入口文件。
2. 在`index.js`中编写koa的配置代码，并将其暴露出来。
3. 在vue项目的`webpack.config.js`文件中的`devServer`配置项中添加如下代码：
```javascript
devServer: {
before: require('./server'),
proxy: {
'/api': 'http://localhost:3000'
其中`before`配置项将koa服务器的配置文件作为参数传递给devServer，`proxy`配置项将请求代理到koa服务器的`http://localhost:3000`端口。
4. 在vue项目中发送请求时，将请求的URL改为`/api/xxx`的形式即可。
这样，mock和koa的配置文件就与vue项目分离开来了。
