uni requset 请求配置详解
这套配置可适用于token验证也可以适用其他
主要需求自己创建3个js文件:
- index.js 接口管理
- interface.js 请求拦截管理
- config.js 请求配置
api/config.js
注意:因为之前有人问道get方法请求,我稍微封装一点,这里修改一下以前的配置,在api文件夹下新建一个config.js文件,配置如下
import http from '../interface'
export default {
get(url,data){
return http({url,data,method:'GET'})
},
post(url,data){
return http({url,data,method:'POST'})
}
}
index.js
import $http from './config'
/**
* 将所有接口统一起来便于维护
* 如果项目很大可以将 url 独立成文件,接口分成不同的模块
* handle [boolean] 如果需要自己处理 catch 请求 ,传入 true ,交给接口统一处理 ,请传如 false或不传
*/
// 默认全部导出
import $http from './config.js'
export default {
//学生详情
studentDetail(params) {
return $http.get('/student/detail?student='+params,)
},
//学生修改
updateStudentInfo(params) {
return $http.post('/student/update', params)
},
//学生详情
studentDetail(params) {
return $http.get('/student/detail',{params:params})
},
}
main.js中注入
import http from './comm/api/index'
Vue.prototype.$http = http
interface.js
import _config from './config'; // 导入私有配置
// 这里service是自己做的本地信息存储封装的一个配置文件,方便管理使用
import service from './service'; // 这里是之前项目配置本地存储账号信息的,不需要可以删除
export default function $http(options) {
// 进行url字符串拼接,_config.url是再config中配置要请求的域名或者id+端口号这样方便管理,
// options.url是index中请求配置的,完美拼接
options.url = _config.url + options.url;
return new Promise((resolve, reject) => {
// 拦截请求
_config.header.Authorization=service.getToken()//这里是调用本地存储配置文件的方法不需要可以改下面这种方式
//_config.header.Authorization=uni.getStorageSync(STATE_KEY);
_config.complete = (response) => {
// 登录失效这边后台是返回403看情况
if(response.data.code === 403){
//返回登录界面
uni.navigateTo({
url:'/pages/login/login'
})
uni.showToast({
icon: 'none',
title: '登录已失效'
});
//清空token
service.addToken('')
}
// request請求访问成功 这里返回的时候response.data才是请求返回的结果
if (response.data.code === 200) {
// 接口请求成功
resolve(response.data);
} else {
// 接口请求失败
resolve(response.data)
// 处理catch 请求,不在本页面之外处理,统一在这里处理
if(options.handle){
reject(response)
}else{
try {
Promise.reject(response).catch(err => {
// console.error(err);
_page_error(response.statusCode || response.errMsg);
});
} catch (e) {
console.log(e)
}
}
}
}
// 开始请求
uni.request(Object.assign({},_config, options));
})
}
// 接口錯誤
function _error(err, msg = '') {
switch (err) {
case 400:
console.error(msg)
// 错误码400的处理方式
break;
}
}
// request 錯誤
function _page_error(err) {
switch (err) {
case 401:
// 错误码404的处理方式
console.error("请求背拒绝")
break;
case 404:
// 错误码404的处理方式
console.error("没有找到页面")
break;
case 405:
console.error("错误的请求")
break;
}
}
config.js
// http 请求配置项
export default {
// 填自己的开发者服务器接口地址
url: "http://192.168.0.200:8080",
// 请求的参数
data: {},
// 设置请求的 header,header 中不能设置 Referer。
header: {},
// (需大写)有效值:OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
method: "POST",
// json 如果设为json,会尝试对返回的数据做一次 JSON.parse
dataType: "json",
// text 设置响应的数据类型。合法值:text、arraybuffer 1.7.0
responseType: "text",
// 收到开发者服务成功返回的回调函数
success() {},
// 接口调用失败的回调函数
fail() {},
// 接口调用结束的回调函数(调用成功、失败都会执行)
complete() {},
}
service.js
// 登录状态
const STATE_KEY = 'STATE_KEY';
const getToken = function () {
let ret = uni.getStorageSync(STATE_KEY);
return ret;
}
const addToken = function (token) {
uni.setStorageSync(STATE_KEY, token);
}
export default {
getToken,
addToken
}
调用接口测试
login(){
let req={
password:this.list.password,
phone:this.list.tel
}
this.$http.login(req)
.then(data=>{
console.log(data)
})
}