使用fetch代替ajax傳送資料實踐（node+webpack）--whatwg-fetch

阿新 • • 發佈：2019-01-11

安裝whatwg-fetch(和ajax一樣，新的獲取資料方式,支援promise語法)獲取資料。安裝方法：

npm install whatwg-fetch --save; 
or
bower install fetch.

匯入依賴。注意這裡的匯入只能使用**import 'whatwg-fetch';**接著是傳送xhr請求的程式碼，我們將其封裝成一個方法，如下

function myFetch(Url){
    fetch(Url)
        .then(function(response) {
            console.log(response);
            return 
 response.text();
        })
        .then((data) => {
            console.log(data);
        }).catch(e=>{console.log(e);})
}

解釋下：以上方法接收一個url請求地址，請求後返回一個response文字。打印出來如下：

可見這個物件有一些自己的方法如OK、status等還有些原型方法如text()等。這裡我們將text()的內容返回。
3. 接著將其暴露出去，給其他js檔案引用。module.exports = myFetch;
4. 定義另一個index.js檔案，程式碼如下：

import myFetch from './index6'
myFetch("http://localhost:3000/users");

解釋：從之前的檔案匯出myfetch方法並呼叫。其中from後面跟的是之前的js所在相對路徑。
這個方法訪問的是監聽在3000埠的一個服務端程式。這裡我們直接使用node搭建一個建議的web伺服器。
5. 搭建過程如下：
隨便拷貝一個node伺服器最小化模版

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon' 
);
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var index = require('./routes/index');
var users = require('./routes/users');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;

以上程式碼主要設計express的相關知識，大家可看這篇文章。
最關鍵的部分：app.use('/', index);app.use('/users', users);這裡就定義了，當訪問的路徑為hostname+/的時候交給index處理，當然訪問hostname+/users的時候交給users處理。這裡的我們只關注後一個路徑。交給users處理也就是交給users.js處理。
我們看下users.js內容：

var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});
module.exports = router;

解釋：引入express的路由模組，並設定當請求的子域名是/的時候就response一個文字。這裡的/和app.use(‘/users’, users);一起構成了一個完整的請求。例如，如果這裡寫/a,則這個請求為/users/a的時候才會觸發這個路由規則。
6. 之前只是定義了路由規則，接下來引用這個app規則並啟動，程式碼如下：

#!/usr/bin/env node
var app = require('../app');
var debug = require('debug')('react-demos:server');
var http = require('http');
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
var server = http.createServer(app);
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
function normalizePort(val) {
  var port = parseInt(val, 10);
  if (isNaN(port)) {
    // named pipe
    return val;
  }
  if (port >= 0) {
    // port number
    return port;
  }
  return false;
}
function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }
  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;
  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}
function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

這裡引入了app，並且設定監聽在3000埠，也就是我們需要提供資料的埠。
7. 接下來啟動node，將上面的程式碼放到start.js中然後輸入node start.js啟動node
8. 然後，寫一個html並引入剛剛的js檔案，我們使用webpack打包。html檔案內容如下：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
</head>
<body>
<div id="example"></div>
<script src="./bundle.js"></script>
</body>
</html>

這裡引用的是bundle.js這是打包後的js檔案，可以自定義。
9. 我們看打包的配置檔案，配置如下：

module.exports = {
    entry: ['./index.js'],
    output: {
        filename: 'bundle.js',
        path: './'
    }
};

解釋：將絕對路徑下的index.js打包成當前路徑下的bundle.js然後html就可以引用了。
10. 打包命令(最好使用本專案內的webpack來打包並指定配置檔案)

 ../../node_modules/.bin/webpack --config webpack.config.js

訪問，點選webstorm上的瀏覽器按鈕，直接訪問。此時會報錯，已攔截跨源請求：同源策略禁止讀取位於 http://localhost:3000/users 的遠端資源。（原因：CORS 頭缺少 ‘Access-Control-Allow-Origin’）。這是因為，訪問的網址和fetch請求資源的網址跨域了，跨域可見這篇文章
解決跨域，node伺服器端配置下允許訪問的欄位。程式碼如下：

app.all('*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:63343");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  res.header("Access-Control-Allow-Credentials", "true");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  res.header("X-Powered-By",' 3.2.1');
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

原理：我們看下/users訪問的請求頭
可見origin欄位（用來說明，本次請求來自哪個源（協議 + 域名 + 埠），來源於localhost:63343也就是webstorm自帶的web伺服器的埠。Host表示發起當前請求的域名 + 埠。可見這兩個不一致，所以跨域產生。我們要做的就是，告訴伺服器，這個域名是可以被接收的，也就是允許localhost:63343跨域請求，所以才會有以上的配置。
接著看下響應頭
可以看到，node伺服器返回了我們剛剛配置的響應Access-Control-Allow-Origin，瀏覽器接收到這個響應，就會正常處理，否則進入error處理。

最後正常的結果就是，控制檯列印瞭如下內容：

Response { type: "cors", url: "http://localhost:3000/users", redirected: false, status: 200, ok: true, statusText: "OK", headers: Headers, bodyUsed: false }  bundle.js:7855:10


----------


respond with a resource

以上就是，整個從安裝fetch到使用fetch到使用node搭建伺服器到解決fetch跨域問題的流程，下一篇，我們繼續研究fetch-jsonp，敬請期待。

使用fetch代替ajax傳送資料實踐（node+webpack）--whatwg-fetch

使用fetch代替ajax傳送資料實踐（node+webpack）--whatwg-fetch

使用ajax傳送post請求（切換圖片）

JavaWeb筆記-23-AJAX非同步互動，ajax傳送非同步請求（四步操作）

ElasticSearch最佳入門實踐（四十三）mapping 的核心資料型別以及 dynamic mapping

django_forms元件__作業之用ajax傳送資料驗證註冊

超越Spark，大資料叢集計算的生產實踐（內含福利）

XHR Fetch 箭頭函式 fetch代替ajax

django-Ajax傳送POST請求（csrf跨站請求的三種方式），檔案的上傳

python資料探勘與入門實踐（2.2）用sciket-learn估計器分類

jQuery——通過Ajax傳送資料

python資料探勘與入門實踐（2.1）用sciket-learn估計器分類

Node專案的Gitlab自動部署實踐（基於Docker）

AJAX:如何編寫一個關於AJAX的Hello World?(ajax傳送非同步請求（四步操作）)

高德SD地圖資料生產自動化技術的路線與實踐（道路篇）

Hive 整合 Hudi 實踐（含程式碼）| 可能是全網最詳細的資料湖系列

Elasticsearch從0到千萬級資料查詢實踐（非轉載）

spring-oauth-server實踐（1-5）為客戶mobile-client開通授權碼模式申請access_token，並使用access_token訪問需要鑒權的業務

數字圖像處理原理與實踐（MATLAB版）勘誤表

css最佳實踐（reset.css）

移動端通過ajax上傳圖片（文件）並在前臺展示——通過H5的FormData對象

使用fetch代替ajax傳送資料實踐（node+webpack）--whatwg-fetch

相關推薦