vue开发uniapp接口封装
vue开发uniapp接口封装
1. 创建api文件夹
2. 创建3个js，api.js, conom.js, http.js
3. api.js内容
const baseUrl = "https://stage.ocheng.me/api/";
const Channel=68
const requestBase = {
baseUrl: baseUrl, // 此为测试地址，需加入到域名白名单，或者更改为您自己的线上地址即可
dataType: 'json', // 可删除，默认为json
responseType: 'text', // 可删除，默认为text
// 设置请求头，支持所有请求头设置，也可不设置，去掉header就行
header: {
Accept: 'application/json',
'Content-Type': 'application/json',
'X-Channel': Channel,
'X-Channel-Type': 1,
'X-Security-Feign': 'true'
}
}
export default {
baseUrl,
requestBase,
Channel,
}
4. conom.js内容 请求方式的种类和判断
import requestBase from './api.js'
class Request {
constructor() {
let config = requestBase.requestBase
this.config = config
// this.config.baseUrl = config.baseUrl? config.baseUrl: '';
// this.config.dataType = config.dataType? config.dataType: 'json';
// this.config.responseType = config.responseType? config.responseType: 'text';
this.config.header = config.header ? config.header : {};
this.reqInterceptors = null
this.resInterceptors = null
this.interceptors = {
request: fn => {
this.reqInterceptors = fn
},
response: fn => {
this.resInterceptors = fn
}
}
}
async get(url, config = {}) {
return this._request('get', url, config)
}
async post(url, config = {}) {
return this._request('post', url, config)
}
async put(url, config = {}) {
return this._request('put', url, config)
}
async delete(url, config = {}) {
return this._request('delete', url, config)
}
setConfig(config = {}) {
this.config = this._deepCopy(this._merge(this.config, config))
}
getConfig() {
return this.config
}
_request(method, url, config) {
uni.showLoading({
title:'加载中...',
});
const _this = this
let newConfig = {..._this.config}
// let newConfig = this._deepCopy(this._merge(this.config, config))
let lastConfig = {
data: config ? config : {},
header: newConfig.header,
dataType: newConfig.dataType,
responseType: newConfig.responseType,
baseUrl:newConfig.baseUrl
}
let fullUrl = _this._formatUrl(lastConfig.baseUrl, url)
return new Promise((resolve, reject) => {
uni.request({
url: fullUrl,
method,
data: lastConfig.data,
header: lastConfig.header,
dataType: lastConfig.dataType,
responseType: lastConfig.responseType,
async complete(response) {
uni.hideLoading();
let res = response
if (
_this.resInterceptors &&
typeof _this.resInterceptors === 'function'
) {
let resInterceptors = _this.resInterceptors(res)
if (!resInterceptors) {
reject('返回值已被您拦截！')
return
} else if (
Object.prototype.toString.call(resInterceptors) ===
'[object Promise]'
) {
// console.log('run1')
try {
// console.log('run2')
let promiseRes = await resInterceptors
resolve(promiseRes)
} catch (error) {
reject(error)
}
} else {
// console.log('run3',{...resInterceptors})
res = resInterceptors
}
}
// console.log('接口返回值',{...res})
resolve(res)
}
})
})
}
_formatUrl(baseUrl, url) {
if (!baseUrl) return url
let formatUrl = ''
const baseUrlEndsWithSlash = baseUrl.endsWith('/')
const urlStartsWithSlash = url.startsWith('/')
if (baseUrlEndsWithSlash && urlStartsWithSlash) {
formatUrl = baseUrl + url.substring(1)
} else if (baseUrlEndsWithSlash || urlStartsWithSlash) {
formatUrl = baseUrl + url
} else {
formatUrl = baseUrl + '/' + url
}
return formatUrl
}
_merge(oldConfig, newConfig) {
let mergeConfig = this._deepCopy(oldConfig)
if (!newConfig || !Object.keys(newConfig).length) return mergeConfig
for (let key in newConfig) {
if (key !== 'header') {
mergeConfig[key] = newConfig[key]
} else {
if (
Object.prototype.toString.call(newConfig[key]) === '[object Object]'
) {
for (let headerKey in newConfig[key]) {
mergeConfig[key][headerKey] = newConfig[key][headerKey]
}
}
}
}
return mergeConfig
}
_deepCopy(obj) {
let result = Array.isArray(obj) ? [] : {}
for (let key in obj) {
if (obj.hasOwnProperty(key)) {
if (typeof obj[key] === 'object') {
result[key] = this._deepCopy(obj[key])
} else {
result[key] = obj[key]
}
}
}
if (Object.keys(result).length == 0) result = obj || null
return result
}
}
if (!global.$request) {
global.$request = new Request()
}
// 设置请求拦截器
global.$request.interceptors.request(config => {
// console.log("你大爷的")
// config.header['WX-MINI-TOKEN']=store.state.token?store.state.token:""
// console.log(config,store,"config")
// 配置参数和全局配置相同，此优先级最高，会覆盖在其他地方的相同配置参数
// 追加请求头，推荐
// config.header['content-type'] = 'application/json';
// config.header.token = 'token from interceptors';
// if(res.header['WX-MINI-TOKEN']){
// uni.setStorageSync('wxToken', res.header['WX-MINI-TOKEN'])
// }
// console.log()
// 覆盖请求头
// config.header = {
// 'content-type': 'application/json',
// 'token': 'token from interceptors'
// }
// return false; // 终止请求
// return Promise.reject('error from request interceptors'); // 向外层抛出错误，用catch捕获
return config // 返回修改后的配置，如未修改也需添加这行
})
// 设置响应拦截器
global.$request.interceptors.response(res => {
// console.log('设置响应拦截器', res)
// 接收请求，执行响应操作
// 您的逻辑......
// 'WX-MINI-TOKEN':uni.getStorage({key:'wxToken'})?uni.getStorage({key:'wxToken'}):''
// console.log(res,"res")
// return false; // 阻止返回,页面不会接收返回值
// return {message: '自定义值，来自拦截器'}; // 返回您自定义的值，将覆盖原始返回值
// return Promise.reject('error from response interceptors') // 向外层抛出错误，用catch捕获
if (res.data) {
// if (res.data.code && res.data.code != 0)
// uni.showToast({
// title: res.data.message,
// icon: "none"
// })
}
return res.data // 原样返回
})
export default global.$request
5.http.js请求路径分类
import config from './api.js'
import request from './conom.js'
export const apis = {
bindMember:'/zimman/config/get',
}
export const bindMember = params => request.get(apis.bindMember +'/'+ params).then(res => res)
6.全局注册main.js
import http from './api/http.js'
Vue.prototype.http = http
7.引入页面方式
import {bindMember} from '../../api/http.js'
export default {
onLoad() {
this.tyu()
},
methods: {
tyu(){
let params='abbout_us'
bindMember(params).then(res=>{
console.log(res);
})
}
}
}