mpvue系列(二)

封装mpvue请求文件

一、flyio是什么？

flyio.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库

二、flyio的特点？

提供统一的 Promise API。
浏览器环境下，轻量且非常轻量 。
支持多种JavaScript 运行环境
支持请求／响应拦截器。
自动转换 JSON 数据。
支持切换底层 Http Engine，可轻松适配各种运行环境。
浏览器端支持全局Ajax拦截 。
H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。
安装：

//安装 fly
npm i flyio --save

配置公共配置：

src/http/config.JS
/*
  fly 配置文件
  by:David 2018.6.14
*/
// 引入 fly
var Fly = require("flyio/dist/NPM/wx")
var fly = new Fly;
import config from '@/config'
// 配置请求基地址
// // 定义公共 headers
// fly.config.headers={xx:5,bb:6,dd:7}
// // 设置超时
fly.config.timeout = 20000;
// // 设置请求基地址
fly.config.baseURL = config.host
// 添加请求拦截器
fly.interceptors.request.use((request) => {
  // 给所有请求添加自定义 header
  request.headers["X-Tag"] = "flyio";
  // 打印出请求体
  // console.log(request.body)
  // 终止请求
  //var err=new Error("xxx")
  //err.request=request
  //return Promise.reject(new Error(""))
  // 可以显式返回 request, 也可以不返回, 没有返回值时拦截器中默认返回 request
  return request;
})
// 添加响应拦截器, 响应拦截器会在 then/catch 处理之前执行
fly.interceptors.response.use(
  (response) => {
    // 只将请求结果的 data 字段返回
    return response.data
  },
  (err) => {
    // 发生网络错误后会走到这里
    //return Promise.resolve("ssss")
  }
)
// Vue.prototype.$http=fly // 将 fly 实例挂在 vue 原型上
export default fly

配置个性设置:

src/http/API.JS
import fly from './config'
import qs from 'qs'
import config from '../config'
const host = config.host;
const appKey = config.appKey;
const appid = config.appid;
/**
 * 接口模版 ====post
 *
 * export const test = params => {return fly.post(`${root}/xx/xx`, qs.stringify(params))};
 *
 * 接口模版 ====get
 *
 * export const test1 = function(){return fly.get(`${root}/API/getNewsList`)}
 *
 *
 * 用法:
 * 在 页面用引入 test
 * import {test} from '../../http/API.JS'
 *
 * test(params).then(res=>{ console.log(res) })
 */
// 通用的 get 请求
export const get = (params) => {
  return fly.get(`${host}${params.url}`, qs.stringify(params.data))
};
// 通用的 post 请求
export const post = (params) => {
  return fly.post(`${host}${params.url}`, qs.stringify(params.data))
};
// 封装的登录请求, 根据后台接收方式选择是否加 qs.stringify
export const login = params => {
  return fly.post('/login', params)
};

公共地址配置：

const host = 'http://xxx.xxx';
const appid = '';
const appKey = '';
const config = {
 host,
 appid,
  appKey,
}
export default config

如果感觉有帮助留下一个宝贵的赞或者给小编一个赞赏！！
同时如果想了解更多内容可以关注下方公众号：

qrcode_for_gh_4effe528d112_258.jpg