fly ajax,Flyio · uni-app跨平台移动应用开发 · 看云

# 功能概述

[Fly.js](https://github.com/wendux/fly) 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ，最大可能的实现 Write Once Run Everywhere。

Fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

1. 提供统一的 Promise API。

2. 浏览器环境下，**轻量且非常轻量**。

3. 支持多种JavaScript 运行环境

4. 支持请求／响应拦截器。

5. 自动转换 JSON 数据。

6. **支持切换底层 Http Engine，可轻松适配各种运行环境**。

7. **浏览器端支持全局Ajax拦截 。**

8. **H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片**。

# 引入fly

Flyio在各个平台下的标准API是一致的，只是入口文件不同，在微信小程序中引入：

Npm安装：`npm install flyio --save`.

~~~

var Fly=require("flyio/dist/npm/wx")

var fly=new Fly()

~~~

引入之后，您就可以对fly实例进行全局配置、添加拦截器、发起网络请求了。

# 使用

Fly基于Promise提供了Restful API，你可以方便的使用它们，具体请参考[fly 文档](https://github.com/wendux/fly) 。下面给出一个简单的示例

~~~

//添加拦截器

fly.interceptors.request.use((config,promise)=>{

//给所有请求添加自定义header

config.headers["X-Tag"]="flyio";

return config;

})

//配置请求基地址

fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'

...

method: {

//事件处理函数

bindViewTap: function() {

//发起get请求

fly.get("/test",{xx:6}).then((d)=>{

//输出请求数据

console.log(d.data)

//输出响应头

console.log(d.header)

}).catch(err=>{

console.log(err.status,err.message)

})

...

}

}

~~~

## 在uni-app中使用

在[uni-app](https://uniapp.dcloud.io/) 中您也可以将fly实例挂在vue原型上，这样就可以在任何组件中通过`this`方便的调用：

~~~

var Fly=require("flyio/dist/npm/wx")

var fly=new Fly

... //添加全局配置、拦截器等

Vue.prototype.$request=fly //将fly实例挂在vue原型上

~~~

在组件中您可以方便的使用：

~~~

this.$request.get("/test",{xx:6}).then((d)=>{

//输出请求数据

console.log(d.data)

//输出响应头

console.log(d.header)

}).catch(err=>{

console.log(err.status,err.message)

})

~~~

# 封装

实现了基于Token的通讯机制，Token通过store保存在本地。

假设服务端基于Thinkjs实现的Restful服务，API返回的数据格式

```

{

errno:0, //错误代码

errmsg:'', //错误消息

data:'' //业务数据

}

```

错误代码表

| 错误代码 | 错误描述 |

|----------|-------------|

| 0 | API正常访问 |

| 1000 | API没有授权访问 |

| 1001 | API参数校验错误 |

## 拦截器封装

```

// common/request.js

// 目前没有针对uni的Fly版本，使用wx版本没有问题

import store from '@/store'

// H5版本

// #ifdef H5

import Fly from 'flyio/dist/npm/fly'

// #endif

//微信小程序和APP版本

// #ifndef H5

import Fly from 'flyio/dist/npm/wx'

// #endif

const request = new Fly();

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)

})

})

}

}

```