1.安装axios
npm install axios --save //安装axios
2.引入
在项目的src目录中,新建一个request文件夹,然后在里面新建一个http.js和一个api.js文件。http.js文件用来封装我们的axios,api.js用来统一管理我们的接口。
import axios from 'axios';//引入axios
//设置环境的切换
if(process.env.NODE_ENV=='development'){
axios.defaults.baseURL = 'http://120.53.31.103:84/'
}else if(process.env.NODE_ENV=='production'){
axios.defaults.baseURL = 'https://wap.365msmk.com/'
}
//设置超时时间
axios.defaults.timeout = 10000;
// 请求拦截
axios.interceptors.request.use(
config =>{
config.headers={DeviceType:'H5'}
return config
}
)
//响应拦截
axios.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response);
} else {
return Promise.reject(response);
}
},
// 服务器状态码不是200的情况
error => {
if (error.response.status) {
switch (error.response.status) {
// 401: 未登录
case 401:
router.replace({
path: '/login',
});
break;
// 403 token过期
// 登录过期对用户进行提示
// 跳转登录页面
case 403:
Toast({
message: '登录过期,请重新登录',
duration: 1000,
forbidClick: true
});
// 清除token
localStorage.removeItem('token');
// 跳转登录页面
setTimeout(() => {
router.replace({
path: '/login',
});
}, 3000);
break;
// 404请求不存在
case 404:
Toast({
message: '网络请求不存在',
duration: 1000,
forbidClick: true
});
break;
}
return Promise.reject(error.response);
}
}
);
//封装get请求
export function get(url,params){
return new Promise((resolve,reject)=>{
axios.get(url,{
params
}).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
//封装post请求
export function post(url,params){
return new Promise((resolve,reject)=>{
axios.post(url,params).then(res=>{
resolve(res)
}).catch(err=>{
reject(err)
})
})
}
3.在api.js中管理接口
import {get,post} from './http.js';//引入get,post
//抛出
export function getList(){
return get('api/app/recommend/appIndex')
}
4.在组件中引入
import {getList} from '../request/api.js'
export default{
data() {
return {
}
},
async mounted(){
var res = await getList()
console.log(res)
}
}