1.封装地址,在config.js
const ENV = 'TEST';
const config = {
'TEST': {
appId: 'wx111',
AppSecret: '111,
qqMapKey: '111',
requestUrl: 'https://test.com/'
},
'PRODUCTION': {
appId: 'wx111',
AppSecret: '111',
qqMapKey: '111',
requestUrl: 'https://111.com/'
}
}export default config[ENV]
封装request请求,在api/request.js
import config from '@/config'
import { getToken } from '@/utils/auth';function request(config) {
if(config.header) {
config.header.token = getToken()
} else {
config.header = {
token: getToken()
}
}
return new Promise((reslove, reject) => {
uni.request(Object.assign(config, {
success: res => {
console.log(config,res); //config传后台,res接收的数据
const { statusCode, data } = res
if (statusCode == 200) {
if(data.success) {
reslove(data)
} else {
reject(data)
}
} else if (statusCode == 401) {
// 已登录状态下,token过期则redirect到登录页
if(uni.getStorageSync('LOGGED_IN')) {
uni.setStorageSync('LOGGED_IN', false);
uni.showToast({
title: '账户登录已过期,请重新登录!',
icon: 'none'
})
uni.redirectTo({
url: '/pages/login/index'
});
reject({});
}
} else {
reject(data)
}
},
fail: err => {
reject(err)
}
}))
})
}const api = function (method, api, data) {
return request({
method,
url: config.requestUrl + api,
data
});
}export default api;
使用
api/list.js
import request from './request.js'
// 获取列表
export function list(data) {
return request('get', 'api/list', data)
}
组件list({id: this.userId}).then(res => {
...
})
或
1.封装request请求,在utils/request.js
const request = (options)=>{
return new Promise((resolve,reject)=>{
uni.request({
url:options,
method:options.method || 'GET',// header: {
// 'content-type': 'application/json;charset=UTF-8',
// 'Authorization':uni.getStorageSync("appToken")
// },data:options.data || {},
success:(res)=>{
// if (res.data.status !== 0) { //请求失败
// return uni.showToast({
// title: '获取数据失败'
// })
// }
resolve(res) //数据请求成功
},
fail: (err) => {
uni.showToast({
title: '请求接口失败'
})
reject(err) //数据请求失败
}
})
})
}
export{
request
}
2.封装接口,在utils/api.js
const BASE_URL = "https://getman.cn/mock/"
//接口
const getMemberUrl = `${BASE_URL}hh`export default request
3.min.js 定义request请求
import request from './utils/request.js'
Vue.prototype.$request = request;
4.页面使用接口
import {getMemberUrl} from '../../util/api.js'
法一:
async getMemberMsg() {
const res = await this.$request(getMemberUrl)
console.log('数据:',res)
},
法二:
add() {
this.$request(getMemberUrl).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
或者
1.封装../../util/request.js
const request = (options) => {
return new Promise((resolve, reject) => {
uni.request({
url: options,
method: options.method || 'GET',
data: options.data || {}
})
.then((res) => {
resolve(res) //数据请求成功
})
.catch((err) => {
uni.showToast({
title: '请求接口失败'
})
reject(err) //数据请求失败
})
})
}
export default request
2.接口../../util/api.js
const BASE_URL = "https://getman.cn/mock/"
//接口
const getMemberUrl = `${BASE_URL}hh`
export{
getMemberUrl
}
3.min.js 定义request请求
import request from './utils/request.js'
Vue.prototype.$request = request;
4.使用
import {getMemberUrl} from '../../utils/api.js'getMeg(){
this.$request(getMemberUrl).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
或者
1.../../util/request.js
//默认地址前缀
var apiServerAddr = 'http://127.0.0.1:8082'
//videos接口
const API_VIDEOS = apiServerAddr + '/api/getnew/';
function APP_POST(url, opt) {
// var loadMsg = "获取数据中..."
// wx.showLoading({ title: loadMsg, mask: true })
return new Promise((resolve, reject) => {
uni.request({
url: url,
data: opt,
method: 'POST',
header: {
'content-type': 'application/json;charset=UTF-8',
'Authorization':uni.getStorageSync("appToken")
},
success: (result) => {
// wx.hideLoading()
resolve(result)
},
fail: (err) => {
// wx.hideLoading()
reject(err)
}
});
})
}function APP_POST_NOTTOKEN(url,opt){
// var loadMsg = "获取数据中..."
// wx.showLoading({ title: loadMsg, mask: true })
return new Promise((resolve,reject)=>{
uni.request({
url: url,
data: opt,
method: 'POST',
header: {
'content-type':'application/json;charset=UTF-8',
},
success: (result) => {
// wx.hideLoading()
resolve(result)
},
fail: (err) => {
// wx.hideLoading()
reject(err)
}
});
})
}function APP_GET(url) {
// var loadMsg = "获取数据中..."
// wx.showLoading({ title: loadMsg, mask: true })
return new Promise((resolve, reject) => {
uni.request({
url: url,
method: 'GET',
header: {
'content-type': 'application/json;charset=UTF-8',
'Authorization':uni.getStorageSync("appToken")},
success: (result) => {
// wx.hideLoading()
resolve(result)
},
fail: (err) => {
// wx.hideLoading()
reject(err)
}
});
})
}
module.exports = {
APP_POST,
APP_GET,
APP_POST_NOTTOKEN,
API_VIDEOS
}
2.使用
var requestUtil = require('../../util/request.js')getSwiper() {
this.requestUtil.APP_GET(this.requestUtil.API_VIDEOS+13).then(res=>{
console.log(res)
this.message=res.data.message[0]
})
},