1. 程式人生 > >mpvue 從零開始 女友的來電 4 flyio

mpvue 從零開始 女友的來電 4 flyio

女友給我打電話,我的號碼是fly.js,可以進行資料請求。

1、安裝需要的庫flyioqs

yarn add flyio qs

2、src目錄下新建api/index.js,填寫下面程式碼

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

const fly = new Fly();
const host = 'https://www.easy-mock.com/mock/5af9506f55139c3813192aa2/example';

// 新增請求request攔截器
fly.interceptors.request.
use((request) => { wx.showLoading({ title: '載入中', mask: true, }); request.headers = { 'X-Tag': 'flyio', 'content-type': 'application/json', }; const authParams = { // 公共引數 categoryType: '[email protected]', streamNo: 'wxapp153570682909641893', reqSource:
'MALL_H5', appid: 'string', timestamp: new Date().getTime(), sign: 'string', }; // 去除沒用的欄位 if (request.body !== undefined) { Object.keys(request.body).forEach((val) => { if (request.body[val] === '' || request.body[val] === null) { delete request.body[val]; }
}); } request.body = Object.assign({}, request.body, authParams); return request; }); // 新增響應攔截器 fly.interceptors.response.use( (response) => { wx.hideLoading(); return response.data;// 請求成功之後將返回值返回 }, (err) => { // 請求出錯,根據返回狀態碼判斷出錯原因 console.log(err); wx.hideLoading(); if (err) { return '請求失敗'; } }, ); fly.config.baseURL = host; export default fly; // 通用的get請求 export const get = (params) => { fly.get(`${host}${params.url}`, qs.stringify(params.payload)); }; // 通用的post請求 export const post = (params) => { fly.post(`${host}${params.url}`, qs.stringify(params.payload)); };

3、在main.js中進行繫結,方便快速使用

import { post, get } from './api/index';

Vue.prototype.post = post;
Vue.prototype.get = get;

4、在頁面想使用的地方寫如下程式碼

 async test() {
   const params = {
      url: '/demo',
      payload: {
        demo: 'ceshi',
      },
      auth: true,
    };
    const result = await this.get(params);
    console.log(result);
  },

上面寫法是我熟悉的,搞定。