vue项目-封装API接口

曾经终败给现在 2024-04-17 14:13 7阅读 0赞

1.在/src/下创建一个js文件 AxiosAsk.js

import Vue from 'vue'
    import axios from 'axios'
    var vm = '';
    Vue.prototype.thisVm = function(_this) { 
    	vm = _this;
    }
    const APIASK = (url, type, data) => { 
    	let hostUrl = JSON.parse(localStorage.LMUrl).hostUrl;
    	let ax = { 
    		method: type,
    		url: hostUrl + url,
    		headers: { 
    			"token": data.token
    		},
    		data: { },
    		timeout: 15000
    	}
    	if (type == 'post') { 
    		ax.data = data;
    	} else if (type == 'get') { 
    		ax.params = data;
    	}
    	let res = axios(ax).then((data) => { 
            //自定义模块
    		if (data.status == 200) { 
    			if (data.data.code == 400) { 
    				vm.$message.error(data.data.msg);
    			} else if (data.data.code == 402) { 
    				vm.$router.push({ 
    					path: '/'
    				})
    			}
    		} else { 
    			vm.$message.error('服务器错误');
    		}
            //自定义模块 END
    		return data.data
    	}).catch((error) => { 
    		vm.$message.error('网络请求超时');
    		return 'NetworkError';
    	})
    	return res
    }
     
    export default { 
    	APIASK
    }

2.App.vue

created() { 
            this.thisVm(this);
        }

3.vue页面调用

//页面引入封装接口文件
    import $http from '../AxiosAsk'
    
    //调用封装接口
    let data = { //传给接口的数据 
        token: this.token
    };
    let res = $http.APIASK('/login', 'post', data);
    Promise.resolve(res).then(data => { 
        if (data.code == 0) { 
            //接口数据
        }
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中Axios的封装与API接口的管理详解

*一：axios的封装** vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是promise的http库，可运行在浏览器端和node.js中。 ...

迷南。/ 2024年04月17日 15:48/ 0 赞/ 11 阅读

相关 vue项目-封装API接口

.在/src/下创建一个js文件 AxiosAsk.js import Vue from 'vue' import axios from 'axios'...

曾经终败给现在/ 2024年04月17日 14:13/ 0 赞/ 8 阅读

相关 Vue项目 axios请求封装+接口封装

前言：接口进行封装，方便后期维护 > 先封装axios ( utils => axios.js ) import axios from "axios" i

我会带着你远行/ 2023年01月18日 04:08/ 0 赞/ 246 阅读

相关 UniApp Api接口封装

全局注册，通过this调用适用于vue 跟 uniapp > 在uniapp 下 > 跟pages同级下 > 创建一个api文件夹下 > 在创建一个http

分手后的思念是犯贱/ 2022年12月25日 15:52/ 0 赞/ 245 阅读

相关 axios封装与api接口管理

一、前言 -------------------- axios的封装和api接口的统一管理，其实主要目的就是在帮助我们简化代码和利于后期的更新维护。在vue项目中，

太过爱你忘了你带给我的痛/ 2022年12月06日 15:59/ 0 赞/ 127 阅读

相关 Laravel自定义封装Api接口

1、创建统一接口文件ApiResponse.php ![20200819171926674.png][] [Trait用法][Trait] <?php

以你之姓@/ 2022年11月29日 05:56/ 0 赞/ 248 阅读

相关 Vue中Axios封装API接口的方法

参考此博文[vue2.x搭建saas项目系列之七：API接口及常量、基础数据统一维护][vue2.x_saas_API] [vue2.x_saas_API]: https:

女爷i/ 2022年11月09日 14:21/ 0 赞/ 144 阅读

相关 vue中Axios的封装和API接口的管理

一、axios的封装在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很

缺乏、安全感/ 2022年05月17日 08:12/ 0 赞/ 141 阅读

相关 vue入门：对vue项目中api接口的封装管理

> 小编推荐：[Fundebug][]提供JS错误监控、微信小程序错误监控、微信小游戏错误监控，Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务，众多大

傷城~/ 2022年02月17日 07:28/ 0 赞/ 147 阅读

相关 vue项目封装api

设计思路　　为了加强项目的可维护性，建议将请求接口api进行统一封装，　　一个常规项目的基础地址一般为唯一，所以考虑将基础地址设定一个变量 let baseUrl:

心已赠人/ 2021年11月27日 07:06/ 0 赞/ 166 阅读