前端一般静态页面写完后，就要从后端获取数据了，就要进行接接口。接接口其实说白了就是发送网络请求，从后端获取数据，然后再将数据渲染到页面上。
今天就以一个简单的uniapp项目为例，介绍一下接口怎么写。
首先，是封装一个request.js文件（名字自取，就是一个封装请求的文件），封装是为了减少重复的请求代码。
这个是uniapp的封装（因为这个uniapp是做App的所以不用axios做，web一般是用axios封装）
其实request就是一个函数，它调用之后返回的是一个promise对象
// 同时发送多个请求的次数
let ajaxTimes = 0;
//h5端才存在跨域,App端没有跨域
let baseUrl =' ' ; //这个地址是后端给的，可以从后端的接口文档看
// #ifdef H5
baseUrl = '/api/'; //这个重写是因为h5端会存在跨域（跨域是什么自行查询）
// #endif
export const request = (params) => {
// 避免覆盖传递过来的header
let header = {
...params.header
}
//请求头要带token（为什么要带token自行查询）
const token = uni.getStorageSync('token')
if (token) {
header['Authorization'] = 'Bearer '+token
}
ajaxTimes++;
// 显示加载中 效果
uni.showLoading({
title: '加载中',
mask: true
});
return new Promise((resolve, reject) => {
uni.request({
url: baseUrl + params.url,
data: {
...params.data,
},
header: header,
method: params.method,
success: (response) => {
//请求成功的处理
},
fail: (err) => {
//请求失败的处理
},
complete: () => {
//请求完毕的处理
ajaxTimes--;
//请求处理完毕
if(ajaxTimes===0){
uni.hideLoading()
}
}
})
})
}
然后也可以看看axios的封装
import axios from "axios";
import router from "../router";
const Host = ;
const baseURL = ;
let fullURL = Host + baseURL
const headerTokenKey = ''
//创建一个axios实例
export const request = axios.create({
baseURL: fullURL,
timeout: 10 * 1000,
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
//请求拦截器，就是请求前做一些检查
request.interceptors.request.use(
function (config) {
if (!window.localStorage.getItem(headerTokenKey)) {
console.log("没有token");
} else {
console.log(window.localStorage.getItem(headerTokenKey));
config.headers[headerTokenKey] = window.localStorage.getItem(headerTokenKey);
}
return config;
},
function (error) {
return Promise.reject(error);
}
)
//响应拦截器，对响应结果做一些处理
request.interceptors.response.use(response => {
console.log("response")
console.log(response)
console.log(response.data.code)
if (response.data.code == 506) {
console.log("没有操作权限");
router.replace({
path: '/login'
})
return response;
}
else
return response;
})
然后第二步，就是每个人都可以写自己负责的页面的接口了（每个接口就是copy一下，然后改一下函数名和参数就好了）
//刚才封装好的文件引入
import {request} from '@/api/request.js'
//导出这样的一个test函数就是一个接口
export function test(params){
//可以看到这里的request函数调用了，所以它返回了一个promise
//对象，所以调用test函数就会return一个promise对象，
return request({
//传入的参数是对应后端给的接口的url,参数，还有请求方法
url:'/ms/account/create',
data:params,
method:'POST'
})
}
写好一个接口后就到对应页面去应用了。
第三步，触发请求（触发请求的情况有很多啦，按钮点击啊，生命周期里啊，这个得看页面具体情况了）
template>
<view>
<text>请求篇</text>
<button @click="send()">POST请求</button>
</view>
</template>
<script>
//导入test接口，通过按钮点击事件触发请求
import {test} from '@/api/try.js'
export default{
data(){
return {
listData: [],
data:'数据',
params:{
"message": "[{\"id\": \"序号1\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号2\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"},{\"id\": \"序号31\",\"deviceName\": \"设备名称\",\"managerNumber\": \"管理编号\",\"brand\": \"品牌\",\"type\": \"型号\",\"factoryNumber\": \"出厂编号\",\"nominalAccuracy\": \"标称精度\",\"checkDate\": \"检定日期\",\"certificate\": \"证书编号\",\"ackCycle\": \"确认周期\",\"enpiryTime\": \"有效期至\",\"state\": \"仪器状态\",\"projectName\": \"所在项目\",\"keeper\": \"保管人\",\"note\": \"备注\"}]",
"uploader": "张三",
"accountTime": "2016-08-11",
"accountName": "仪器设备台账",
"accountYear": "2016"
},
}
},
methods:{
send(){
//在点击事件里触发请求，上一步说了test调用后是一个promise对象，所以这里就通过then，catch处理请求情况
test(this.params).then(res=>{
console.log('成功')
console.log(res)
}).catch(err=>{
console.log('错误')
console.log(err)
})
},
}
}
第四步，然后我们可以在浏览器里请求情况，打开谷歌浏览器开发者工具的network查看请求情况。
下图是点击按钮后发送了请求，那里为什么是create因为接口url叫create，第二行200是请求状态码（200表示请求成功，40x，四零几一般就是前端这里的请求哪里写错了，自己检查一下，50x，五零几就是后端的问题）
如果network这里没有create这样的一条请求就是没发送出去，这个得自己去检查一下原因
点这条请求可以看到很多东西，
headers：这里可以看到请求头和响应头，我们也可以看到请求里里有Authorization: Bearer test1这一项，就是request.js那里封装的
Payload：是请求参数
Response：是后端的响应数据
再补充一下跨域问题前端常用的解决方法
就是在项目的根目录下，创建一个vue.config.js文件，写入以下内容
module.exports = {
devServer:{
port:'8080',//端口比如8080等等
disableHostCheck:true,
proxy:{
'/api':{
target:'',//后端给的地址
changeOrigin:true,//确定跨域
pathRewrite:{
'^/api': ''//这个就是以在写请求的时候加上这个api,然后这里重写去掉api
}
}
}
}
}
基本上就这些了，如果是项目负责人一般会封装好请求和处理好跨域的，项目成员一般写各自的接口就好了，大概这样，喜欢的给个star
————————————————
版权声明：本文为CSDN博主「无名哈哈哈」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/m0_52536354/article/details/126036858