vue axios封装 以及302问题

302问题
后端使用的框架自带的登录登出 容易出现302问题
解决登录302问题的方法是前后端包放在一起
出现302问题是后端路径(给前端放权接口路径要配置一下)
后端接受不到参数 要看他们的content-type和接受参数的方法
1、用requestParam 方式接受的要用qs.stringfy序列化一下

var password = md5(this.ruleForm.password).toString().toLowerCase();
var pwd = cryptoJs.SHA1(password).toString();
this.ruleForm.password = pwd;

    requestLogin(**qs.stringify**(this.ruleForm)).then(response =>{

    })

2、用requestBody 方式接受的要用json格式即可
vue axios封装 (需求是只在登录页面设置请求content-type的类型)

//在 request 拦截器实现
axios.interceptors.request.use(
config => {
config.baseURL = remoteUrl;
console.log(“config”,config); //config的格式如下边的
if (config.url.indexOf(‘login’)>0) {
//login单独设置content-type类型
config.headers = {
‘Content-Type’: ‘application/x-www-form-urlencoded’
}
}
return config
},
error => {
return Promise.reject(error)
}
)
//在 response 拦截器实现
axios.interceptors.response.use(
response => {
console.log(‘response’,response)
return response
},
error => {
return Promise.reject(error)
}
)

config
{url: “union/Association”, method: “post”, data: {…}, headers: {…}, transformRequest: Array(1), …}
adapter: ƒ xhrAdapter(config)
baseURL: “http://111.1.1.1:8084/”
data: “{“assoID”:”",“associationName”:“df”,“introduction”:"",“assoDutyMan”:[]}"
headers: {Accept: “application/json, text/plain, /”, Content-Type: “application/json;charset=utf-8”}
maxContentLength: -1
method: “post”
timeout: 0
transformRequest: [ƒ]
transformResponse: Array(1)
0: ƒ transformResponse(data)
length: 1
proto: Array(0)
url: “http://112.35.3.9:8084/union/Association”
validateStatus: ƒ validateStatus(status)
xsrfCookieName: “XSRF-TOKEN”
xsrfHeaderName: “X-XSRF-TOKEN”
proto: Object

2、登出的302解决是重定向到登录页面 要使用try catch捕捉一下

requestLogout().then(function(){
try {
sessionStorage.clear();
window.location.href = ‘remoteUrl’;
} catch (error) {

	  }
	
	})
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用axios进行网络请求的封装可以提高代码的复用性和维护性,以下是一个简单的示例: 首先,安装axiosvue-axios库: ```bash npm install axios vue-axios ``` 接下来,在main.js中引入并注册这两个库: ```javascript import axios from 'axios'; import VueAxios from 'vue-axios'; Vue.use(VueAxios, axios); ``` 然后,创建一个api.js文件用于封装axios的请求方法: ```javascript import axios from 'axios'; const api = axios.create({ baseURL: 'http://api.example.com', // 设置请求的基础URL timeout: 5000, // 设置请求超时时间 }); // 请求拦截器 api.interceptors.request.use( config => { // 可以在请求发送之前做一些处理,例如添加请求头等 return config; }, error => { // 请求错误处理 return Promise.reject(error); } ); // 响应拦截器 api.interceptors.response.use( response => { // 可以在接收到响应数据后做一些处理,例如统一处理错误码等 return response.data; }, error => { // 响应错误处理 return Promise.reject(error); } ); export default { // 封装GET请求 get(url, params) { return api.get(url, { params }); }, // 封装POST请求 post(url, data) { return api.post(url, data); }, // 封装PUT请求 put(url, data) { return api.put(url, data); }, // 封装DELETE请求 delete(url) { return api.delete(url); }, }; ``` 现在,你可以在Vue组件中使用封装好的api.js文件进行网络请求了: ```javascript import api from './api.js'; export default { mounted() { this.getData(); }, methods: { async getData() { try { const res = await api.get('/data'); console.log(res); } catch (error) { console.error(error); } }, }, }; ``` 以上就是一个简单的Vue axios封装示例,你可以根据实际需求对其进行扩展和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值