运行命令区分webpack环境，以及axios数据请求的封装

　　在开发环境和线上环境时，由于环境的不同，有时候需要修改一定的代码，可以通过配置webpack环境来减少对代码的修改；另外，有时候去看别人的代码，你可能都找不到他的数据请求在什么位置，最近在做一个vue的项目，写了一个对axios请求数据的封装和大家分享一下。

　　一、运行命令区分webpack环境

　　* 首先我们装一下依赖

 　npm i cross-env -D

　　* 配置项目的package.json文件的scripts

"scripts": {

    "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack.config.js",

    "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"

  }

　　* 配置webpack.config.js的plugins

　　这里需要修改两个部分，定义一个isDev

const isDev = process.env.NODE_ENV =='development'

　　再去配置plugins

plugins: [ // 添加插件 ---- 数组

  new webpack.optimize.UglifyJsPlugin(), // 压缩js文件

  new webpack.DefinePlugin({ // ++++++++++++++++++

    'process.env': {

      NODE_ENV: isDev ? '"development"' : '"production"'

    }

  }),

  new HtmlWebPackPlugin({ // 实例化一个 html 的webpack的插件

    template: 'index.html' // 找的就是当前文件夹下的index.html文件

  })

]

　　二、封装axios

// 1、引入axios模块

import axios from 'axios';

// 2、判断是什么环境 -- 开发环境 -- 生产环境

// 真  ----   开发环境 ---- 反向代理

// 假  ----   生产环境

const isDev = process.env.NODE_ENV === 'development'

// 3、自定义axios

let request = axios.create({

  // 基础的请求地址

  baseURL: isDev ? '/api' : 'http://0.0.0.0' // 后面的时线上的地址，可以改为自己的线上接口地址

})

// 4、使用axios的拦截器  ----  请求的拦截器  +  响应的拦截器

// 添加请求拦截器

request.interceptors.request.use(function (config) {

  // 在发送请求之前做些什么

  // 所有的请求都需要的字段，所有的请求添加loading效果

  // token

  config.headers['token'] = localStorage.getItem('token')

  return config;

});

// 添加响应拦截器

request.interceptors.response.use(function (response) {

  // 对响应数据做点什么

  // 消除请求的loading效果

  return response;

});

// 5、暴露axios模块

export default request;

　　这个时候，我们的axios就封装完毕了，并且把token的验证放在了头信息里，每次请求数据都去验证token。

　　可以再去做一件事，这样我们的代码就会显得有A和C之间的格，别人找不到我们在什么地方请求的数据，去封装请求的接口

// 1、引入自定义的axios

import request from './request';

// 2、封装接口

/**

 * 封装 数据列表的接口

 * pageCode 页面

 * limitNum 每页显示个数

 */

const getProlist = (pageCode, limitNum) => {

  pageCode = pageCode * 1 || 0;

  limitNum = limitNum * 1 || 10;

  // 使用promise解决异步问题

  return new Promise((resolve) => {

    // 因为自定义的axios包含baseUrl,此处只需要写后面的接口即可

    request.get('/pro', { params: { pageCode, limitNum} }).then(res => {

      resolve(res.data)

    })

  })

}

// 3、暴露接口

export {

  getProlist,

  getBannerlist

}

　　这样，我们在组件中需要请求接口都可以写在我们封装的这个文件中，只需要在需要的地方去引入我们封装的接口，然后调用就可以了。

　　以上纯属个人见解，如果有错误的地方，欢迎提出来。

巴特西

运行命令区分webpack环境，以及axios数据请求的封装

最新文章

热门文章