乐趣区

关于前端:vue30二次封装axios配置本地代理

jiezi

vue3.0 新建我的项目二次封装 axios，配置本地代理。

1、在 src 文件夹中创立 http 文件夹并新建 http.js 和 api.js，并在更目录创立 vue.config.js 文件

2、配置 http.js 文件

如果没有装置 axios，首先装置 axios

cnpm install axios -S
// 一、配置 axios
import axios from 'axios'
// import store from '@/store/index' 如果应用 vuex，那么 token，userinfo 都能够在登录当前存储到 store 中，不须要应用 storage
// 获取浏览器的接口地址。let baseUrl = window.location.origin
// axios 配置
axios.defaults.baseURL = baseUrl
// 设置申请最大时长
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
// 申请拦截器
axios.interceptors.request.use(config => {if (localStorage && localStorage.getItem('token')) {const token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
  }
  return config
}, error => {
  // 能够装置 elementui 等 ui 组件，将错误信息输入到界面。console.log(error)
  return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {if (response.status === 200) {
    // 993 登录过期
    if (response.data.code !== '993') {return Promise.resolve(response)
    } else {console.log('登录过期')
      // store.commit('clearUserInfo')  // 应用 vuex 存储过用户信息，这里须要清空一下。window.location.href = '/#/login'
    }
  } else {return Promise.reject(response)
  }
})

// 2、封装申请形式
// @param url 接口地址
// @param data 携带参数
// @param file 上传文件对象
// @param auth 是否携带 token
// get 申请
export function get (url, data, auth=true) {if (auth) {return axios.get(url, data, { headers: {Authorization: localStorage.getItem('token')}})
  } else {return axios.get(url)
  }
}
// post 申请
export function post (url, data, auth=true) {if (auth) {return axios.post(url, data, {header: {Authorization: localStorage.getItem('token')}})
  } else {return axios.post(url, data)
  }
}
// put 申请
export function put (url, data, auth=true) {if (auth) {return axios.put(url, data, {header: {Authorization: localStorage.getItem('token')}})
  } else {return axios.put(url, data)
  }
}
// delete 申请
export function del (url, data, auth=true) {if (auth) {return axios.delete(url, data, { headers: {Authorization: localStorage.getItem('token')}})
  } else {return axios.delete(url)
  }
}
// upload 申请
export function uploader (url, file, auth=true) {let params = new FormData()
  params.append('file', file)
  if (auth) {return axios.post(url, params, {header: {Authorization: localStorage.getItem('token')}})
  } else {return axios.post(url, params)
  }
}

3、配置 api.js 文件 

// 封装后盾接口办法
import {get, post, put, del, uploader} from './http'
export const LOGIN = (params) => get('service-core/wechat/serviceAccount/qrCode/create', params, false)
export const REGISTER = (params) => put('service-core/user_register', params, false)
export const USER_LIST = (params) => post('service-core/user_list', params)
export const USER_LIST_ID = (params) => get(`service-core/user_list/${params.id}`)
export const UPLOAD_USER_CARD = (params) => uploader('service-core/user_upload_card', params)
export const DELETE_BOOK = (params) => del(`service-core/book_list/${params.id}`)

4、在组件中应用接口 

import {LOGIN} from '../http/api'
export default {
  name: 'HelloWorld',
  props: {msg: String},
  setup () {onMounted (() => {LOGIN({username: 'zhangxuchao', password: '123456'}).then(res => {console.lo(res)
      })
    })
  }
}

5、配置代理 vue.config.js

module.exports = {
  // 根本门路
  publicPath: './',
  // build 后默认门路
  baseUrl: './',
  // 构建时的输入目录
  outputDir: 'dist',
  // 搁置动态资源的目录
  assetsDir: 'static',
  // html 的输入门路
  indexPath: 'index.html',
  // 文件名哈希
  filenameHashing: true,
  // 是否在保留的时候应用 `eslint-loader` 进行查看。lintOnSave: true,
  // 是否应用带有浏览器内编译器的残缺构建版本
  runtimeCompiler: false,
  // babel-loader 默认会跳过 node_modules 依赖。transpileDependencies: [/* string or regex */],
  // 是否为生产环境构建生成 source map？productionSourceMap: false,
  // 设置生成的 HTML 中 <link rel='stylesheet'> 和 <script> 标签的 crossorigin 属性。crossorigin: '',
  // 在生成的 HTML 中的 <link rel='stylesheet'> 和 <script> 标签上启用 Subresource Integrity (SRI)。integrity: false,
  // 调整外部的 webpack 配置
  configureWebpack: () => {}, //(Object | Function)
  chainWebpack: () => {},
  // 配置 webpack-dev-server 行为。devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: true,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md# 配置代理
    proxy: {
      // 接口地址代理
      '/service-core': {
        target: 'https://www.zhangxuchao.com', // 接口的域名
        secure: false, // 如果是 https 接口，须要配置这个参数
        changeOrigin: true, // 如果接口跨域，须要进行这个参数配置
        pathRewrite: {"^/service-core": "service-core"}
      },
      // 微信二维码登录
      "/wechat": {
        target: "https://www.eastgrain.cn/service-core",
        secure: false,
        changeOrigin: true,
        pathRewrite: {"^/wechat": ""}
      }
    }
  },
  // 三方插件的选项
  pluginOptions: {// ...}
}
退出移动版