feat: http-interceptor

Weibozzz · Oct 15, 2019 · 0acd1db · 0acd1db
1 parent fc932fb
commit 0acd1db
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 46 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,7 +1,6 @@
 .DS_Store
 npm-debug.log*
 node_modules
-dist
 # webstorm
 .idea
 

diff --git a/README.md b/README.md
@@ -3,6 +3,23 @@
 
 ## Usage
 
+```bash
+npm install
+npm run build
+```
+
+### CommonJS usage
+
+```js
+const axios = require('./dist/index.js');
+
+```
+### Browser
+
+```js
+<script src="./dist/index.js"></script>
+```
+
 ```js
 const axios = new Axios({
       // defaults 公共请求参数可选
@@ -44,6 +61,10 @@ axios.interceptors.response.use(function (response) {
 
 ## Example
 
+```bash
+npm start
+```
+
 ```js
 const axios = new Axios({
     defaults: {

diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+</head>
+<body>
+
+<script type="text/javascript" src="index.js"></script></body>
+</html>
diff --git a/dist/index.js b/dist/index.js
diff --git a/examples/index.html → index.html b/examples/index.html → index.html
@@ -8,7 +8,7 @@
 </body>
 </head>
 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
-<script src="../src/index.js"></script>
+
 <script>
   // 使用
   const axios = new Axios({
@@ -58,4 +58,5 @@
       console.log('err', err)
     })
 </script>
+</body>
 </html>
diff --git a/package.json b/package.json
@@ -4,11 +4,21 @@
   "description": "自定义网络请求拦截器,支持微信小程序拦截,ajax拦截,支付宝小程序等等",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server --open --config webpack.config.js",
+    "build": "webpack --config webpack.config.js"
   },
   "keywords": [],
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "clean-webpack-plugin": "^3.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "webpack": "^4.41.0",
+    "webpack-cli": "^3.3.9",
+    "webpack-dev-server": "^3.8.2"
+  },
+  "dependencies": {
+    "jquery": "^3.4.1"
   }
 }
diff --git a/src/axios.js b/src/axios.js
@@ -0,0 +1,44 @@
+class InterceptorManager {
+  constructor() {
+    this.handlers = []
+  }
+  use(fulfilled, rejected){
+    this.handlers.push({
+      fulfilled: fulfilled,
+      rejected: rejected
+    })
+    return this.handlers.length - 1;
+  }
+  forEach(fn){
+    this.handlers.forEach(param => {
+      if(fn!=null){
+        fn(param)
+      }
+    })
+  }
+}
+class Axios {
+  constructor(defaults) {
+    this.defaults = defaults
+    this.interceptors = {
+      request: new InterceptorManager(),
+      response: new InterceptorManager(),
+    }
+  }
+  request(config){
+    const params = {...config, ...this.defaults.defaults}
+    const chain = [this.defaults.dispatchRequest, undefined]
+    this.interceptors.request.forEach(interceptor => {
+      chain.unshift(interceptor.fulfilled, interceptor.rejected)
+    })
+    this.interceptors.response.forEach(interceptor => {
+      chain.push(interceptor.fulfilled, interceptor.rejected)
+    })
+    let promise = Promise.resolve(params);
+    while (chain.length){
+      promise = promise.then(chain.shift(), chain.shift())
+    }
+    return promise;
+  }
+}
+module.exports = Axios
diff --git a/src/index.js b/src/index.js
@@ -1,43 +1,2 @@
-class InterceptorManager {
-  constructor() {
-    this.handlers = []
-  }
-  use(fulfilled, rejected){
-    this.handlers.push({
-      fulfilled: fulfilled,
-      rejected: rejected
-    })
-    return this.handlers.length - 1;
-  }
-  forEach(fn){
-    this.handlers.forEach(param => {
-      if(fn!=null){
-        fn(param)
-      }
-    })
-  }
-}
-class Axios {
-  constructor(defaults) {
-    this.defaults = defaults
-    this.interceptors = {
-      request: new InterceptorManager(),
-      response: new InterceptorManager(),
-    }
-  }
-  request(config){
-    const params = {...config, ...this.defaults.defaults}
-    const chain = [this.defaults.dispatchRequest, undefined]
-    this.interceptors.request.forEach(interceptor => {
-      chain.unshift(interceptor.fulfilled, interceptor.rejected)
-    })
-    this.interceptors.response.forEach(interceptor => {
-      chain.push(interceptor.fulfilled, interceptor.rejected)
-    })
-    let promise = Promise.resolve(params);
-    while (chain.length){
-      promise = promise.then(chain.shift(), chain.shift())
-    }
-    return promise;
-  }
-}
+const Axios = require('../dist/index');
+module.exports = Axios
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,23 @@
+const path = require('path')
+// const webpack = require('webpack')
+const HtmlWebpackPlugin = require('html-webpack-plugin') // 通过 npm 安装
+const { CleanWebpackPlugin } = require('clean-webpack-plugin')
+module.exports = {
+  entry: {
+    main: './src/index.js',
+  },
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'dist'),
+    library: 'Axios',
+    libraryTarget: 'umd'
+  },
+  plugins: [
+    // new CleanWebpackPlugin({
+    //   cleanAfterEveryBuildPatterns: ['dist']
+    // }),
+    new HtmlWebpackPlugin({
+      template: './index.html'
+    }),
+  ],
+}