Vue 封装 Axios 插件
新建一个request.jsimport axios from 'axios'//引入 axiosimport baseUrl from '../api/baseUrl'// 创建 axios 实例const service = axios.create({baseURL: baseUrl, // api 的 base_urltimeout: 15000, // 请求超时时间});// 添加请求拦
·
新建一个request.js
import axios from 'axios' //引入 axios
import baseUrl from '../api/baseUrl'
// 创建 axios 实例
const service = axios.create({
baseURL: baseUrl, // api 的 base_url
timeout: 15000, // 请求超时时间
});
// 添加请求拦截器
service.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
// 添加响应拦截器
service.interceptors.response.use(function (response) {
// 对响应数据做点什么
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
export default service
baseUrl.js(管理和区分生产环境和本地开发环境)
let baseUrl = "";
switch (process.env.NODE_ENV) { //注意变量名是自定义的
case 'development':
baseUrl = "http://127.0.0.1:8000" //开发环境url
break
case 'production':
baseUrl = "https://yun.guanacossj.com" //生产环境url
break
}
export default baseUrl;
执行npm run dev 的时候会请求 127.0.0.1
执行npm run build 的时候会请求yun.guanacossj.com
使用示例
import request from '@/utils/request'
async checkLogin() {
try {
let ans = await request({
url: "yunprophet/api/v1/check-login",
headers: {
'token': localStorage.getItem('Authorization')
}});
if (ans.data.code === 200) {
await this.getDownList();
// await this.getToDOList();
await this.getToDOListNew();
} else {
this.$message.error({
message: '凭证已过期,请重新登录!',
center: true
});
await this.$router.push({
path: "/login",
});
}
} catch (e) {
this.$message.error({
message: '页面出错了,请稍后再试!',
center: true
});
}
},
更多推荐
已为社区贡献19条内容
所有评论(0)