新建utils文件夹,下面新建request.js
let baseUrl = 'http://域名:端口'
export default {
request(options){
return new Promise((resolve, reject) => {
options.url = baseUrl + options.url;
options.complete = (response) => {
if (response.statusCode == 200 || response.statusCode == 0) {
if (response.data.code == 500) {
uni.showToast({
title: response.data.msg,
icon: "none",
duration: 2000,
});
}
resolve(response.data);
} else {
uni.showToast({
title: "请求异常",
icon: "none",
});
}
};
uni.request(options);
});
},
post(url, data, header){
let options = {
url: url,
data: data,
header: header,
method: "POST",
};
return this.request(options);
},
get(url, data, header) {
let options = {
url: url,
data: data,
header: header,
};
return this.request(options);
},
};
在mian.js中引入request.js文件
import request from "./utils/request.js";
import { createSSRApp } from 'vue'
export function createApp() {
const app = createSSRApp(App)
app.config.globalProperties.$Api = request;
app.use(uviewPlus)
return {
app
}
}
页面中使用
import {ref, getCurrentInstance} from "vue";
const internalInstance = getCurrentInstance()
const globalProperties = internalInstance.appContext.config.globalProperties
const $Api= globalProperties.$Api
const getInfo = () => {
$Api.get(接口地址, 传递参数, 请求头配置).then(res => {
//对接口数据进行操作
}).catch(() => {
}).finally(() => {
})
}
新建utils文件夹,下面新建request.ts
cosnt baseUrl = 'xxxx'
interface Options {
url: string;
data?: any;
header?: any;
method?: string;
complete?: (response: any) => void;
}
interface ResponseData {
code: number;
msg: string;
}
export default {
request(options: Options = {}): Promise {
return new Promise((resolve, reject) => {
let url = options.url;
if (!(url.indexOf("http://") !== -1 || url.indexOf("https://") !== -1)) {
options.url = 'http://' + baseUrl + "/app/"+ url;
}
options.header.token = uni.getStorageSync("token");
options.complete = (response) => {
if (response.statusCode == 200 || response.statusCode == 0) {
if (response.data.code == 401 || response.data.code == 420) {
uni.navigateTo({
url: "/pages/login/login",
});
}
if (response.data.code == 500) {
uni.showToast({
title: response.data.msg,
icon: "none",
duration: 2000,
});
}
resolve(response.data);
} else {
uni.showToast({
title: "请求异常",
icon: "none",
});
}
};
uni.request(options);
});
},
post(url: string, data: any = {}, header: any = {}): Promise {
let options: Options = {
url: url,
data: data,
header: header,
method: "POST",
};
return this.request(options);
},
get(url: string, data: any = {}, header: any = {}): Promise {
let options: Options = {
url: url,
data: data,
header: header,
};
return this.request(options);
},
};
cosnt baseUrl = 'xxxx'
// 添加拦截器
const httpInterceptor = {
//拦截前触发
invoke(options:UniApp.RequestOptions) {
//非http开头需拼接地址
if (!options.url.startWith('http')) {
options.url = baseUrl + options.url
}
// 请求超时,默认60s
options.timeout = 10000
//添加小程序端请求头标识,header默认是对象格式
options.header = {
...options.header,
'source-client':'miniapp'
}
//添加toke请求头标识
const token = uni.getStorageSync("token")
options.header.Authorization = token
}
}
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
//定义接口,指定泛型
interface Data {
code: String,
msg: string,
result:T
}
//请求函数
export const http= (options: UniApp.RequestOptions) => {
//返回Peomise对象
return new Promise>((resolve, reject) => {
uni.request({
...options,
//请求成功
success(res) {
if (res.statusCode >= 200 && res.statusCode < 300) {
//获取数据成功,调用resolve
resolve(res.data as Data)//类型断言为更准确的类型
} else if (res.statusCode == 401) {
// 401错误,token失效,清除本地存储中的token,跳转到登录页,调用reject
uni.removeStorage({
key: 'token',
success: function (res) {
console.log('成功删除 token');
uni.navagateTo({
url: '/pages/login/login'
})
reject(res)
},
})
} else {
//通用错误,根据后端错误信息轻提示,调用reject
uni.showToast({
icon: 'none',
title:(res.data as Data).msg||'请求错误'
})
reject(res)
}
},
fail(err) {
//网络错误,调用reject
uni.showToast({
icon: 'none',
title:'网络错误'
})
reject(err)
}
})
})
}
引入及页面使用同上