H5 app axios请求拦截+动画+注册实现
请求拦截器和响应拦截器主用来控制状态管理vuex中loading标志是否为true请求开始 loading为true,出现遮罩加loading标志,请求结束,这俩都消失使用到了vant2组件(vue组件中引入loading组件和样式)
·
请求拦截器和响应拦截器主用来控制状态管理vuex中loading标志是否为true
请求开始 loading为true,出现遮罩加loading标志,请求结束,这俩都消失
使用到了vant2组件(vue组件中引入loading组件和样式)
- api/axios.js 请求拦截器和响应拦截器:
//对axios 进行二次封装 主要使用请求拦截器 和响应拦截器
import axios from 'axios';
// 引入仓库
import store from '@/store';
const request = axios.create({
// 基础路径
baseURL:'http://localhost:3005/api',
timeout:5000,
})
//请求拦截器
request.interceptors.request.use((config)=>{
// 加载中动画
store.commit("loadingOpt/LOADING");
// config: 配置对象, 可以配置headers
return config;
})
//响应拦截器
// 成功回调会返回服务器数据 失败回调报错原因
request.interceptors.response.use((res)=>{
// 关闭加载中动画
store.commit("loadingOpt/NOLOADING");
// 服务器响应数据回来之后
return res.data;
},(err)=>{
// 响应失败回调(可以终结premise链)
return Promise.reject(new Error("fail"));
})
export default request;
- api/index.js 接口统一管理
// 对API进行统一管理
import axios from '@/api/axios';
export const Register=(params)=>{
// axios返回结果是promise对象
return axios({url:'/saveUser',method:'post',data:params});
}
- 小仓库
(小仓库开启命名空间 大仓库引入直接导出)
const loadingOpt = {
namespaced: true,
state: {
isLoading: false
},
actions: {
},
mutations: {
LOADING(state,val) {
state.isLoading=true;
},
NOLOADING(state,val) {
state.isLoading=false;
}
},
getters: {}
};
export default loadingOpt;
- 大仓库
import Vue from "vue"
import Vuex from "vuex"
// 引入加载模块仓库
import loadingOpt from '@/store/loading';
Vue.use(Vuex);
export default new Vuex.Store({
modules:{
loadingOpt
}
})
- 登陆组件内
// 引入注册api模块
import {Register} from '@/api'
let params={
name:this.name,
username:this.username,
password:this.password
}
let res = await Register(params);
实现效果:
更多推荐
已为社区贡献2条内容
所有评论(0)