网络封装APi

代码模块 专栏收录该内容
5 篇文章 0 订阅

vue项目-封装API接口

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
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值