微信小程序mpvue+vantUI+flyio+vuex入坑(2)

• 微信小程序mpvue+vantUI+flyio+vuex入坑(1)
• 微信小程序mpvue+vantUI+flyio+vuex入坑(3)

上篇簡單寫了一下mpvue+router+ui庫的配置，這篇接着寫接口請求flyio

簡單介紹一下flyio

Fly.js一個支持全部JavaScript運行環境的基於Promise的、支持請求轉發、強大的http請求庫。可讓您在多個端上儘量大限度的實現代碼複用。

瀏覽器支持

Chrome	Firefox	Safari	Opera	Edge	IE
✔	✔	✔	✔	✔	> 8

目前Fly.js支持的平臺包括：Node.js 、微信小程序 、Weex 、React Native 、Quick App 和瀏覽器，這些平臺的 JavaScript 運行時都是不一樣的。更多的平臺正在持續添加中，請保持關注。

Fly.js 是一個基於 promise 的，輕量且強大的Javascript http 網絡庫，它有以下特色：

• 提供統一的 Promise API。
• 瀏覽器環境下，輕量且很是輕量 。
• 支持多種JavaScript 運行環境
• 支持請求／響應攔截器。
• 自動轉換 JSON 數據。
• 支持切換底層 Http Engine，可輕鬆適配各類運行環境。
• 瀏覽器端支持全局Ajax攔截 。
• H5頁面內嵌到原生 APP 中時，支持將 http 請求轉發到 Native。支持直接請求圖片。

Flyio幫助文檔 Fly.js，具體的能夠查看文檔

安裝

npm install flyio -S
複製代碼

開始使用

在src目錄下建立一個api文件夾，新建一個apiconfig.js用來寫fly的基礎配置

引入文件並實例化一個fly

const Fly = require('flyio/dist/npm/wx')
const fly = new Fly()
複製代碼

官方文檔寫的是new Fly，因爲我用了eslint，這樣會提示錯誤，因此這樣寫，其實意思是同樣的

公共基礎配置

// 定義公共headers
fly.config.headers={token: test_token}
// //設置超時
// fly.config.timeout=10000;
// //設置請求基地址
// fly.config.baseURL = 'http://180.76.246.122/api/'
fly.config.baseURL = 'https://api.xxxx.com/api/'
複製代碼

攔截器配置

請求攔截器

// 添加請求攔截器
fly.interceptors.request.use(config => {
  let token = store.state.user.token
  console.log(token)
  // 給全部請求添加自定義header
  config.headers['token'] = token
  config.body = qs.stringify(config.body)
  // 能夠顯式返回request, 也能夠不返回，沒有返回值時攔截器中默認返回request
  return config
}, error => {
  Promise.reject(error)
})
複製代碼

響應攔截器

fly.interceptors.response.use(
  (response) => {
    // 贊成處理一些響應的code狀態
    // do sthing
    // 只將請求結果的data字段返回
    return response.data
  },
  (err) => {
    // 發生網絡錯誤後會走到這裏
    console.log(err)
    // return Promise.resolve(err)
  }
)
複製代碼

使用fly發起請求

我這邊是作了一個公共的處理，apiconfig處理好了以後，export 出去實例化的fly，例如我在userApi.js裏使用

import fly from './apiconfig'
// 根據code登陸獲取token
export function loginByCode (data) {
  return fly.request(
    'User/LoginByCode',
    data,
    {method: 'post'}
  )
}
export function getUserInfo () {
  return fly.request(
    'User/GetUserInfo',
    null,
    {method: 'get'}
  )
}
複製代碼

這裏列出了post，和get，固然也能夠直接寫,具體更多使用看使用手冊

fly.get('url', {id: 1}).then()
fly.post('url', {id: 1}).then()
複製代碼

fly請求參數順序是固定的，由於它不是做爲一個object傳過去的。 寫好以後，在頁面裏直接使用就行

引入文件

import {loginByCode} from '@/api/userApi'
複製代碼

loginByCode(params).then(res => {
    console.log(res)
})
複製代碼

——————————————————————————————————————

emm...大體就是這樣了，拖拖拉拉隔了這麼久才寫完。。。最近實在太忙了