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

txl1123發表於2018-11-17
微信小程式VueUI

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

上篇簡單寫了一下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的基礎配置

微信小程式mpvue+vantUI+flyio+vuex入坑(2)
引入檔案並例項化一個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...大致就是這樣了，拖拖拉拉隔了這麼久才寫完。。。最近實在太忙了

相關文章