zoukankan      html  css  js  c++  java
  • vue-cli 配置项以及请求的封装

     在 vue.config.js中

    配置路径缩写

      const path = require('path')
      const resolve = dir => path.join(__dirname, dir)
    chainWebpack: config => {
      config.resolve.alias
        .set('@views', resolve('src/views'))
        .set('@styles', resolve('src/styles'))
        .set('@comp', resolve('src/components'))
        .set('@config', resolve('src/config'))
        .set('@request', resolve('src/common/libs/request'))
    }

    配置代理

    devServer: {
      open: true,
      host: 'localhost',
      proxy: {
        '/api': {
          target: 'http://test-api-health.yibung.com',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }

    封装请求--这里用的是 axios

    import axios from 'axios'
    import envConfig from '@/common/env.config.js'
    import store from '@/store'
    import router from '@/router/router.js'
    
    // 设置请求参数,并判断是否存在token
    const hasTokenHandler = () => {
      // 获取token
      let AUTH_TOKEN = store.state.userInfo ? store.state.userInfo.token : null
      // 如果在 store 里面没找到,再尝试从 localStorage 中获取
      if ((!AUTH_TOKEN || AUTH_TOKEN === '') && localStorage.getItem('familyHealth')) {
        let familyHealth = JSON.parse(localStorage.getItem('familyHealth'))
        let token = familyHealth.token
        AUTH_TOKEN = token
      }
      axios.defaults.baseURL = envConfig.ajaxBaseUrl
      axios.defaults.headers['Authorization'] = AUTH_TOKEN
      axios.defaults.headers.post['Content-Type'] = 'application/json'
      if (!AUTH_TOKEN) {
        return false
      } else {
        return true
      }
    }
    
    // 根据token进行路由拦截
    const tokenIntercept = () => {
      let hasToken = hasTokenHandler()
      let nowUrl = decodeURIComponent(window.location.href.replace(window.location.origin, ''))
      if (!hasToken && !nowUrl.includes('/login')) {
        router.push('/login?reload=' + nowUrl)
        return false
      } else {
        return true
      }
    }
    
    // response数据处理
    const responseDataHandler = (ret) => {
      // 请求成功
      if (ret && ret.status === 200 && ret.data.code === '0') {
        return ret.data
      } else { // 请求失败
        if (ret.data.code === '001') { // token失效
          let nowUrl = decodeURIComponent(window.location.href.replace(window.location.origin, ''))
          router.push('/login?reload=' + nowUrl)
        } else if (ret && ret.data && ret.data.code) { // 如果有code,说明请求成功到达后台并返回---正常
          return ret.data
        } else { // 没有code,未知错误
          return {
            code: 0,
            data: null,
            msg: '服务器错误'
          }
        }
      }
    }
    
    // 根据不同的method类型,进行相应的 axios 调用
    const methodType = async (type, url, param = {}) => {
      if (!tokenIntercept()) {
        return null
      }
      let params = param
      if (type === 'get' || type === 'delete') params = { params }
      let ret = await axios[type](url, params)
      return responseDataHandler(ret)
    }
    
    const $http = {
      get: (url, params) => methodType('get', url, params),
      post: (url, params) => methodType('post', url, params),
      put: (url, params) => methodType('put', url, params),
      delete: (url, params) => methodType('delete', url, params)
    }
    
    export default $http

    src/common/env.config.js

    // 开发环境
    const dev = {
      NODE_ENV: 'development',
      ajaxBaseUrl: 'http://localhost:8080/api',
      origin: 'http://localhost:8080'
    }
    
    
    const prod = {
        ajaxBaseUrl: 'http://test-api-health.yibung.com'
    };
    
    const result = () => {
      if (process.env.NODE_ENV === 'development') {
        return dev
      }
      return prod;
    }
    
    module.exports = result()
  • 相关阅读:
    形象的理解Strong和Weak
    iOS开发中常见的一些异常
    离屏渲染
    如何从海量IP中提取访问最多的10个IP
    XJOI3363 树3/Codeforces 682C Alyona and the Tree(dfs)
    XJOI 3578 排列交换/AtCoder beginner contest 097D equal (并查集)
    XJOI 3605 考完吃糖(DAG图dfs)
    POJ 3660 Cow Contest(传递闭包)
    XJOI 3601 技能(贪心+二分)
    51nod 1421 最大MOD值(高妙的调和级数复杂度)
  • 原文地址:https://www.cnblogs.com/haishen/p/11210396.html
Copyright © 2011-2022 走看看