vue2，3，小程序，uniapp的API请求封装统一管理请求接口-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue2，3，小程序，uniapp的API请求封装统一管理请求接口。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

微信小程序

request.js

api.js页面

页面使用

uniapp

request.js封装公共请求头

api.js里面存放api方法

在页面引入方法

vue2、3

request.js封装公共请求头

api.js文件

页面引入

uniapp vue3 请求封装,javascript,前端,java

微信小程序

request.js

// 引入env中的url
const baseUrl = "http://www.com"; // 测试地址
module.exports = {
  /**
   * url:请求的接口地址
   * method:请求方式 GET,POST....
   *  data:要传递的参数
   */
  request: (obj) => {
    // console.log('这是我封装的ajax请求', baseUrl+obj.url);
    //这里使用ES6的写法拼接的字符串
    let _url = `${baseUrl}${obj.url}`;
    // console.log("请求信息",obj);
    return new Promise((resolve, reject) => {
      wx.showLoading({
        title: "正在加载",
      });
      wx.request({
        url: _url,
        data: obj.data,
        method: obj.method,
        header: {
          "content-type": "application/x-www-form-urlencoded",
          token: wx.getStorageSync("token"), //获取保存的token 项目请求接口需要token不需要就不写
        },
        success: (res) => {
          // console.log('从接口获取到的数据', res);
          resolve(res.data);
          wx.hideLoading();
          // wx.showToast({
          //   icon: "none",
          //   title: res.data.msg,
          // });
        },
        fail() {
          wx.hideLoading();
          reject("接口请求错误，请检查");
        },
      });
    });
  },
};

api.js页面

//引入封装的reuest请求
const {
  request
} = require("./request.js");
//基于业务封装的接口
module.exports = {
  // 获取openid
  get_openidApi(data) {
    return request({
      url: "/api/wechat_notice/get_openid",
      method: "GET",
      method: "POST",
      data,
    });
  },
  // 登录操作
  loginApi(data) {
    return request({
      url: "/api/index/login",
      method: "POST",
      data,
    });
  },
  // 几天时间筛选
  time_arrayApi() {
    return request({
      url: "/api/index/time_array",
      method: "GET",
    });
  },
};

页面使用

引入

注意：微信小程序里面默认不能使用绝对路径，要使用../../../这样引入，层级过多不方便，建议配置绝对路径

微信小程序设置绝对路径方法

const {
  loginApi,
  get_openidApi
} = require('@/utils/api.js')

请求

  login() {
    // 在登录事件里面请求这个接口
    if (this.data.account && this.data.password) {
      loginApi({
        account: this.data.account,
        password: this.data.password
      }).then((res) => {
        console.log(res);
        if (res.code == 1) {
          wx.setStorageSync('token', res.data.userinfo.token)
          wx.setStorageSync('account', this.data.account)
          wx.setStorageSync('password', this.data.password)
          // 登录成功 跳转到首页
          wx.switchTab({
            url: '/pages/index/index',
          })
        } else {
          Toast(res.msg);
        }
      })
    } else {
      Toast('请输入账号密码!');
    }
  },

uniapp

request.js封装公共请求头

/* 
		@parms url 接口地址
		@parms method 请求方式
		@parms data 参数
 */
const BASE_URL = "http://192.168.1.2:9999" //公共请求头地址
const imgApi='http://kinggo.icu:7777/upload'// 上传接口
const request = (url, method, data) => {
	let token = uni.getStorageSync('token') //token
	// console.log("token:", token);
	return new Promise((resolve, reject) => {
		uni.request({
			url: BASE_URL + url, // 开发者服务器接口地址
			method: method,//请求方式
			timeout: 60000, //请求超时时间
			data: data, //请求的参数
			header: { //设置请求的 header
			    'Content-Type': 'application/json',
				'token': token, //自定义请求头信息token
			},
			success(res) { //对请求请求到的信息进行处理
				console.log(res.data)
				if (res.data.code == 200 || res.data.code == 500) {
					resolve(res.data)
					if (res.data.token) {//更新token
						uni.setStorageSync("token", res.data.token)
					}
				} else if (res.data.code == 600) {
					// uni.showToast({
					// 	title: '身份验证过期,请重新登录',
					// 	icon: 'none'
					// });
					uni.navigateTo({
						url: "/pages/login/login"
					})
				} else {
					// uni.showToast({
					// 	title: '请求失败,请重新获取数据',
					// 	icon: 'none'
					// });
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}
			},
			fail(err) {
				reject(err)
			}
		})
	})
}

