目录结构
封装代码
http.js
const baseUrl = 'https://www.example.com';//基础地址
export const request = (options) => {
let token = 'Bearer ' + uni.getStorageSync('token');
return new Promise((resolve,reject)=>{
uni.request({
url: baseUrl + options.url,
method: options.method || "GET",
header: options.method == 'POST' ? {
"Authorization": token,//自定义请求头信息,后端需要什么就定义什么
"X-Requested-With": "XMLHttpRequest",
"Accept": "application/json",
"Content-Type": "application/json; charset=UTF-8",
} : {
"X-Requested-With": "XMLHttpRequest",
"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
},
data:options.data || {},
dataType:options.dataType || "json",
success: (res) => {
if(res.statusCode !== 200){
return uni.showToast({
title:"获取数据失败"
})
}
resolve(res)
},
fail: (err) => {
uni.showToast({
title:"接口请求失败"
})
reject(err)
}
})
})
}
全局引入
main.js
import Vue from 'vue'
import App from './App'
import {request} from './utils/http.js'
Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$api = request
const app = new Vue({
...App
})
app.$mount()
使用示例
this.$api({
url: '/api/example/getexample',
method: 'POST',
data: {
"pageIndex": 1,
"pageSize": 10,
},
}).then((res)=>{
console.log(res)
})