vue3接口封装

request.js

 

import axios from 'axios' //引入
// import { getToken } from '@/utils/token'
// import { Toast } from 'vant';

//此处根据跨域配置

 

let baseURL = '/api'

//这一步的目的是判断出当前是开发环境还是生成环境，方法不止一种，达到目的就行
// if(process.env.NODE_ENV=="development"){
// baseURL=''
// }else{
// baseURL=''
// }

let config = {
baseURL: baseURL,
timeout: 30000 //设置最大请求时间
}
const _axios = axios.create(config)

/* 请求拦截器（请求之前的操作） */
// _axios.interceptors.request.use(
// config => {
// //如果有需要在这里开启请求时的loading动画效果
// config.headers.Authorization = getToken; //添加token,需要结合自己的实际情况添加，
// return config;
// },
// err => Promise.reject(err)
// );

/* 请求之后的操作 */
// _axios.interceptors.response.use(
// res => {
// //在这里关闭请求时的loading动画效果
// //这里用于处理返回的结果，比如如果是返回401无权限，可能会是跳回到登录页的操作，结合自己的业务逻辑写
// if (res.data.code === 401 ) {
// Toast("无权限操作")
// }
// if (res.data.code === 400 ) {
// Toast("请求网络失败")
// }
// if (res.data.code === 404 ) {
// Toast("请求网络失败")
// }
// return res;
// },
// err => {
// if (err) {
// //在这里关闭请求时的loading动画效果
// Toast("请求网络失败")
// }
// return Promise.reject(err);
// }
// );

//封装post,get方法
const http = {
get(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'GET'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
},
post(url='',params={}){
return new Promise((resolve, reject) => {
_axios({
url,
data:params,
headers:{'Content-Type': 'application/json;charset=UTF-8'},
method: 'POST'
}).then(res => {
resolve(res.data)
return res
}).catch(error => {
reject(error)
})
})
}
}

export default http

 

api.js

//引入刚才的http.js文件
import https from './request.js';

let apiFun = {};
//注册
apiFun.register = function(params) {
return https.get('index/register', params)
}
//登录
apiFun.login = function(params) {
return https.get('index/login', params)
}

//暴露出这个对象
export default apiFun;

 

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: 'static',
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
//以上的ip和端口是我们本机的;下面为需要跨域的
proxy: {//配置跨域
'/api': {
target: '服务器地址/api',//这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/api': ''//请求的时候使用这个api就可以
}
}

}
},
pluginOptions:{
'style-resources-loader':{
preProcessor:'scss',
patterns:[]
}
}
}