export default {
	request,imgApi //向外暴露request
}

api.js里面存放api方法

import request from './request.js' //引入request.js
const api = request
export default {
	// 手机号或id加密码登录
	getLogin: (username, password) => {
		let user = api.request('/logins', 'POST', {
				"po": username,
				"pwd": password,
			})
			.then(res => {
				// console.log(res); //正常的数据
				return res
			})
		return user
	},
	// 验证码登录
	codeLogin: (username, code) => {
		let user = api.request('/LoginRegister', 'get', {
				"po": username,
				"code": code,
			})
			.then(res => {
				// console.log(res); //正常的数据
				return res
			})
		return user
	}
}

在页面引入方法

import Api from "@/API/api.js";

使用方法

async login() {
                let user = await Api.codeLogin(this.username, this.password);
            }

vue2、3

request.js封装公共请求头

import axios from 'axios'
import {ElMessage} from 'element-plus'

export const request = (options) => {
    return new Promise((resolve, reject) => {
        // create an axios instance
        const service = axios.create({
            // baseURL: process.env.BASE_API, // api 的 base_url
            baseURL: 'http://xxx.com',//测试地址
            timeout: 80000 // request timeout
        })
        // request interceptor
        service.interceptors.request.use(
            config => {
                if (sessionStorage.getItem('token')) {
                    config.headers['token'] = sessionStorage.getItem('token')
                }
                return config
            },
            error => {
                // Do something with request error
                Promise.reject(error)
            }
        )
        // response interceptor
        service.interceptors.response.use(
            response => {
                return response.data
            },
            error => {
                if (error.response.data.code === 401) {
                    ElMessage.error('请登录后在操作')
                    setTimeout(function () {
                        sessionStorage.clear()
                        location.reload()
                    }, 1000)
                }else if (error.response.data.code === 500){
                    ElMessage.error('服务器请求错误，请稍后再试')
                }else{
                    ElMessage.error('系统错误，请联系管理员')
                }
                return Promise.reject(error)
            }
        )
        // 请求处理
        service(options)
            .then((res) => {
                resolve(res)
            })
            .catch((error) => {
                reject(error)
            })
    })
}
export default request

api.js文件

import {request} from '@/api/request'

// 登录操作
export function login(data) {
    return request({
        url: '/api/index/login',
        method: 'POST',
        data
    })
}


// 获取数据
export function getBranchPosition() {
    return request({
        url: '/api/user/get_branch_position',
        method: 'GET'
    })
}

页面引入

import {login, getBranchPosition} from "@/api";

请求接口发起请求

async function get_salary() {
  let res = await getBranchPosition({
    staff_id: staff_id.value,
    month_id: time_id.value,
    branch_id: branch_id.value
  })
  console.log(res.data);
  royaltyData.value = res.data.staff
  detailData.value = res.data.detail
}

解构写法文章来源地址https://www.toymoban.com/news/detail-770248.html

async function get_salary() {
   let staff_id= staff_id.value,
   let month_id= time_id.value,
   let branch_id= branch_id.value
  let res = await getBranchPosition({
    staff_id,
    month_id,
    branch_id
  })
  console.log(res.data);
  royaltyData.value = res.data.staff
  detailData.value = res.data.detail
}

到了这里，关于vue2，3，小程序，uniapp的API请求封装统一管理请求接口的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！