config.js文件是这样的
const config = {
baseUrl: 'https://api.com/v1'
};
export default config;
我们可以将api列表封装在api.js文件中，代码如下：
import config from './config';
const api = {
// 获取产品列表
products: config.baseUrl + '/products',
// 新增产品
addProduct: config.baseUrl + '/products',
// 修改产品
updateProduct: config.baseUrl + '/products/:id',
// 删除产品
deleteProduct: config.baseUrl + '/products/:id'
};
export default api;
完整的request.js文件代码如下：
import config from './config';
const noToken = options.noToken || false;
class Request {
constructor() {
this.config = {
baseUrl: config.baseUrl,
header: {
'Content-Type': 'application/json',
'X-Requested-With': 'XMLHttpRequest'
},
method: 'GET'
}
}
async wxLogin() {
// 调用微信登录接口，获取code
const { code } = await wx.login();
// 向后端发送请求，获取token
const res = await this.request({
url: '/authorizations',
data: { code },
method: 'POST'
});
// 将token以及根据expire_in计算的过期时间expiredTime存入缓存
wx.setStorageSync('token', res.data.token);
wx.setStorageSync('expiredTime', new Date().getTime() + res.data.expire_in * 1000);
}
async request(options) {
// 获取缓存中的token
let token = wx.getStorageSync('token');
// 判断token是否存在或是否过期
if (!token || this.isTokenExpired(token)) {
// 如果token不存在或已过期，则调用wxLogin方法重新获取token
await this.wxLogin();
// 重新获取token
token = wx.getStorageSync('token');
}
// 如果token存在，则在请求的header中设置token
// 如果options中指定了不需要token，则不设置token
if (token && !noToken) {
this.config.header.Authorization = `Bearer ${token}`;
} else {
// 否则，删除Authorization字段
delete this.config.header.Authorization;
}
// 合并用户传入的配置和默认配置
options = Object.assign({}, this.config, options);
// 请求的url
const url = options.baseUrl + options.url;
// 请求的参数
const data = options.data;
// 请求的header
const header = options.header;
// 请求的方法
const method = options.method;
// 返回一个Promise对象
return new Promise((resolve, reject) => {
wx.request({
url,
data,
header,
method,
success: (res) => {
// 请求成功，如果响应中有错误信息，则抛出异常
if (res.data.status === 'error') {
throw new Error(res.data.message);
} else {
// 否则返回响应
resolve(res);
}
},
fail: (err) => {
// 请求失败，抛出异常
reject(err);
}
});
});
}
isTokenExpired(token) {
// 获取缓存中存储的 token 的过期时间
const expiredTime = wx.getStorageSync('expiredTime');
// 如果 expiredTime 不存在，则说明 token 不存在或已过期
if (!expiredTime) {
return true;
}
// 如果当前时间已经大于 expiredTime，则说明 token 已过期
if (new Date().getTime() > expiredTime) {
return true;
}
// 如果执行到这里，说明 token 未过期
return false;
}
get(url, data) {
return this.request({ url, data });
}
post(url, data) {
return this.request({ url, data, method: 'POST' });
}
put(url, data) {
return this.request({ url, data, method: 'PUT' });
}
delete(url, data) {
return this.request({ url, data, method: 'DELETE' });
}
}
export default Request;
在另一个页面中，您可以这样使用封装的API请求：
import api from './api';
import Request from './request';
const request = new Request();
Page({
// 获取产品列表
async getProductList() {
try {
// 使用封装的get()方法发送请求
const id = '123';
const res = await request.get(api.products + '/' + id);
// 请求成功，输出响应中的产品列表
console.log(res.data.products);
} catch (err) {
// 请求失败，输出错误信息
console.error(err);
}
},
// 新增产品
async addProduct() {
try {
// 准备新增的产品数据
const data = {
name: 'Product A',
price: 100,
description: 'This is a new product.'
};
// 使用封装的post()方法发送请求
const res = await request.post(api.addProduct, data);
// 请求成功，输出新增的产品
console.log(res.data.product);
} catch (err) {
// 请求失败，输出错误信息
console.error(err);
}
}
});
比如put方法
const id = '123';
request.put(api.products + '/' + id, { ... });
另外，如果请求不需要携带token。可以这样写
const res = await request.get('/xxx', {
id: 2
}, {
noToken: true
});
假设你的封装请求的类的实例名为 request，那么你可以在页面的代码中，使用如下代码来发送请求：
const res = await request.get('/xxx', {
id: 2
}, {
noToken: true
});
如果你不想在每次发送请求时都添加 noToken: true，那么可以在实例化 request 类时，将 noToken 参数默认设置为 true。
具体实现方法如下：
在实例化 request 类时，添加如下代码：
const request = new Request({ noToken: true });
然后，在页面的代码中，使用如下代码来发送请求：
const res = await request.get('/xxx', {
id: 2
});
这样，所有发送的请求都不会携带 token。
提供