Die Anforderungen jedes Projekts können unterschiedlich sein. Stellen Sie daher sicher, dass Sie die entsprechende Konfiguration an Ihr eigenes Projekt anpassen
npm i luch-request -S
Uniapp-Sekundärverpackungs-Luch-Request-Anforderungsbibliothek
1. Erstellen Sie die Datei url.js
Es ist praktisch, die Datenadresse des Online- und Debug-Modus anzupassen
//基础Api
const BASE_API="http://xxx.xxx.xxx:8801/"
export{
BASE_API
}
2. Erstellen Sie die Datei httpload.js
import Request from '@/utils/luch-request/index.js'
import {
BASE_API
} from '@/http/url.js'
// import qs from 'qs'
const http = new Request({
baseURL: BASE_API, //设置请求的base url
timeout: 300000, //超时时长5分钟,
header: {
'Content-Type': 'multipart/form-data;application/json;charset=UTF-8;'
}
})
//请求拦截器
http.interceptors.request.use((config) => {
// 可使用async await 做异步操作
const token = uni.getStorageSync('token');
if (token) {
config.header={
"Authorization":'Bearer ' + token
}
}
if (config.method === 'POST') {
config.data = JSON.stringify(config.data);
}
return config
}, error => {
return Promise.resolve(error)
})
// 响应拦截器
http.interceptors.response.use((response) => {
console.log(response)
return response
}, (error) => {
//未登录时清空缓存跳转
if (error.statusCode == 401) {
uni.clearStorageSync();
uni.switchTab({
url: "/pages/index/index.vue"
})
}
return Promise.resolve(error)
})
export default http;
3. Erstellen Sie einen API-Ordner und fügen Sie den folgenden Code in index.js ein
Nachdem die API gekapselt wurde, wird sie zur Verwendung auf der Seite exportiert
import request from '@/http/httpload.js'
/* 测试Api */
export default{
// get请求 可以拼接url或者传入数据对象 二选一
getData(data){
// 传入的data对象 {ip:'121.00.00.01'};
return request.get("/ip/getIpInfo.php",{
params:data});
},
// post请求
postData(data){
// 传入的data对象 {ip:'xxxxxx'};
return request.post("/ip/getIpInfo.php",data);
},
// put请求
putData(data){
// 传入的data对象 {ip:'xxxxxx'};
//put方法大部分会以拼接地址的形式使用 如:request.put("/test/getInfo.php?id="+4)
return request.put("/ip/getIpInfo.php",data);
},
// delete请求
deleteData(data){
// 传入的data对象 {ip:'xxxxxx'};
//delete方法大部分会以拼接地址的形式使用 如:request.delete("/test/getInfo.php?id="+4)
return request.delete("/ip/getIpInfo.php",data);
}
}
4. Auf der Seite aufgerufen
<template>
<div>
<el-button class="el-icon-user" @click="getData">获取数据</el-button>
</div>
</template>
<script>
import TestApi from "@/api/index.js";
export default {
name: "testDemo",
methods: {
getData() {
var data={
id:'xxxxxxx'}
TestApi.getData(data).then(res => {
console.log(res);
}).catch(error=>{
console.log(error);
});
}
}
};
</script>