封装网络请求

第一种uniapp的封装，第二种小程序的封装，第三种vue3(typescript)的封装

header = {
//当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。
	'content-type': 'application/x-www-form-urlencoded;charset=utf-8',//charset=utf-8防止传的中文乱码
	
	'content-type': 'application/json;charset=utf-8',//application/json可以直接传数组
};

第一种
http.js文件里

import CONFIG from "./config.js"
import {getCacheSync,removeCacheSync} from '@/common/cache.js'//缓存

//请求封装
//type为0要token，1为不用token
var requestAll=function(e={}){
	return new Promise((resolve, reject)=>{
		let allUrl=CONFIG.baseUrl+e.url;
		var token = getCacheSync('token');
		if(token){
			if(e.header){
				e.header['Authorization'] = token;
			}else{
				e.header = {Authorization:token};
			}	
		}
		//讲get请求传的参数拼在链接后
		if(e.method && (e.method == 'GET' || e.method == 'get')){
			if(e.data && JSON.stringify(e.data) != '{}'){
				let para = '';
				for(let key in e.data){
					if(para){
						para += '&'+key+'='+e.data[key];
					}else{
						para += key+'='+e.data[key];
					}
				}
				allUrl += '?'+para;
			}
		}
		// console.log('请求域名',allUrl)
		// console.log('请求链接',e)
		
		uni.request({//发送请求
		    url: allUrl, 
		    data:e.data || {},
			method:e.method || 'post',
			timeout:10000,
		    header:e.header || {},
		    success: res=> {
				uni.hideLoading()
				// console.log('数据',res)
		    	if(res.statusCode == 200 && res.data.code == 200){
					resolve(res.data)
		    	}else if(res.statusCode == 200 && res.data.code == 401){
					//登录失效
					removeCacheSync('token')
					removeCacheSync('userInfo')
					uni.showToast({title:'登录已失效，请重新登录',duration:3000,icon:'none'})
					uni.reLaunch({
						url:'/pages/login/index/index'
					})
				}else if(res.statusCode == 404){
					uni.showToast({title:'请求地址错误',icon:'none'})
					reject(false)
				}else{
					uni.showToast({title:res.data.msg,icon:'none'})
					reject(res.data.msg)
				}
		    },
			fail: err => {//网络请求失败的回调
				console.log(err)
				uni.hideLoading()
				reject(err)
			}
		});
	})
}


export default requestAll

config.js文件里，判断是开发环境还是生产环境

const CONFIG = {
	// 开发环境配置
	development: {
		baseUrl:'xxxxxxxxxxx',//请求域名
	},
	// 生产环境配置
	production: {
		baseUrl:'xxxxxxxxxx',//请求域名
	}
}
export default CONFIG[process.env.NODE_ENV];

api.js文件里，所有接口放这

import requestAll from "./http"
module.exports={
	//1表示不用传token
	register(params) {
		return requestAll('/user/register', params,'POST',1)
	},
}

全局注册，页面调用

//main.js里
import API from "./common/api.js"
Vue.prototype.$api=API //全局引用api.js

//调用页面
//obj为传的参数
this.$api.register(obj)
.then(res =>{})
.catch(res =>{})

---

---

---

---

---

---

---

第二种
http.js文件里

//请求封装
const baseUrl = 'xxxxxxxxxxx';

//登录失效
function invalid(){
	wx.showToast({
		title: '登录已失效，请重新登录',
		duration: 2000,
		icon:'none'
	});
	
	//清空token
	wx.removeStorage({key: 'token'});

	setTimeout(val =>{
		wx.hideToast();
		wx.navigateTo({
			url:'/pages/login/login'
		})
	},2000)
}

