Api请求封装



1 创建 config.js

配置 请求域名 

export const baseUrl = 'https://www.upwqy.com';

2 创建授权token类用于管理token

const TokenKey = 'uni-app-token';

//获取token
export function getToken() {
  return uni.getStorageSync(TokenKey)
}
//设置token
export function setToken(token) {
  return uni.setStorageSync(TokenKey, token)
}
//移除token
export function removeToken() {
  return uni.removeStorageSync(TokenKey)
}

 

3 创建请求工具类 request.js

import { baseUrl } from "@/config/config.js"
//token处理
import { getToken,setToken,removeToken} from '@/utils/auth.js'

export const get = (url,data,callback) =>{
	
	var header = {
		'Accept': 'application/json',
		'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
	}
	var url = baseUrl + url
	var token = getToken()
	if(token){
		url = url + '?token='+token
	}
	
	uni.request({
		url: url ,
		header: header,
		data: data,
		method: 'GET',
		success: (response) => {
			uni.hideLoading();
			
			if(response.data.code != 200){
				showError(response.data)
				return false
			}
			
			
			callback(response.data);
		},
		fail: (error) => {
			uni.hideLoading();
			if (error && error.response) {
				showError(error.response);
			}
		},
		complete: () => {
		
		}
	});
}

export const post = (url,data,callback,complete) =>{
	uni.showLoading({
		title: '加载中'
	});
	
	var header = {
		'Accept': 'application/json',
		'Content-Type': 'application/x-www-form-urlencoded', //自定义请求头信息
	}
	
	var url = baseUrl + url
	var token = getToken()
	if(token){
		url = url + '?token='+token
	}
	
	
	uni.request({
		url: url,
		header: header,
		data: data,
		method: 'POST',
		success: (response) => {
			uni.hideLoading();
			
			var data = response.data
			
			if(data.code != 200){
				showError(data)
				return false
			}
			
			callback(response.data);
		},
		fail: (error) => {
			uni.hideLoading();
			
			if (error && error.response) {
				showError(error.response);
			}
		},
		complete: () => {
			setTimeout(function() {
				uni.hideLoading();
			}, 250);
		}
	});
}

const showError = error => {
	let errorMsg = ''
	switch (error.code) {
		case 400:
			errorMsg = '请求参数错误'
			break
		case 401:
			errorMsg = '未授权,请登录'
			break
		case 403:
			errorMsg = '跨域拒绝访问'
			break
		case 404:
			errorMsg = `请求地址出错: ${error.config.url}`
			break
		case 408:
			errorMsg = '请求超时'
			break
		case 500:
			errorMsg = '服务器内部错误'
			break
		case 501:
			errorMsg = '服务未实现'
			break
		case 502:
			errorMsg = '网关错误'
			break
		case 503:
			errorMsg = '服务不可用'
			break
		case 504:
			errorMsg = '网关超时'
			break
		case 505:
			errorMsg = 'HTTP版本不受支持'
			break
		default:
			errorMsg = error.msg
			break
	}

	uni.showToast({
		title: errorMsg,
		icon: 'none',
		duration: 1000,
		complete: function() {
			setTimeout(function() {
				uni.hideToast();
			}, 1000);
		}
	});
}

 

4 创建api接口管理类

import {get,post} from "@/utils/request.js"


// 登录
export const login = (data,callback) => post('user/login',data, callback);

//用户信息
export const user_info = (callback) => get('user/info',{}, callback);

 

5 在main.js中绑定

import * as Api from '@/config/api.js'
import * as Auth from '@/utils/auth.js'

Vue.config.productionTip = false
Vue.prototype.$api = Api;
Vue.prototype.$auth = Auth;

 

实例:

methods: {
			
	getInfo(){
		this.$api.user_info(res=>{
			this.user = res.data
					
		})
	}
}