关于封装
按照以前的习惯,在封装axios的post请求时,会用qs插件。然而事实证明技术总是在不知不觉中更新。以下是我请教大牛以后获得的结论。不用再使用qs啦!
// 封装post方法,params-参数 url-地址 isfile-参数是否带文件
export function post(url,params={},isfile=false){
// 参数序列化
let data='';
if(isfile){
data = new FormData();
for(var key in params){
data.append(key,params[key])
}
}else{
data =params
}
return axios.post(url,data)
}
关于配置代理服务器
以前没有配置过太长的服务器,所以有错的第一时间我会想到是不是路径太长了,最终结果却是,我应该配本地路径,然后转发到配置代理中配置的路径。具体代码如下:
配置基本路径模块
// 配置环境变量
let apiurl = null;
if(process.env.NODE_ENV == "development"){
// 开发模式
apiurl = "http://127.0.0.1:8080"
}else{
// 线上环境--不晓得
apiurl = ""
}
export{
apiurl,
};
http.js中配置的模块
//响应拦截器
axios.interceptors.response.use((res)=>{
console.group("响应拦截器",res.config.url);
console.log(res);
console.groupEnd()
if(res.code == 200){
return Promise.resolve(res.data)
}else{
return Promise.reject(res.msg)
}
},(err)=>{
// 响应错误的处理
console.log(err)
return Promise.reject('请检查网络设置')
})
// get方法封装 params-参数 url-地址
export function get(url,params={}){
return axios.get(url,{params})
}
// 封装post方法,params-参数 url-地址 isfile-参数是否带文件
export function post(url,params={},isfile=false){
// 参数序列化
let data='';
if(isfile){
data = new FormData();
for(var key in params){
data.append(key,params[key])
}
}else{
data =params
}
return axios.post(url,data)
}
最重要的配置代理服务器模块它来啦
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
port: 8080,
proxy: {
'/usercenter/v1': {
target: 'http://api.scard.tech',
ws:true,
changeOrigin:true,
secure:false
}
}
}
})
有什么不对还请大家多多指教哈