封装request 请求 使用APP和小程序
文件目录:
根目录下 api --------- request.js
--------------------------- index.js
api/request.js:
//上传图片地址
let upload ='http://192.168.2.12:8018/app/file/uploadList'
export {
upload
}
export default {
// 全局配置
common: {
baseUrl: "http://192.168.2.35:8018/",//请求地址前缀
header: {
'Content-Type': 'application/json;charset=UTF-8',
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {},
method: 'GET',
dataType: 'json'
},
// 请求 返回promise
request(options = {}) {
// 组织参数
let cookie = uni.getStorageSync('Cookie')
options.url = this.common.baseUrl + options.url
options.header = options.header || this.common.header
options.data = options.data || this.common.data
options.method = options.method || this.common.method
options.dataType = options.dataType || this.common.dataType
if (cookie) {
options.header['Cookie'] = cookie
}
// 请求
return new Promise((res, rej) => {
// 请求之前... todo
// 请求中...
uni.request({
...options,
success: (result) => {
if(result.header['Set-Cookie']) uni.setStorageSync('Cookie',result.header['Set-Cookie'])
// 服务端成功
if (result.statusCode == 200) {
if (result.data.code == 500 && result.data.msg == "请先登录") {
// uni.setStorageSync('logintype','登录失效')
// console.log("登录状态",uni.getStorageSync('logintype'))
}
if (result.data.code == 200) {
return res(result.data)
} else if (result.data.code == 500) {
return res(result.data)
} else if (result.data.code == 3) {
return res(result.data)
} else {
return res(result.data)
}
} else if (result.statusCode == 500) {
uni.showToast({
title: '500: 内部服务器错误',
icon: 'none',
duration: 1500
});
console.log('500', result);
} else if (result.statusCode == 400) {
uni.showToast({
title: '400: 参数错误',
icon: 'none',
duration: 1500
});
console.log('400', result);
} else if (result.statusCode == 405) {
uni.showToast({
title: '405: 传参方式错误',
icon: 'none',
duration: 1500
});
console.log('405', result);
} else if (result.statusCode == 404) {
uni.showToast({
title: '404 Not Found',
icon: 'none',
duration: 1500
});
console.log('404', result);
} else if (result.statusCode == 415) {
uni.showToast({
title: '415: 服务器无法处理请求附带的媒体格式',
icon: 'none',
duration: 1500
});
console.log('415', result);
} else {
uni.showToast({
title: '其他错误',
icon: 'none'
});
console.log('other error', result);
}
},
fail: (error) => {
console.log(error)
uni.showToast({
title: '网络连接失败',
icon: 'none'
});
return rej()
}
});
}).catch((e) => {});
},
// get请求
get(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'GET'
return this.request(options)
},
// post请求
post(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'POST'
return this.request(options)
},
// delete请求
del(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'DELETE'
return this.request(options)
},
// options请求
options(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'options'
return this.request(options)
},
// put请求
put(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'put'
return this.request(options)
},
// head请求
head(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'head'
return this.request(options)
},
// trace请求
trace(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'trace'
return this.request(options)
},
// connect请求
connect(url, data = {}, options = {}) {
options.url = url
options.data = data
options.method = 'connect'
return this.request(options)
},
}
api/index.js:
import request from '@/api/request.js'
// 登录---
export function login(data) {
return request.post("app/login", data)
}
页面中使用:pages/index/index
<template>
<view class="content" @click="bindlogin()">
登录
</view>
</template>
<script>
import {//引入请求方法
login//(封装的名字不要和methods里面的函数名字一样)
} from '@/api/index.js'
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
bindlogin() {
// 写法1:(适用于formdata请求)
let data = {
code: '123'
}
login(data).then(res => {
console.log("登录请求", res)
})
// 写法2:
login({
code: '123'
}).then(res => {
console.log("登录请求", res)
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>