Vue项目使用axios对请求方法二次封装
网上对于vue项目中axios请求二次封装的案例真的有很多，有非常好用的，为什么要封装呢？在项目中封装请求有什么好处呢？1、为了适配自己的项目、2、为了减少重复的代码、3、… 一堆优点. 下面就分享一下我这边在项目中是如何根据自己的项目使用axios对请求方法二次封装的。
下面根据这四个步骤给大家一一分享
- 1、根目录创建 config/index.js
- 2、根目录创建 utils/request.js
- 3、main.js文件 挂载request全局方法
- 4、页面调用
step1： 创建 config/index.js 文件 => 全局配置请求url
//获取项目当前的开发环境，根据不同的值适配对应的 API请求地址
const env = import.meta.env.MODE || 'prod'
const EnvConfig = {
dev: {
baseApi: '/',
mockApi: 'https://www.fastmock.site/mock/***/api'
},
test: {
baseApi: '',
mockApi: 'https://www.fastmock.site/mock/***/api'
},
prod: {
baseApi: '',
mockApi: 'https://www.fastmock.site/mock/***/api'
}
}
export default {
env: 'dev',
mock: true,
namespace: 'manager',
...EnvConfig[env]
}
step2: 根目录创建 utils/request.js. => 请求处理都在这里哦
import axios from 'axios'
import config from './../config'
import { ElMessage } from 'element-plus'
import router from './../router'
const TOKEN_INVALID = 'Token认证失败，请重新登陆'
const NETWORK_ERROR = '网络请求异常，请稍后重试'
// 创建axios实例对象，添加全局配置
const service = axios.create({
baseURL: config.baseApi,
timeout: 8000
})
//请求拦截
service.interceptors.request.use((req) => {
// TO-DO
const headers = req.headers
if (!headers.Authorization) {
headers.Authorization = 'Bear Jack'
}
return req
})
//响应拦截
service.interceptors.response.use((res) => {
// TO-DO
const {code, data, msg} = res.data
if(code === 200){
return data
} else if(code === 40001) {
ElMessage.error(TOKEN_INVALID)
setTimeout(() => {
router.push('./login')
}, 1500)
return Promise.reject(TOKEN_INVALID) //抛出异常
} else {
ElMessage.error(msg || NETWORK_ERROR)
return Promise.reject(msg || NETWORK_ERROR) //抛出异常
}
})
/**
* 请求核心函数
* @param {*} options 请求配置
*/
function request(options) {
options.method = options.method || 'get'
// 防止大小写混乱
if(options.method.toLowerCase() === 'get') {
options.params = options.data;
}
// 保证线上的环境不是mock数据，防止意外
if(config.env === 'prod'){
service.defaults.baseURL = config.baseURL
} else {
service.defaults.baseURL = config.mock ? config.mockApi : config.baseApi
}
return service(options)
}
['get', 'post', 'put', 'delete', 'patch'].forEach(item => {
request[item] = (url, data, options) => {
return request({
url,
data,
method: item,
...options
})
}
})
export default request
上面就是所以的请求封装的代码，每一个模块都有注视，大家也可以根据自己的项目文档做不同的调整。
step3: main.js文件 挂载request全局方法
上面两部的任务如果都顺利的完成了，到了最后一步就是把封装好的请求方法挂载到全局。
引入封装好的文件
import request from './utils/request.js'
挂载到全局的方法$request
const app = createApp(App)
app.config.globalProperties.$request = request
app.use(router).use(ElementPlus).mount('#app')
step4: 页面上如何调用
上面的操作如果没有bug，全部顺利那面页面上我们就非常方便的就可以使用了。
this.$request.get('/login', {name: 'jack'}, {mock: true, loading: true}).then(res => {
console.log(res)
})
接下来打开控制台我们就可以看到接口返回的数据了❤️
这个封装大大减少了冗余代码的出现，提高了我们的开发效率，所以项目中框架搭建方法封装非常重要。今天分享到这里了，大家共勉。
关于Vue的学习给大家推荐有关vue3的最新课程吧。
- 1、 《 Vue3+ElementPlus+Koa2 全栈开发后台系统 》 百度网盘
- 2、 《 Vue3 系统入门与项目实战 完整版 》 百度网盘
- 3、 《 Vue3.0+TS打造企业级组件库 前端中高级开发者必修课 》 完整无秘
跟着前辈们学习到的不仅仅是API的使用，更是做项目的思维，方法。加油～
