1.新建接口文件/api/list.js
import request from '../utils/request';
/**
* 获取风险点详情
* @param {id}
* @returns
*/
export function desc(id) {
return request({
url: `risk/desc?id=${id}`,
method: 'get',
});
}
2.新建接口文件/api/index.js导出list所有接口
import * as list from './list'
export default {list}
3.封装axios 请求拦截和响应拦截
/**
* 封装axios请求函数
*/
import axios from 'axios';
import router from '../router';
import { Toast } from 'vant';
const request = axios.create({
baseURL: process.env.VUE_APP_URL,
timeout: 10000, // request timeout
});
/**
* 请求拦截器
*/
request.interceptors.request.use(
config => {
Toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner',
duration: 0,
});
const token = localStorage.getItem('Authorization');
if (token) {
config.headers.token = token;
}
return config;
},
error => {
Toast.clear();
console.log('err' + error); // for debug
return Promise.reject(error);
},
);
// 响应器拦截
request.interceptors.response.use(
response => {
console.log('请求结束response...'), Toast.clear();
return Promise.resolve(response.data);
},
error => {
console.log('请求结束error...'), Toast.clear();
if (error.response.status) {
const { response } = error;
errorHandle(response.data.code, response.data.msg);
return Promise.reject(error.response);
}
},
);
export default request;
3.挂载Vue原型
Vue.prototype.$api = api;
Vue.config.productionTip = false;
Vue.prototype.$axios = axios;
4.页面调用
methods: {
//数据初始化 风险点详情
desc() {
return this.$api.list.desc(this.formData.id);
},
}