H5 app axios请求拦截＋动画＋注册实现

请求拦截器和响应拦截器主用来控制状态管理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);

实现效果: