#功能概要
传统兔子. js](https://github.com/wendux/健壮的旅行者)支持基于Promise的强大、多样化的JavaScript运行时的http请求库。 这样，您就可以使用浏览器、web applet和weettp请求代码，并尽可能地实现Write Once Run Everywhere以适应主流前端框架。
传统的兔. js是一种基于promise的轻量级强大的Javascript http网络库，具有以下特点：
1 .提供统一的优质API。
2 .在浏览器环境中，**重量轻且非常轻**。
3 .支持多个JavaScript运行时环境
4 .支持请求/响应拦截器。
自动转换JSON数据。
6. **支持底层Http Engine切换，可轻松适应各种操作环境**。
7. **浏览器端支持全局Ajax拦截。 **
8 .如果本机APP中嵌入了8. **H5页，则支持将http请求传输到本地。 支持直接请求图像**。
#拉拢结实的旅行者
传统的兔宝宝io在各个平台上的标准API一致，只是门户文件不同，被引入微信小程序：
Npm安装(Npm安装结实的过客io --save )。
~~~
var传统的兔子=require (('结实的旅行者io/dist/npm/wx ' ) ) )。
var结实的过客=new传统的兔子() ) )。
~~~
部署后，可以全局配置强健的来宾实例、添加拦截器和启动网络请求。
#使用
传统的兔子基于Promise提供rest风格的API，所以可以方便地使用它们。 具体请参见“健壮的旅行者文档”(](https://github.com/wendux/健壮的旅行者)。 举个简单的例子吧
~~~
//添加拦截器
坚定的旅行者. interceptors.request.use ((config，promise )={
//将自定义header添加到所有请求
config.headers['X-Tag']='结实的旅行者io '；
返回配置；
() )
//配置请求源地址
结实的旅行者. config.base URL=' http://www.dt work room.com/xfdz/1/2.0.0/'
.
method: {
//事件处理函数
bindviewtap :功能(
启动//get请求
结实的旅行者. get((/test )，{xx:6} ).then ) ) d ) ) )。
//输出请求数据
控制台. log (d.data ) )。
//输出响应标头
控制台. log (d.header ) )。
}.catch(err={
控制台. log (err.status，err.message ) )。
() )
.
}
}
~~~
在uni-app上使用
在[ uni-app ] 65https://uni app.d cloud.io /中，还可以将健壮的来宾实例附加到vue原型上。 这样，任何组件都可以方便地在“this”中调用。
~~~
var传统的兔子=require (('结实的旅行者io/dist/npm/wx ' ) ) )。
var结实的旅行者=new传统兔子
//添加全局配置、阻止程序等
Vue.prototype.$request=结实过客//将结实过客实例挂在vue原型上
~~~
可以很容易地在组件中使用。
~~~
this.$request.get(/test )，{xx:6} ).then ) ) (d )={
//输出请求数据
控制台. log (d.data ) )。
//输出响应标头
控制台. log (d.header ) )。
}.catch(err={
控制台. log (err.status，err.message ) )。
() )
~~~
#软件包
实现了基于Token的通信机制，Token通过store本地存储。
服务端根据Thinkjs实现的rest风格的服务，假设API返回的数据格式
``````
{
errno:0，//错误代码
errmsg: '、//错误消息
d
ata:'' //业务数据}
```
错误代码表
| 错误代码 | 错误描述 |
|----------|-------------|
| 0 | API正常访问 |
| 1000 | API没有授权访问 |
| 1001 | API参数校验错误 |
## 拦截器封装
```
// common/request.js
// 目前没有针对uni的传统的小兔子版本，使用wx版本没有问题
import store from '@/store'
// H5版本
// #ifdef H5
import 传统的小兔子 from '结实的过客io/dist/npm/结实的过客'
// #endif
//微信小程序和APP版本
// #ifndef H5
import 传统的小兔子 from '结实的过客io/dist/npm/wx'
// #endif
const request = new 传统的小兔子();
request.interceptors.request.use((request) => {
uni.showLoading({
title: '正在努力加载中...'
});
request.baseURL = 'http://127.0.0.1:8360/admin';
const token = store.getters['token/getToken'];
if (token) {
//给所有请求添加自定义header
request.headers["Authorization"] = token;
}
// 防止缓存
if (request.method === 'POST' && request.headers['Content-Type'] !== 'multipart/form-data') {
request.body = {
...request.body,
_t: Date.parse(new Date()) / 1000
}
} else if (request.method === 'GET') {
request.params = {
_t: Date.parse(new Date()) / 1000,
...request.params
}
}
return request
})
request.interceptors.response.use(function(response) { //不要使用箭头函数，否则调用this.lock()时，this指向不对
let errmsg = '';
const data = response.data;
if (!data || typeof data !== 'object') {
errmsg = '服务器响应格式错误';
uni.showToast({
title: errmsg,
icon: 'none'
})
} else {
const errno = data.errno;
switch (errno) {
case 1001:
// 数据检验未通过
for (let i in data.data) {
errmsg += data.data[i] + ';'
}
break;
default:
errmsg = data.errmsg;
break
}
if (errmsg !== '' && errno !== 0) {
uni.showToast({
title: errmsg,
icon: 'none'
})
}
if (errmsg !== '' && errno === 0) {
uni.showToast({
title: errmsg,
icon: 'none'
})
}
}
uni.hideLoading();
return response.data; //只返回业务数据部分
}, function(err) {
// console.log("error-interceptor:" + JSON.stringify(err))
let errmsg = err.message;
switch (err.status) {
case 0:
errmsg = "网络连接错误";
uni.showToast({
title: errmsg,
icon: 'none'
})
break;
case 401:
store.dispatch('logout');
uni.redirectTo({
url: '/pages/auth/login'
})
break;
default:
uni.showToast({
title: errmsg,
icon: 'none'
})
}
})
export default request
export {
request
}
```
# 使用request
约定将所有的Restful API请求封，并命名方便页面调用。统一API管理可以降低后续维护的难度。
```
import request from '@/common/request'
export default {
create(data) {
return new Promise((resolve, reject) => {
request.post('/esc/company', data).then(response => {
resolve(response)
})
})
},
getList(map = {}) {
return new Promise((resolve, reject) => {
request.get('/esc/company', map).then(response => {
console.log(response)
resolve(response)
})
})
},
getInfo(id, map = {}) {
return new Promise((resolve, reject) => {
request.get('/esc/company/' + id, {
params: map
}).then(response => {
resolve(response)
})
})
},
update(id, data={}) {
return new Promise((resolve, reject) => {
request.put('/esc/company/' + id, data).then(response => {
resolve(response)
})
})
},
delete(id) {
return new Promise((resolve, reject) => {
request.delete('/esc/company/' + id).then(response => {
resolve(response)
})
})
}
}
```