首先根目录下新建文件夹取名随意,这里我取名common(意为:常见的、共有的)
然后新建request.js文件,贴入以下代码
let server_url = ''; //请求根路径(服务器地址)
let token = '';//token令牌
// process.env.NODE_ENV === 'development' ? 'http://192.168**:6002' : 'http://***/api'; //环境配置,一般这个地址是需要创建一个单独的配置文件向外暴露变量的,因为有时上传文件也需要用到
//向外暴露一个方法,传入一个默认值(空对象)
export function service(options = {}) {
uni.getStorageSync('token') &&(token = uni.getStorageSync('token'));//从本地缓存中获取token
options.url = `${server_url}${options.url}`;//前面为你的服务器地址,后面为具体接口地址
//配置请求头
options.header = {
// 这里的options.header为参数'application/x-www-form-urlencoded',如果不传参数则为'application/json'
'content-type': options.header || 'application/json',//请求数据类型通常有两种格式,具体以接口为准
'Authorization': `${token}` //Bearer ,你请求数据需要的自定义请求头(令牌)
};
// 创建promise,因为接口请求无非就两种情况,成功或失败,成功就.then处理,失败就可以统一处理(弹框提示等等)
return new Promise((resolved, rejected) => {
//成功
options.success = (res) => {
if (Number(res.data.code) == 200) { //请求成功
resolved(res.data);//请求成功时返回接口数据
} else {
uni.showToast({
icon: 'none',
duration: 3000,
title: `${res.data.desc}`
});//弹窗提示接口调用失败的信息
rejected(res.data.desc); //这里调用promise的rejected方法传入错误信息,这样就可以在调用的接口地方直接.catch拿到错误信息了
}
}
//错误(一般没有网络的情况下会走这里)
options.fail = (err) => {
rejected(err); //请求失败时返回错误信息
}
uni.request(options);//调用uni的api,传入我们的外部配置参数
});
}
application/json请求格式示例
application/x-www-form-urlencoded请求格式示例
注意事项:如果是H5端一般会有跨域问题(小程序端不存在跨域问题),具体可在项目manifest文件中配置
"h5": {
// 开发环境 server 配置
"devServer": {
"port": 8088,//端口号,这个自己随便配置,防止开发多个项目是端口号冲突,跟跨域配置没关系
"disableHostCheck": true,//禁用 Host 检查
// 能成功跨域的前提是:本地跑项目的端口需要与后台接口允许跨域的端口一致
"proxy": {
"/api/sys": {
"target": "http://192.168**:6002",//请求目标路径
"changeOrigin": true,//当为true时,代理服务器向后端发送请求时端口号会与后端端口号一致,vue里面默认为true,react默认为false,如果为false,向后端发送请求时后端显示的端口号就还是本地的端口号,如果后端没有做出限制还是能请求
"secure": false,
"ws": false,//用于支持websocket,默认为true
// "pathRewrite": {//重写本地发起的路径
// "^/api/sys": "/api"//正则表达式,将/api/sys变成/api,如果接口接口地址有api这个路径就变成api,如果没有就把他变成空字符串
// }
},
//可配置多个
"/api/contract": {
"target": "http://192.168.**:6001",//目标地址
"changeOrigin": true,//允许跨域
"secure": false,
"ws": false
}
}
}
}
使用:新建api.js文件(用于管理所有的api接口),如果项目比较大建议在每个模块的文件夹下都建一个api.js,或者建一个文件夹下面创建多个api.js文件
第一步:参数配置
import {service} from '../../../common/request.js'//request向外暴露的方法 export function login(data) { //传入对应的配置对象 return service({ url: '/api/sys/loginController/userLogin',//接口地址 method: 'GET',//请求方法 data,//请求接口需要的参数 header:'application/x-www-form-urlencoded'//此参数可以不传,当接口参数格式为application/x-www-form-urlencoded的时候再传 }) }
第二步:页面调用
import {login} from './api.js'//具体根据你项目的路径修改 click() { //params为接口需要的参数 login(params).then(res => { if (res.code == 200) { //一般成功状态码都是200,根据实际情况判断 //此处为接口调用成功之后需要做的事情 } else { //否者就是不成功,一般会弹出错误信息 } }) }