在request.js中,设置axios请求拦截器、响应拦截器,对应设置get、post请求公共方法;
方便接口管理,所有请求接口统一整理编写在api.js中。

src/api/request.js

// import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
// Vue.use(VueAxios , axios);
import { Toast , Dialog } from 'vant';

import router from '@/router';



// 全局设置axios发送cookie(axios 默认不发送cookie)
// axios.defaults.withCredentials = true;

// 创建 axios 实例
const instance = axios.create({
  baseURL : process.env.BASE_API,
  timeout : 5000,
  headers : {
    // 'Content-Type' : 'application/x-www-form-urlencoded', // Form Data
    'Content-Type' : 'application/json', // Request Payload
  },
  withCredentials: true // 允许携带cookie
});

// 添加请求拦截器
instance.interceptors.request.use((config)=>{
  // 发送请求前做些什么
  // config.headers.xxx = 'xxx';
  return config;
},(error)=>{
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use((response)=>{
  // console.log(response.data);
  // console.log(response.status);
  // console.log(response.statusText);
  // console.log(response.headers);
  // console.log(response.config);

  // 对响应数据做些什么
  if(response.data.status == '1002'){
    // 1002 跳转登录
    setTimeout(()=>{
      // Toast('请登录');
      Toast(response.data.message);
    },100);
    router.push('/login');
    return false;
  }else if(response.data.status == '1003'){
    // 1003 个人信息(补全信息)
    setTimeout(()=>{
      // Toast('请补全个人信息');
      Toast(response.data.message);
    },100);
    router.push('/userInfo');
    return false;
  }else{
    return response;
  }
},(error)=>{
  // 对响应错误做些什么
  Dialog({ message: '系统繁忙,请刷新重试' });
  return Promise.reject(error);
});

// export default instance;



// url : 请求URL
// data : 后台接收数据,取值:{id:1,...} 或 {}
// loadingText : 是否需要请求的loading提示,取值:用户传递的值如:'加载中...' 或 ''
// failDialog : 是否需要显示处理失败 response.data.status==0 的提示,取值:1 或 0
// successToast : 是否需要显示处理成功 response.data.status==1 的提示,取值:1 或 0

const request = {
  // get 请求
  get:function(url,data,loadingText,failDialog,successToast){
    loadingText && Toast.loading({duration: 0,message: loadingText,forbidClick: true,});
    data = data || {};
    return instance.get(url,{params:data}).then(response=>{
      if(!response){
        return false;
      }
      // return Promise.resolve(response.data);
      loadingText && (!successToast || response.data.status == 0) && Toast.clear();
      response.data.status == 0 && failDialog && Dialog({ message: response.data.message });
      response.data.status == 1 && successToast && Toast.success(response.data.data);
      return response.data;
    }).catch(error=>{
      loadingText && Toast.clear();
      return Promise.reject(error);
    })
  },
  // post 请求
  post:function(url,data,loadingText,failDialog,successToast){
    loadingText && Toast.loading({duration: 0,message: loadingText,forbidClick: true,});
    data = data || {};
    return instance.post(url,data).then(response=>{
      if(!response){
        return false;
      }
      // return Promise.resolve(response.data);
      loadingText && (!successToast || response.data.status == 0) && Toast.clear();
      response.data.status == 0 && failDialog && Dialog({ message: response.data.message });
      response.data.status == 1 && successToast && Toast.success(response.data.data);
      return response.data;
    }).catch(error=>{
      loadingText && Toast.clear();
      return Promise.reject(error);
    })
  }
}

export default request;

baseURL配置:
config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  // BASE_API: '"http://xxx.com/perform-system/"'
  BASE_API: '"/perform-system/"'
})

config/prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  // BASE_API: '"http://xxx.com/perform-system/"'
  BASE_API: '"/perform-system/"'
}

config/index.js

// 代理
...
proxyTable: {
	'/perform-system/': {
			target: 'http://xxx.com/', //后端接口地址
			changeOrigin: true, //是否允许跨越
			pathRewrite: {
					'^/perform-system/': '/perform-system/', //重写,
			}
	}
},
...

src/api/api.js

import request from '@/api/request.js';

// 登录-发送验证码
function sendSms(data){
  return request.post('sendSms',data,'发送中...',1,1);
}
// 登录-提交登录信息
function login(data){
  return request.post('login',data,'登录中...',1,1);
}
// 获取用户基本信息-判断身份/个人消息数据
function userData(){
  return request.post('userInfo',{},'',0,0);
}
...


export { sendSms , login , userData };

login.vue中

import { sendSms , login } from '@/api/api.js';


...
//获取验证码
let dataJson = {
	name: this.name,
	mobile: this.mobile,
};
sendSms(dataJson).then(res=>{
	console.log(res);
	if(res.status == 1){
		this.countDown(); //执行倒计时
		this.countdown = true;
		this.ifSendSmsOk = true;
	}
}).catch(err=>{
	console.log(err);
})
...


...
//执行登录
let dataJson = {
	name: this.name,
	mobile: this.mobile,
	code: this.code,
};
login(dataJson).then(res=>{
	console.log(res);
	if(res.status == 1){
		this.$router.push('/');
	}
}).catch(err=>{
	console.log(err);
})
...

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