目錄
?微信小程序
request.js
api.js頁(yè)面?
頁(yè)面使用?
?uniapp
request.js封裝公共請(qǐng)求頭
api.js里面存放api方法
在頁(yè)面引入方法
vue2、3
request.js封裝公共請(qǐng)求頭
api.js文件
頁(yè)面引入
?
?微信小程序
request.js
// 引入env中的url
const baseUrl = "http://www.com"; // 測(cè)試地址
module.exports = {
/**
* url:請(qǐng)求的接口地址
* method:請(qǐng)求方式 GET,POST....
* data:要傳遞的參數(shù)
*/
request: (obj) => {
// console.log('這是我封裝的ajax請(qǐng)求', baseUrl+obj.url);
//這里使用ES6的寫(xiě)法拼接的字符串
let _url = `${baseUrl}${obj.url}`;
// console.log("請(qǐng)求信息",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 項(xiàng)目請(qǐng)求接口需要token不需要就不寫(xiě)
},
success: (res) => {
// console.log('從接口獲取到的數(shù)據(jù)', res);
resolve(res.data);
wx.hideLoading();
// wx.showToast({
// icon: "none",
// title: res.data.msg,
// });
},
fail() {
wx.hideLoading();
reject("接口請(qǐng)求錯(cuò)誤，請(qǐng)檢查");
},
});
});
},
};api.js頁(yè)面?
//引入封裝的reuest請(qǐng)求
const {
request
} = require("./request.js");
//基于業(yè)務(wù)封裝的接口
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,
});
},
// 幾天時(shí)間篩選
time_arrayApi() {
return request({
url: "/api/index/time_array",
method: "GET",
});
},
};頁(yè)面使用?
引入
注意：微信小程序里面默認(rèn)不能使用絕對(duì)路徑，要使用../../../這樣引入，層級(jí)過(guò)多不方便，建議配置絕對(duì)路徑
微信小程序設(shè)置絕對(duì)路徑方法
const {
loginApi,
get_openidApi
} = require('@/utils/api.js')請(qǐng)求?
login() {
// 在登錄事件里面請(qǐng)求這個(gè)接口
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)
// 登錄成功 跳轉(zhuǎn)到首頁(yè)
wx.switchTab({
url: '/pages/index/index',
})
} else {
Toast(res.msg);
}
})
} else {
Toast('請(qǐng)輸入賬號(hào)密碼!');
}
},?uniapp
request.js封裝公共請(qǐng)求頭
/*
@parms url 接口地址
@parms method 請(qǐng)求方式
@parms data 參數(shù)
*/
const BASE_URL = "http://192.168.1.2:9999" //公共請(qǐng)求頭地址
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, // 開(kāi)發(fā)者服務(wù)器接口地址
method: method,//請(qǐng)求方式
timeout: 60000, //請(qǐng)求超時(shí)時(shí)間
data: data, //請(qǐng)求的參數(shù)
header: { //設(shè)置請(qǐng)求的 header
'Content-Type': 'application/json',
'token': token, //自定義請(qǐng)求頭信息token
},
success(res) { //對(duì)請(qǐng)求請(qǐng)求到的信息進(jìn)行處理
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: '身份驗(yàn)證過(guò)期,請(qǐng)重新登錄',
// icon: 'none'
// });
uni.navigateTo({
url: "/pages/login/login"
})
} else {
// uni.showToast({
// title: '請(qǐng)求失敗,請(qǐng)重新獲取數(shù)據(jù)',
// 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 {
// 手機(jī)號(hào)或id加密碼登錄
getLogin: (username, password) => {
let user = api.request('/logins', 'POST', {
"po": username,
"pwd": password,
})
.then(res => {
// console.log(res); //正常的數(shù)據(jù)
return res
})
return user
},
// 驗(yàn)證碼登錄
codeLogin: (username, code) => {
let user = api.request('/LoginRegister', 'get', {
"po": username,
"code": code,
})
.then(res => {
// console.log(res); //正常的數(shù)據(jù)
return res
})
return user
}
}在頁(yè)面引入方法
import Api from "@/API/api.js";
使用方法
async login() {
let user = await Api.codeLogin(this.username, this.password);
}vue2、3
request.js封裝公共請(qǐng)求頭
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',//測(cè)試地址
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('請(qǐng)登錄后在操作')
setTimeout(function () {
sessionStorage.clear()
location.reload()
}, 1000)
}else if (error.response.data.code === 500){
ElMessage.error('服務(wù)器請(qǐng)求錯(cuò)誤，請(qǐng)稍后再試')
}else{
ElMessage.error('系統(tǒng)錯(cuò)誤，請(qǐng)聯(lián)系管理員')
}
return Promise.reject(error)
}
)
// 請(qǐng)求處理
service(options)
.then((res) => {
resolve(res)
})
.catch((error) => {
reject(error)
})
})
}
export default requestapi.js文件
import {request} from '@/api/request'
// 登錄操作
export function login(data) {
return request({
url: '/api/index/login',
method: 'POST',
data
})
}
// 獲取數(shù)據(jù)
export function getBranchPosition() {
return request({
url: '/api/user/get_branch_position',
method: 'GET'
})
}頁(yè)面引入
import {login,?getBranchPosition} from "@/api";
?請(qǐng)求接口發(fā)起請(qǐng)求文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-770248.html
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
}解構(gòu)寫(xiě)法文章來(lái)源地址http://www.zghlxwxcb.cn/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
}到了這里，關(guān)于vue2，3，小程序，uniapp的API請(qǐng)求封裝統(tǒng)一管理請(qǐng)求接口的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![Vue 封裝ajax請(qǐng)求[接口]函數(shù)](https://imgs.yssmx.com/Uploads/2024/02/479040-1.png)
