TypeScript重写axios之项目诞生

项目初始化

我们通过TypeScript library starter来创建一个TS项目，它是一个开源的TypeScript开发基础库的脚手架工具，可以帮助我们快速初始化一个TypeScript项目，我们可以去它的官网进行学习和使用它。

一、使用方式

git clone https://github.com/alexjoverm/typescript-library-starter.git 项目名称

我们在这里初始化项目

# 拉下项目基础模板
git clone https://github.com/alexjoverm/typescript-library-starter.git ts-axios-pro
# 切换到项目目录下
cd ts-axios-pro
# 进行项目install安装相关插件
npm install

二、项目目录

在编写代码之前，我们先来了解下axios的工作流程，如下图所示：

我们大概知道了axios的工作流程，当然如果你把源码看了，并且理解那是更好的，接下来我们先来写测试的例子,我们在跟目录下建立一个examples目录，在examples目录下建立一个webpack.config.js配置文件，在编写webpack.config.js文件之前，我们先安装几个插件：

npm install express -D 安装express框架，编写服务端代码
npm install body-parser -D 解决post请求
npm install webpack@4.17 webpack-cli@3 webpack-dev-server -D 安装webpack
npm install ts-loader@5 tslint-loader -D一个是解析以.ts结尾的文件，一个ts的eslint

npm install express -D
npm install body-parser -D
npm install webpack@4.17 webpack-cli@3 webpack-dev-server -D 
npm install ts-loader@5 tslint-loader -D

安装成功后，对examples/webpack.config.js进行配置

# webpack.config.js

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    /**
     * 我们会在 examples 目录下建多个子目录
     * 我们会把不同章节的 demo 放到不同的子目录中
     * 每个子目录的下会创建一个 app.ts
     * app.ts 作为 webpack 构建的入口文件
     * entries 收集了多目录个入口文件，并且每个入口还引入了一个用于热更新的文件
     * entries 是一个对象，key 为目录名
     */
    entry: fs.readdirSync(__dirname).reduce((entries, dir) => {
        const fullDir = path.join(__dirname, dir);
        const entry = path.join(fullDir, "app.ts");
        if (fs.statSync(fullDir).isDirectory() && fs.existsSync(entry)) {
        entries[dir] = entry;
        }
        return entries;
    }, {}),
    /**
     * 根据不同的目录名称，打包生成目标 js，名称和目录名一致
    */
    output: {
        path: path.join(__dirname, "__build__"),
        filename: "[name].js",
        publicPath: "/__build__/"
    },
    resolve: {
        extensions: [".ts", ".tsx", ".js"]
    },
    module: {
        rules: [
          {
            test: /.ts$/,
            enforce: "pre",
            use: "tslint-loader",
            exclude: /node_modules/
          },
          {
            test: /.tsx?$/,
            use: "ts-loader",
            exclude: /node_modules/
          }
        ]
    },
    devServer: {
        noInfo: true,
        overlay: true,
        open: true,
        proxy: {
          // 配置跨域
          "/api/": {
            target: "http://localhost:3000",
            ws: true,
            changOrigin: true
          }
        }
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoEmitOnErrorsPlugin()
    ]
}

服务端代码

在根目录下建立server文件夹，在server文件下建立server.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const router = express.Router();

// 使用body-parser中间件
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());


router.get('/api/base/get', (req, res) => {
    res.json({
        msg: 'hello world'
    })
})

app.use(router)

const port = process.env.PORT || 3000;
module.exports = app.listen(port, () => {
    console.log(`Server listening on http://localhost:${port}, Ctrl+C to stop`)
})

在examples下建立第一个例子：我们取名为base，它是一个文件夹，它里面包含index.html和app.ts

# app.ts
import axios from '../../src/axios'
axios({
    method: "get",
    url: "/api/base/get",
    params: {
      a: 1,
      b: 2
    }
})

# index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Base demo</title>
</head>
<body>
<script src="/__build__/base.js"></script>
</body>
</html>

此时我们在package.json设置相关命令：

// 在scripts里面加入两行命令
"scripts":{
  "server": "node server/server.js",
  "dev": "webpack-dev-server --config './examples/webpack.config.js' --hot"
}

我们执行npm run dev可以让demo跑起来，同时让服务端启动npm run server访问http://localhost:8080/,这样一个小的demo就成功了，下一篇文档我们开始编写axios的源码了。。