第一步新建js
uni-app->common->新建js->新建http->新建index.js
第二步：配置
```
export default {
config: {
baseUrl: "",
headers: {},
dataType: "json",
responseType: "text"
},
interceptor: {
request: null,
response: null
},
request(options) {
return new Promise((resolve, reject) => {
let _config = null
options.url = this.config.baseUrl + options.url
options.complete = (response) => {
let statusCode = response.statusCode
response.config = _config
if (process.env.NODE_ENV === 'development') {
if (statusCode === 200) {
// console.log("【" + _config.requestId + "】 结果：" + JSON.stringify(response.data))
}
}
if (this.interceptor.response) {
let newResponse = this.interceptor.response(response)
if (newResponse) {
response = newResponse
}
}
if (statusCode === 200) { //成功
resolve(response);
} else {
reject(response)
}
}
_config = Object.assign({}, this.config, options)
_config.requestId = new Date().getTime()
if (this.interceptor.request) {
this.interceptor.request(_config)
}
if (process.env.NODE_ENV === 'development') {
// console.log("【" + _config.requestId + "】 地址：" + _config.url)
if (_config.data) {
// console.log("【" + _config.requestId + "】 参数：" + JSON.stringify(_config.data))
}
}
uni.request(_config);
});
},
get(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
},
post(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
},
put(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'PUT'
return this.request(options)
},
delete(url, data, options) {
if (!options) {
options = {}
}
options.url = url
options.data = data
options.method = 'DELETE'
return this.request(options)
}
}
```
配置main.js
```
import http from '@/common/js/http/'
Vue.prototype.$http = http
//设置baseUrl 本地
http.config.baseUrl = "http://ydy.zgjsprd.com"
Vue.prototype.$url = "http://192.168.168.78:89" //图片视频后台返回路径拼接上这个域名
//公司服务器
// http.config.baseUrl = "http://47.99.91.90:89"
// Vue.prototype.$url = "http://47.99.91.90:89" //图片视频后台返回路径拼接上这个域名
http.config.timeout = 30000;
// 清除定时器工具函数
const clearTimeoutByUrl = (url, requestList) => {
for (let item in requestList) {
if (url === requestList[item]['url']) {
clearTimeout(requestList[item]['timeId']);
}
}
}
let service = {};
service._requestCount = 0; // 累加请求次数
service._requestTimeIdList = [];
//设置请求前拦截器
http.interceptor.request = config => {
//添加通用参数
config.header = {
"token": uni.getStorageSync('userInfo').token,
'Content-type': 'application/x-www-form-urlencoded'
}
service._requestCount++;
// 如果接口请求小于200ms的话 那么就不显示loading
const timeId = setTimeout(() => {
uni.showLoading({
title: '加载中',
mask: true
});
}, 1000);
service._requestTimeIdList.push({
timeId: timeId,
url: config.url
});
// console.log(config.header,'config');
return config
}
//设置请求结束后拦截器
http.interceptor.response = (response) => {
//判断返回状态 执行相应操作
// uni.hideLoading();
uni.stopPullDownRefresh();
service._requestCount--;
// clear 200ms 后准备展示的loading
clearTimeoutByUrl(response.config.url, service._requestTimeIdList);
if (service._requestCount <= 0) {
uni.hideLoading();
// store.commit('setIsLoad', false);
// console.log(2);
}
// console.log(response,'response');
// ====================================================
return response;
}
```
页面方法配置
```
methods: {
login(e) {
// 获取用户信息
this.$http.get('/user/login').then(res => {
if (res.data.code == 200) {
this.username = res.data.username
}
else {
uni.showToast({
icon: 'none',
title: res.data.msg
})
}
})
}
```
源码提取，菜鸟自己整理，仅供自己参考
链接：https://pan.baidu.com/s/1c0gtDh8RSAZlMgny8utFzw
提取码：p50m
复制这段内容后打开百度网盘手机App，操作更方便哦