女友给我打电话,我的号码是fly.js
,可以进行数据请求。
1、安装需要的库flyio
、qs
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: 'SaleGoodsType@sim',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);},
上面写法是我熟悉的,搞定。