从零搭建React框架--第四章网络请求axios、http-proxy-middleware、mockjs

目录

引言
第一章：项目创建、antd、less
第二章：路由拦截、路由嵌套
第三章：状态管理 Redux
第四章：网络请求、代理、mockjs
第五章：webpack配置
第六章：Eslint

源码地址

https://github.com/dxn920128/cms-base

安装axios

npm install -S -D axios qs @types/qs

• axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
• qs

创建axios对象

const service = axios.create({
  timeout: 2 * 60 * 1000,// 请求超时时间
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/x-www-form-urlencoded'
  }
})

request拦截器，为每一条网络请求添加token等多种请求参数。

service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    if (config.params) {
      for (const item in config.params) {
        if (item === null) {
          delete config.params[item]
        }
      }
    }
    if (config && config.headers) {
      const token = getToken()
      if (token) {
        config.headers['X-KT-Login-Token'] = token
      }
    }
    return config
  },
  (error: AxiosError) => {
    return Promise.reject(error)
  }
)

response拦截器，对请求异常、登录过期、无权限等状态进行管理。

service.interceptors.response.use(
  (response: AxiosResponse>) => {
    const res = response.data
    switch (res.code) {
      case 0://正常数据
        return response
      case 10104://登录超时
        store.dispatch(logout())
        window.location.href = `${window.location.origin}`
        return Promise.reject(res.message)
    }
    message.error(response.data.message)
    return Promise.reject(new Error(response.data.message))
  },
  (error) => {
    return Promise.reject(error)
  }
)

请求代理

devServer: {
    proxy: {
      '/cmsapi': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/cmsapi': ''
        }
      }
    }
}

配置mockjs数据

npm install -D mocker-api mockjs cross-env

• mocker-api 为REST API创建模拟请求，在开发过程中方便调试。
• mockjs 生成模拟数据
• cross-env 跨平台设置环境变量

devServer: {
    //如果使用mocker-api库
    before (app) {
      if (process.env.MOCKER_ENV) {
        apiMocker(app, path.resolve('./mocker/index.js'), {})
      }
    }
  },

在package.json中配置mocker启动命令

    "start:mocker": "cross-env port=4000 cross-env MOCKER_ENV=true craco start",

启动项.png

craco全部配置

const path = require('path')
const CracoLessPlugin = require('craco-less')
const apiMocker = require('mocker-api')//使用mocker-api库
module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,//引入less
      options: {
        lessLoaderOptions: {
          lessOptions: {
            javascriptEnabled: true //js修改主题样式
          }
        }
      }
    }
  ],
  babel: {
    plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }], //装饰器
      [
        'import',//按需引入antd 样式
        {
          'libraryName': 'antd',
          'libraryDirectory': 'es',
          'style': true
        }
      ]
    ]
  },
  devServer: {
    proxy: {
      '/cmsapi': {
        target: '',
        changeOrigin: true,
        pathRewrite: {
          '^/cmsapi': ''
        }
      }
    },
    //如果使用mocker-api库
    before (app) {
      if (process.env.MOCKER_ENV) {
        apiMocker(app, path.resolve('./mocker/index.js'), {})
      }
    }
  },
};