Vue封装axios和api接口管理

    科技2024-07-10  73

    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) } }
    Processed: 0.009, SQL: 8