//type为0要token，1为不用token
var requestAll=function(url,data={},method="GET",type=0,header={}){
	return new Promise((resolve, reject)=>{
		let allUrl=baseUrl+url;
		
		//type不为1，要传token
		if(type == 0){
			var token = wx.getStorageSync('token');
			header.token = token;
			//判断是否有token值，没有就让其重新登录
			if(!token){
				invalid();
				reject({msg:'token无效,请重新登录'});
				return
			}
		}
		
		wx.request({//发送请求
		    url: allUrl, 
		    data,
			method,
		    header,
		    success: res=> {
		    	//自定义返回的code值为多少代表token值无效
		    	if(res.data.code == 401){
					reject({msg:'登录已失效,请重新登录'})
					invalid();
				}else{
					resolve(res.data)
				}
		    },
			fail: err => {//网络请求失败的回调
					reject(err)
			}
		});
	})
}

module.exports = {
	requestAll
}

api.js文件里

const http = require('./http');

module.exports = {
	//1表示不用传token
	register (params) {
		return http.requestAll('/index/getImage', params,'GET',1)
	},
}

页面调用

const api = require('../../../utils/api');

Page({
    data: {

    },
    onLoad: function (options) {
        
        api.register()
        .then(res =>{
            console.log(res)
        })
        .catch(res =>{
            console.log(res)
        })
        console.log('请求数据')
    },
})

或者将封装的请求方法放到全局

// app.js
const newRequest = require('utils/api');
App({
  onLaunch() {
  },
  api:newRequest,//全局的网络请求
  globalData: {
  }
})

//调用的页面
const app = getApp();
Page({
    data: {
    },
    onLoad: function (options) {
        app.api.register()
        .then(res =>{
            console.log(res)
        })
        .catch(res =>{
            console.log(res)
        })
    },
})

---

---

---

---

---

---

第三种
request.ts文件里

import axios, { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
import baseUrl from './config'
import QS from 'qs' // 参数序列化
import { ElMessage } from 'element-plus'

// 创建axios实例
const instace:AxiosInstance = axios.create({
  baseURL: baseUrl,
  timeout: 10000,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;application/json'
  }
})

// 请求拦截
instace.interceptors.request.use((config:AxiosRequestConfig) => {
  const token:string | null = sessionStorage.getItem('token');
  if (token) {
    config.headers!.token = token;
  }
  return config;
}, (error) => {
  return Promise.reject(error);
})

// 响应拦截
instace.interceptors.response.use((response:AxiosResponse) => {
  // 2xx范围的状态码都会触发这里
  return response;
}, (error) => {
  if (error && error.response) {
    switch (error.response.status) {
      case 400:
        ElMessage.error('错误请求')
        break
      case 401:
        ElMessage.error('未授权，请重新登录')
        break
      case 403:
        ElMessage.error('拒绝访问')
        break
      case 404:
        ElMessage.error('请求错误,未找到该资源')
        break
      case 408:
        ElMessage.error('请求超时')
        break
      case 500:
        ElMessage.error('服务器端出错')
        break
      case 502:
        ElMessage.error('网络错误')
        break
      case 504:
        ElMessage.error('网络超时')
        break
      case 505:
        ElMessage.error('HTTP版本不受支持')
        break
      default:
        ElMessage.error(`连接错误${error.response.status}`)
    }
  } else {
    ElMessage.error('连接服务器失败')
  }
  return Promise.reject(error);
})

/**
 * GET请求
 */
const get = (url:string, params:object = {}) => {
  return new Promise((resolve, reject) => {
    instace.get(url, { params })
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

/**
 * POST请求
 */
const post = (url:string, data:object = {}) => {
  return new Promise((resolve, reject) => {
    instace.post(url, QS.stringify(data))
      .then(res => {
        resolve(res.data)
      })
      .catch(err => {
        reject(err)
      })
  })
}

export default {
  get,
  post
}

config.ts文件里

let baseURL: string = '';

if (process.env.NODE_ENV === 'development') {
  // 开发环境，测试接口
  baseURL = 'xxxx';
} else {
  // 生产环境，正式接口
  baseURL = '';
}

export default baseURL

api.ts文件里

import http from './request'

export const houseCate = (params:object = {}) => {
  return http.get('/api/Houseabout/houseCate', params)
}

调用的页面里

import {houseCate} from '@/xxx/api'
houseCate().then(res =>{}).catch(res =>{})