uni-app 封装request
第一步、根目录下新建 config.js 文件const config = {base_url: '这里可以是生产环境或者测试环境'}export { config }第二步、根目录下新建 https/index.js 文件import {config} from '../config.js'export const apiResquest = (prams) => { //prams 为我
·
第一步、根目录下新建 config.js 文件
const config = {
base_url: '这里可以是生产环境或者测试环境'
}
export { config }
第二步、根目录下新建 https/index.js 文件
import {
config
} from '../config.js'
export const apiResquest = (prams) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
// 判断请求类型
let headerData = {
'content-type': 'application/json'
}
let dataObj = null
//因为我们的GET和POST请求结构不同这里我们做处理,大家根据自己后台接口所需结构灵活做调整吧
if (prams.method === "GET") {
headerData = {
'content-type': 'application/json',
'token': uni.getStorageSync('token')
}
} else {
dataObj = {
'data': prams.query,
'token': uni.getStorageSync('token')
}
}
return new Promise((resolve, reject) => {
let url = config.base_url + prams.url; //请求的网络地址和局地的api地址组合
uni.showLoading({
title: '加载中',
mask: true
})
return uni.request({
url: url,
data: dataObj,
method: prams.method,
header: headerData,
success: (res) => {
uni.hideLoading()
//这里是成功的返回码,大家根据自己的实际情况调整
if (res.data.code !== '00000') {
uni.showToast({
title: '获取数据失败:' + res.data.msg,
duration: 1000,
icon: "none"
})
return;
}
resolve(res.data);
console.log(res.data)
},
fail: (err) => {
reject(err);
console.log(err)
uni.hideLoading()
},
complete: () => {
console.log('请求完成')
uni.hideLoading()
}
});
})
}
第三步、 根目录下新建 https/app.js 文件
import { apiResquest } from '../utils/http.js'
//POST 请求案例
export const login = (query) => {
return apiResquest({
url: '这里是API的地址',
method: 'POST',
query: {...query}
})
}
//GET 请求案例可以传递参数也可以不传递
export const validateCode = (query) => {
let str = query
return apiResquest({
url: `您的API地址 ?${str}`,
method: 'GET'
})
}
第四步、页面中调用
import { login } from '../../models/index.js'
//页面中的 methods 里面就可以直接调用了
Login(){
//这里可以设置需要传递的参数
let uid = uni.getStorageSync('userId')
login(uid).then((res) => {
console.log(res)
}).catch(err => {
console.log(err)
})
}
更多推荐
已为社区贡献8条内容
所有评论(0)