女友给我打电话,我的号码是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);
},
上面写法是我熟悉的,搞定。