在使用 Vue 开发我们的项目时，势必要使用到
router，可能也会使用到vuex，但是我们肯定会使用到axios，对于初学者来说我们基本都是拿过来使用的，直接在main.js中进行导入即可。但是在真正做项目的时候，我们都是需要对axios进行请求封装的，比如我们请求需要携带token，或者我们有多个环境：如测试环境、开发环境等…
这里主要记录一下axios的简单封装。
一、准备阶段
初始化项目
⭐ 安装 Vue 这里就不开展说了,我们重创建一个
Vue项目开始。
Vue create my-project
cd my-project # 进入项目目录
yarn # 安装依赖，也可以使用 npm install
yarn serve # 启动项目
安装 axios
⭐项目创建完成后，我们开始安装
axios。
yarn add axios -S
-D： --save-dev 的简写，模块写入到devDependencies对象。
devDependencies对象，是我们开发的时候需要用到的一些包，只用于开发阶段，真正打包上线的时候并不需要这些包，因为这些工具只是你用来打包代码的 。
-S： --save 的简写，模块写入到dependencies对象。
- 需要发布到生产环境中的，就比如你要跑一个基于
vue的项目，所以需要vue.js来支持，vue.js 文件就需要跟随项目到最终的生产环境。
二、axios 引入
简单引入
⭐ 如上所说，我们安装完
axios可以直接进行使用。
-
在 main.js 中导入 axios
import axios from 'axios' // 全局挂载 Vue.prototype.$axios = axios // 设置默认路由前缀 axios.defaults.baseURL = 'http://localhost:8080' new Vue({ axios, router, store, render: h => h(app) }).$mount('#app') -
在
.vue文件中使用<script> methods:{ Login () { this.$axios({ url:'/login', method: 'post', data:{ userName:'xxxx', password:'xxxx' } }).then((res)=>{ console.log(res) }) } } </script>
三、封装 axios 请求
⭐ 我们不在
main.js中进行引入。
1. 根目录下配置不同环境所需接口基址
-
.env 全局默认配置文件，不论什么环境都会加载合并
-
.env.development 开发环境下的配置文件
-
.env.production 生产环境下的配置文件
-
.env.local 本地开发环境配置
-
命名规则：
-
属性名必须以VUE_APP_开头，比如VUE_APP_XXX
# 本地开发环境配置(.env.local) NODE_ENV=development # base url VUE_APP_API_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_FORM_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_SIGN_OFF_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_LOGIN_BASE_URL=http://xx.xx.xx.xxx:8080/xxx VUE_APP_SSO_BASE_URL=http://xx.xx.xx.xxx:8080/xxx // 測試服client-id # VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx // 本地client-id VUE_APP_SSO_CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx VUE_APP_FILE_SERVER_BASE_URL=http://xx.xx.xx.xxx:8080/xxx
-
2. 封装请求基文件
⭐ 在 src 目录下创建
src/tools/http/request.js
// src/tools/http/request.js
import axios from 'axios'
import {
Message} from 'element-ui' // 引入 Element 组件
export default function request ({
type='COMMOn',data }){
let baseUrl = process.env.VUE_APP_API_BASE_URL // 这是配置的 .env 文件
switch (type) {
case 'COMMON':
baseUrl = process.env.VUE_APP_API_BASE_URL
break;
case 'LOGIN':
baseUrl = process.env.VUE_APP_LOGIN_BASE_URL
break;
case 'FROM':
baseUrl = process.env.VUE_APP_FORM_BASE_URL
break;
default:
break;
}
console.log('baseUrl', process.env)
const service = axios.create({
baseURL: baseUrl,
timeout: 5000
})
// 请求拦截器
service.interceptors.request.use(config => {
//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
config.headers = {
'Content-Type':'application/x-www-form-urlencoded' //配置请求头
}
//注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
if(token){
config.params = {
'token':token} //如果要求携带在参数中
config.headers.token= token; //如果要求携带在请求头中
}
return config
}, error => {
Promise.reject(error)
})
// 响应拦截器
service.interceptors.response.use(response => {
return response
}, error => {
Message.error(error.message)
return Promise.resolve(error.response)
}
return service(data)
}
四、请求数据
1. 创建api文件夹
⭐ 在
src目录下创建api文件夹，放置每个请求模块的方法，以后所有的请求写在这个文件夹下边，比如我们系统有一个角色配置模块。
-
创建
src/api/role-config.js -
// src/api/role-config.js import request from '@/tools/http/request' // 获取角色列表的 api export function getRoleListsApi (data) { // 接口需要的 data 数据 return request ({ data:{ url:'/roleList', method:'post', data } }) }
3. 引入请求 api
-
Role.vue组件进行请求数据<script> import { getRoleListsApi } from '@/api/role-config.js' export default { name: 'Role', data (){ return { roleList: [] // 存储需要渲染的数据 } }, methods:{ // 获取角色列表 async getRoleList () { const obj = { roleid:'普通会员' } const { roleList, code } = await getRoleListsApi(obj) if(code === 200){ this.roleList = roleList } } } } </script>
五、启动项目
⭐ 在开发环境下启动项目
1. 配置 package.json
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"local": "vue-cli-service build --mode local", // 新加的
},
2. 打开命令行
yarn local # 运行项目
总结
拖了有三天了，今天终于把这一块梳理清楚了，我承认自己懒了，这几天工作上相对比较忙，可能国庆回来会好一点吧！今天通过对
axios请求简单的封装，让我对模块化有了一个新的认识，最有我想说的是，有的时候踏下心来做成一件事情真的很开心，事情可大可小，但完成的过程真的是发自内心的高兴。有些人说自己一定要做大事才能定义一个人的成功，但是每一次付出的小事不正是我们向成功靠近的基石吗。