uni项目中封装api请求
我创建了一个hello,uni的模板项目,在此模板上进行api的封装
1.建立相关文件
具体代码如下:
env.js,主要用来区分不同环境的访问路径,此处包含开发环境与生产环境
// .env.js 文件
// 不同环境访问不同的路径
// import store from '@/common/store/index'
//登录接口
const ENV_LOGIN_URL = {
development: '/boc', //开发环境
production: 'http://47.99.240.74:9898', //生产环境
}
//项目接口
const ENV_API_URL = {
development: '/boc', //开发环境
production: 'http://47.99.240.74:9898', //生产环境
}
//图片上传
const IMG_UPLOAD_URL = 'http://cdn.nccnt.com/';
//高德地图
const GAODE_URL = 'https://restapi.amap.com/';
// process.env.NODE_ENV
export const LOGIN_URL = ENV_LOGIN_URL['development']; //后台根域名
export const API_URL = ENV_API_URL['development']; //后台接口域名
export const MAP_URL = GAODE_URL; //地图接口
export const IMG_URL = IMG_UPLOAD_URL; //图片上传接口
request.js
import {
API_URL
} from '@/env'
export default class Request {
config = {
baseUrl: API_URL,
header: {
'content-type': 'application/json',
'platform': uni.getStorageSync('platform'),
},
method: 'GET',
dataType: 'json',
// #ifndef MP-ALIPAY || APP-PLUS
responseType: 'text',
// #endif
custom: {},
// #ifdef MP-ALIPAY
timeout: 30000,
// #endif
// #ifdef APP-PLUS
sslVerify: false
// #endif
}
static posUrl(url) {
/* 判断url是否为绝对路径 */
return /(http|https):\/\/([\w.]+\/?)\S*/.test(url)
}
static addQueryString(params) {
let paramsData = ''
Object.keys(params).forEach(function(key) {
paramsData += key + '=' + encodeURIComponent(params[key]) + '&'
})
return paramsData.substring(0, paramsData.length - 1)
}
/**
* @property {Function} request 请求拦截器
* @property {Function} response 响应拦截器
* @type {{request: Request.interceptor.request, response: Request.interceptor.response}}
*/
interceptor = {
/**
* @param {Request~requestCallback} cb - 请求之前拦截,接收一个函数(config, cancel)=> {return config}。第一个参数为全局config,第二个参数为函数,调用则取消本次请求。
*/
request: (cb) => {
if (cb) {
this.requestBeforeFun = cb
}
},
/**
* @param {Request~responseCallback} cb 响应拦截器,对响应数据做点什么
* @param {Request~responseErrCallback} ecb 响应拦截器,对响应错误做点什么
*/
response: (cb, ecb) => {
if (cb && ecb) {
this.requestComFun = cb
this.requestComFail = ecb
}
}
}
requestBeforeFun(config) {
return config
}
requestComFun(response) {
return response
}
requestComFail(response) {
return response
}
/**
* 自定义验证器,如果返回true 则进入响应拦截器的响应成功函数(resolve),否则进入响应拦截器的响应错误函数(reject)
* @param { Number } statusCode - 请求响应体statusCode(只读)
* @return { Boolean } 如果为true,则 resolve, 否则 reject
*/
validateStatus(statusCode) {
return statusCode === 200
}
/**
* @Function
* @param {Request~setConfigCallback} f - 设置全局默认配置
*/
setConfig(f) {
this.config = f(this.config)
}
/**
* @Function
* @param {Object} options - 请求配置项
* @prop {String} options.url - 请求路径
* @prop {Object} options.data - 请求参数
* @prop {Object} [options.responseType = config.responseType] [text|arraybuffer] - 响应的数据类型
* @prop {Object} [options.dataType = config.dataType] - 如果设为 json,会尝试对返回的数据做一次 JSON.parse
* @prop {Object} [options.header = config.header] - 请求header
* @prop {Object} [options.method = config.method] - 请求方法
* @returns {Promise<unknown>}
*/
async request(options = {}) {
options.baseUrl = this.config.baseUrl
options.dataType = options.dataType || this.config.dataType
// #ifndef MP-ALIPAY || APP-PLUS
options.responseType = options.responseType || this.config.responseType
// #endif
// #ifdef MP-ALIPAY
options.timeout = options.timeout || this.config.timeout
// #endif
options.url = options.url || ''
options.data = options.data || {}
options.params = options.params || {}
options.header = options.header || this.config.header
options.method = options.method || this.config.method
options.custom = {
...this.config.custom,
...(options.custom || {})
}
// #ifdef APP-PLUS
options.sslVerify = options.sslVerify === undefined ? this.config.sslVerify : options.sslVerify
// #endif
// uni.showToast({
// icon: "loading",
// image: "/static/imgs//logo/logo.gif"
// })
return new Promise((resolve, reject) => {
let next = true
let handleRe = {}
options.complete = (response) => {
response.config = handleRe
if (this.validateStatus(response.statusCode)) { // 成功
response = this.requestComFun(response)
resolve(response.data)
} else if (401 === response.statusCode) {
response = this.requestComFun(response)
resolve(response.data)
} else if (500 === response.statusCode) {
resolve(response.data)
} else {
response = this.requestComFail(response)
reject(response)
}
}
const cancel = (t = 'handle cancel', config = options) => {
const err = {
errMsg: t,
config: config
}
reject(err)
next = false
}
handleRe = {
...this.requestBeforeFun(options, cancel)
}
const _config = {
...handleRe
}
if (!next) return
delete _config.custom
let mergeUrl = Request.posUrl(_config.url) ? _config.url : (_config.baseUrl + _config.url)
if (JSON.stringify(_config.params) !== '{}') {
const paramsH = Request.addQueryString(_config.params);
mergeUrl += mergeUrl.indexOf('?') === -1 ? `?${paramsH}` : `&${paramsH}`
}
_config.url = mergeUrl
uni.request(_config)
})
}
get(url, options = {}) {
return this.request({
url,
method: 'GET',
...options
})
}
post(url, data, options = {}) {
return this.request({
url,
data,
method: 'POST',
...options
})
}
upload(url, {
// #ifdef APP-PLUS
files,
// #endif
// #ifdef MP-ALIPAY
fileType,
// #endif
filePath,
name,
header,
formData,
custom
}) {
return new Promise((resolve, reject) => {
let next = true
let handleRe = {}
const globalHeader = {
...this.config.header
}
delete globalHeader['content-type']
const pubConfig = {
baseUrl: this.config.baseUrl,
url,
// #ifdef APP-PLUS
files,
// #endif
// #ifdef MP-ALIPAY
fileType,
// #endif
filePath,
method: 'UPLOAD',
name,
header: header || globalHeader,
formData,
custom: {
...this.config.custom,
...(custom || {})
},
complete: (response) => {
response.config = handleRe
if (response.statusCode === 200) { // 成功
response = this.requestComFun(response)
resolve(response)
} else {
response = this.requestComFail(response)
reject(response)
}
}
}
const cancel = (t = 'handle cancel', config = pubConfig) => {
const err = {
errMsg: t,
config: config
}
reject(err)
next = false
}
handleRe = {
...this.requestBeforeFun(pubConfig, cancel)
}
const _config = {
...handleRe
}
if (!next) return
delete _config.custom
_config.url = Request.posUrl(_config.url) ? _config.url : (_config.baseUrl + _config.url)
uni.uploadFile(_config)
})
}
}
/**
* setConfig回调
* @return {Object} - 返回操作后的config
* @callback Request~setConfigCallback
* @param {Object} config - 全局默认config
*/
/**
* 请求拦截器回调
* @return {Object} - 返回操作后的config
* @callback Request~requestCallback
* @param {Object} config - 全局config
* @param {Function} [cancel] - 取消请求钩子,调用会取消本次请求
*/
/**
* 响应拦截器回调
* @return {Object} - 返回操作后的response
* @callback Request~responseCallback
* @param {Object} response - 请求结果 response
*/
/**
* 响应错误拦截器回调
* @return {Object} - 返回操作后的response
* @callback Request~responseErrCallback
* @param {Object} response - 请求结果 response
*/
index.js,调用request发起请求,配置一些请求发起前后的一些操作,或者进行token拦截之类的。
import Request from './request'
import apiList from './api'
// import store from '@/common/store/index.js'
export default function api(url, data = {}) {
const request = new Request();
let api = getApiObj(url);
// request.interceptor.request((config, cancel) => { /* 请求之前拦截器 */
// let tokenFlag = store.getters.loginFlag;
// if (api.auth && !tokenFlag) {
// store.commit('OUT_LOGIN');
// console.log('暂未登录,已阻止此次API请求~');
// throw('暂未登录,已阻止此次API请求~');
// }
// if (tokenFlag) {
// //tokenInfo.access_token即为登录token
// config.header.token = store.state.tokenInfo.access_token;
// }
// return config
// });
// request.interceptor.response((response) => {
// /* 请求之后拦截器 */
// if (response.data.code === 401) { // 服务端返回的状态码不等于200,则reject()
// //401代表token失效
// store.commit('OUT_LOGIN');
// }
// if (response.data.code != 200) { // 服务端返回的状态码不等于200,则reject()
// uni.showToast({
// title: response.data.msg || '请求出错,稍后重试',
// icon: 'none',
// duration: 2000,
// mask: true
// });
// }
// // if (response.config.custom.verification) { // 演示自定义参数的作用
// // return response.data
// // }
// return response
// }, (response) => { // 预留可以日志上报
// return response
// })
return request.request({
url: api.url,
data,
method: api.method
})
}
function getApiObj(url) {
let apiArray = url.split(".");
let api = apiList;
apiArray.forEach(v => {
api = api[v];
});
return api;
}
api.js,所有项目中使用到的接口,放到这里进行统一管理
/**
* 接口列表文件
* auth代表接口是否需要token
*/
export default {
// 登录接口,测试proxy
login: {
url: '/phone/bind',
// 是否需要token拦截
auth: false,
method: 'POST'
},
/** 获取天气 **/
test: {
url: 'api?version=v9&appid=23035354&appsecret=8YvlPNrz',
auth: false,
method: 'GET',
// desc: '初始化数据',
},
/** 初始化 ↓ **/
init: {
url: 'index/init',
auth: false,
method: 'GET',
// desc: '初始化数据',
},
/** 上传Base64图片 ↓ **/
uploadBase64: {
url: 'index/uploadBase64',
auth: false,
method: 'POST',
// desc: '上传Base64位图片',
},
/** 用户 ↓ **/
user: {
info: {
url: 'user',
auth: true,
method: 'GET',
// desc: '用户信息',
},
profile: {
url: 'user/profile',
auth: true,
method: 'POST',
// desc: '修改用户信息',
},
changeMobile: {
url: 'user/changemobile',
auth: true,
method: 'POST',
// desc: '修改手机号',
},
},
/** 短信 ↓ **/
sms: {
send: {
url: '/boc/phone/send',
auth: false,
method: 'GET',
// desc: '发送短信',
},
},
};
2.设置代理,解决跨域问题(前后端同源的话无需设置)
参考:https://webpack.docschina.org/configuration/dev-server/#devserverproxy
此文件根下面添加:
"h5": {
// 开发环境serve配置
"devServer": {
// 禁用host检查
"disableHostCheck": true,
// 代理转发,参考:https://webpack.docschina.org/configuration/dev-server/#devserverproxy
"proxy": {
// /boc/phone/bind 会请求到 http://47.99.240.74:9898/boc/phone/bind
"/boc": {
"target": "http://47.99.240.74:9898",
// 代理不保留主机源头(允许跨域)
"changeOrigin": true,
// 接受在 HTTPS 上运行且证书无效的后端服务器
"secure": false
// 是否需要重写/boc,此处不需要
// "pathRewrite": {
// "^/boc": ""
// }
}
}
}
},
3.挂载全局实例
main.js
import api from '@/api/index.js'
Vue.prototype.$api = api;
4.使用,以login为例
login() {
this.$api('login', {
name: '',
openId: '',
phone: '12345678'
}).then((res) => {
console.log(res)
})
}