vue 对axios get pust put delete封装的实例代码

2023-08-03 13:03:04 476

axios.js

importaxiosfrom'axios';
importQsfrom'qs';
import{Message}from'element-ui';


axios.defaults.baseURL="/api";
//设置请求超时时间
axios.defaults.timeout=30000;

//设置post请求头
axios.defaults.headers.post['Content-Type']='application/json;charset=UTF-8';

//请求拦截
axios.interceptors.request.use(config=>{
//在发送请求之前做些什么验证token之类的

returnconfig;
},error=>{
//对请求错误做些什么

Message.error({message:'请求超时!'})
returnPromise.error(error);
})

//响应拦截
axios.interceptors.response.use(response=>{
//对响应数据做点什么

returnresponse;
},error=>{
//对响应错误做点什么

returnPromise.reject(error);
});


//封装get方法和post方法

/**
*get方法，对应get请求
*@param{String}url[请求的url地址]
*@param{Object}params[请求时携带的参数]
*/
exportfunctionget(url,params){
returnnewPromise((resolve,reject)=>{
axios.get(url,{
params:params
}).then(res=>{
resolve(res.data);
//Loading.service(true).close();
//Message({message:'请求成功',type:'success'});
}).catch(err=>{
reject(err.data)
//Loading.service(true).close();
Message({message:'加载失败',type:'error'});
})
});
}

/**
*post方法，对应post请求
*@param{String}url[请求的url地址]
*@param{Object}params[请求时携带的参数]
*/
exportfunctionpost(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,params)
.then(res=>{
resolve(res.data);
//Loading.service(true).close();
//Message({message:'请求成功',type:'success'});
})
.catch(err=>{
reject(err.data)
//Loading.service(true).close();
Message({message:'加载失败',type:'error'});
})
});
}

/**
*post方法，参数序列化
*@param{String}url[请求的url地址]
*@param{Object}params[请求时携带的参数]
*/
exportfunctionqspost(url,params){
returnnewPromise((resolve,reject)=>{
axios.post(url,Qs.stringify(params))
.then(res=>{
resolve(res.data);
//Loading.service(true).close();
//Message({message:'请求成功',type:'success'});
})
.catch(err=>{
reject(err.data)
//Loading.service(true).close();
Message({message:'加载失败',type:'error'});
})
});
}


/**
*put方法，对应put请求
*@param{String}url[请求的url地址]
*@param{Object}params[请求时携带的参数]
*/
exportfunctionput(url,params){
returnnewPromise((resolve,reject)=>{
axios.put(url,params)
.then(res=>{
resolve(res.data);
//Loading.service(true).close();
//Message({message:'请求成功',type:'success'});
})
.catch(err=>{
reject(err.data)
//Loading.service(true).close();
Message({message:'加载失败',type:'error'});
})
});
}


/**
*delete
*@param{String}url[请求的url地址]
*@param{Object}params[请求时携带的参数]
*/
exportfunctiondeletefn(url,params){
returnnewPromise((resolve,reject)=>{
axios.delete(url,params)
.then(res=>{
resolve(res.data);
//Loading.service(true).close();
//Message({message:'请求成功',type:'success'});
})
.catch(err=>{
reject(err.data)
//Loading.service(true).close();
Message({message:'加载失败',type:'error'});
})
});
}

brand.js

import{get,post,qspost,put,deletefn}from'../../utils/axios/axios'



exportconstgetBrandList=data=>post("/item/brand/list",data)

exportconstaddBrand=data=>post("/item/brand",data);

Brand.vue

import{getBrandList,addBrand}from"../../api/item/brand";

以上就是本次介绍的全部相关知识点，感谢大家的学习和对毛票票的支持。

以上就是全部实例代码，感谢大家的学习和对毛票票的支持。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

vue 对axios get pust put delete封装的实例代码

热门推荐

随机推荐