第一步:首页安装axios,我这里使用npm安装
npm i axios -S
第二步:安装好后,在src文件目录下创建http文件夹,建立request.ts文件,我们的项目环境可能有开发环境、测试环境和生产环境,我们可以通过node的环境变量来匹配我们的默认的请求地址
// 环境的切换
if (process.env.NODE_ENV == 'development') {
axios.defaults.baseURL = 'https://www.baidu.com';}
else if (process.env.NODE_ENV == 'debug') {
axios.defaults.baseURL = 'https://www.ceshi.com';
}
else if (process.env.NODE_ENV == 'production') {
axios.defaults.baseURL = 'https://www.production.com';
}
import axios from 'axios'
const $http = axios.create({
//设置默认请求地址
baseURL,
//设置请求超时时间
timeout:5000,
//设置请求头
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
}
})
// 先导入vuex,因为我们要使用到里面的状态对象
// vuex的路径根据自己的路径去写
import store from '../../store/index';
// 请求拦截器
$http.interceptors.request.use(config => {
// 每次发送请求之前判断vuex中是否存在token
// 如果存在,则统一在http请求的header都加上token,这样后台根据token判断你的登录情况
// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断
const token = store.state.token;
token && (config.headers.Authorization = token);
return config;
},error => {
return Promise.error(error);
})
//响应拦截
$http.interceptors.response.use(res => {
// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据
if (res.status === 200) {
return Promise.resolve(res);
} else {
return Promise.reject(res);
}
}, error => {
if (error.res.status) {
switch (error.res.status) {
// 401: 未登录
// 未登录则跳转登录页面,并携带当前页面的路径
// 在登录成功后返回当前页面,这一步需要在登录页操作。
case 401:
router.replace({
path: '/login',
query: {
redirect: router.currentRoute.Path
}
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 清除本地token和清空vuex中token对象
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
store.commit('loginSuccess', null);
// 跳转登录页面,并将要浏览的页面Path传过去,登录成功后跳转需要访问的页面
setTimeout(() => {
router.replace({
path: '/login',
query: {
redirect:router.currentRoute.Path
}
});
}, 1000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1500,
forbidClick: true
});
break;
}
return Promise.reject(error.res);
}
}
})
// 别忘记了
export default $http
第三步:封装get或者post请求,下面是自己封装的例子
//导入request.ts 目录下的$http
import $http from "./index";
export function getJob(data:any):any{
return $http({
url: '/mock/704240/Job',
method: 'get',
params: data
})
}
export function postJob(data: any): any{
return $http({
url: '/mock/704240/Job',
method: 'post',
data
})
}
export function getRequirement(): any{
return $http({
url: '/mock/704240/Requirement',
method:'get'
})
}
第四步:调用自己封装好的函数,来发送请求来获取数据
const getJoblist = (httpData: any): void => {
getJob(httpData).then((res: any) => {
data.jobs = res.data;
console.log('拿到了数据');
})
}
// setup()下的 onMounted
onMounted(() => {
getJob({}).then((res: any) => {
// console.log(res);
data.jobs = res.data;
// console.log(data.jobs);
})
getRequirement().then((res: any) => {
// console.log(res);
data.option = res.data;
// console.log(data.option);
})
})