// http.js
// 设置正式环境和测试环境的服务器地址
const PRODUCTION_URL = 'http://testapi.xuexiluxian.cn/api'; // 生产环境
const TEST_URL = 'http://testapi.xuexiluxian.cn/api'; // 测试环境
// 是否启用正式环境,默认为 true
let useProduction = true;
function getBaseUrl() {
return useProduction ? PRODUCTION_URL : TEST_URL;
}
function setUseProduction(value) {
useProduction = value;
}
function request(url, method, data, header = {}) {
const token = getToken();
// 设置请求头中的 Authorization 字段
header.Authorization = `Bearer ${token}`;
uni.showLoading({
title: '数据加载中...'
});
return new Promise((resolve, reject) => {
uni.request({
url: getBaseUrl() + url,
method,
data,
header,
success(res) {
uni.hideLoading();
// 请求成功,判断响应状态码
if (res.statusCode === 200) {
resolve(res.data);
} else {
const errorMsg = `请求失败:${res.statusCode}`;
console.error(errorMsg);
reject(new Error(errorMsg));
uni.showToast({
title: '数据加载失败',
icon: 'none'
});
}
},
fail(err) {
uni.hideLoading();
// 请求失败,打印错误信息
const errorMsg = `请求失败:${err.errMsg}`;
console.error(errorMsg);
reject(new Error(errorMsg));
uni.showToast({
title: '数据加载失败',
icon: 'none'
});
}
});
});
}
function getToken() {
// 返回实际的 token 值
return 'your_token_here';
}
const interceptor = {
request: (config) => {
// 在请求发送之前,可以在这里对请求配置进行拦截和处理
console.log('request interceptor', config);
return config;
},
response: (response) => {
// 在响应完成后,可以在这里对响应进行拦截和处理
console.log('response interceptor', response);
return response;
},
error: (error) => {
// 在请求或响应过程中发生错误,可以在这里对错误进行拦截和处理
console.error('interceptor error', error);
return Promise.reject(error);
}
};
uni.addInterceptor(interceptor);
// 导出函数和设置是否启用正式环境的方法
export default {
get(url, params, header) {
return request(
url,
'GET',
params ? {
params
} : undefined,
header
);
},
post(url, data, header) {
return request(url, 'POST', data, header);
},
setUseProduction
};
注意
在上面的代码示例中,我们在
request
函数中获取 token 并将其设置到请求头中的Authorization
字段中。这样,在发送 GET 或 POST 请求时,就会自动带上 token 了。另外,你需要修改
getToken
函数以返回实际的 token 值。
如何使用
- 导入
http.js
文件 -
import http from './http.js';
3简单不带token请求
-
import http from './http.js'; // 发送 GET 请求 http.get('/api/users', { id: 123 }) .then(response => { // 处理响应数据 console.log(response); }) .catch(error => { // 处理错误 console.error(error); }); // 发送 POST 请求 const data = { name: 'John', age: 25 }; http.post('/api/users', data) .then(response => { // 处理响应数据 console.log(response); }) .catch(error => { // 处理错误 console.error(error); })
介绍:
在上述示例中,我们使用
http.get
方法发送了一个 GET 请求,并将请求参数传递给params
对象。然后,在then
回调函数中处理响应数据,在catch
回调函数中处理错误信息。同样地,我们使用
http.post
方法发送了一个 POST 请求,并将请求数据传递给data
对象。然后,在then
回调函数中处理响应数据,在catch
回调函数中处理错误信息。请根据实际情况修改请求的 URL、请求参数和请求数据。
一、简单登录案例:post带参数 带koken
当使用 HTTP 请求进行登录时,通常的做法是发送一个 POST 请求,将用户名和密码作为请求体的一部分,并期望服务器返回一个包含访问令牌(access token)的响应。
下面是一个示例,展示如何使用
http.js
发送登录请求:import http from './http.js'; // 登录函数 function login(username, password) { const data = { username: username, password: password }; return http.post('/api/login', data) .then(response => { // 处理登录成功的响应 const token = response.token; // 将 token 存储在本地,以备后续请求使用 localStorage.setItem('token', token); return token; }) .catch(error => { // 处理登录失败的错误 console.error('登录失败:', error); throw error; }); } // 调用登录函数 login('your_username', 'your_password') .then(token => { // 登录成功,可以执行其他操作 console.log('登录成功,token:', token); }) .catch(error => { // 处理登录失败的错误 console.error('登录失败:', error); });
上述示例中,我们定义了一个名为
login
的函数,该函数接受用户名和密码作为参数。然后,我们将用户名和密码封装在一个对象中,并使用http.post
方法发送登录请求。在成功的响应中,我们从响应数据中提取出访问令牌,并将其存储在本地,以备后续请求使用。在登录失败的情况下,我们将处理错误并将其抛出。最后,我们调用
login
函数,并在成功登录后执行其他操作。
二、get带参数带token
如果你需要在 GET 请求中带上参数和访问令牌,可以使用
http.js
提供的get
方法,并将参数作为params
对象传递给该方法。此外,你需要在请求头中添加Authorization
字段并设置为Bearer <token>
import http from './http.js'; // 获取用户信息函数 function getUserInfo(userId) { const token = localStorage.getItem('token'); const headers = { Authorization: `Bearer ${token}` }; const params = { id: userId }; return http.get('/api/user', params, headers) .then(response => { // 处理成功响应的数据 console.log(response); }) .catch(error => { // 处理错误 console.error('获取用户信息失败:', error); }); } // 调用获取用户信息函数 getUserInfo(123);
在上述示例中,我们定义了一个名为
getUserInfo
的函数,该函数接受一个用户 ID 作为参数。然后,我们从本地存储中获取访问令牌,并将其添加到请求头中的Authorization
字段中。接下来,我们将用户 ID 封装在一个对象中,并将其作为params
参数传递给http.get
方法。在成功的响应中,我们将打印响应数据。在发生错误时,我们将处理错误并将其抛出。请注意,我们使用
localStorage.getItem('token')
从本地存储中获取访问令牌。你需要在登录成功后将访问令牌存储在本地,以便在后续请求中使用
三、get 和post 不带参数及token请求
当发送不带参数和访问令牌的 GET/POST 请求时,你可以使用
http.js
提供的get
和post
方法,并将请求 URL 作为参数传递给这些方法。在不需要发送请求体的 POST 请求中,你可以将data
参数设置为null
或省略该参数import http from './http.js'; // 发送 GET 请求函数 function sendGetRequest() { const token = localStorage.getItem('token'); const headers = { Authorization: `Bearer ${token}` }; return http.get('/api/user', null, headers) .then(response => { // 处理成功响应的数据 console.log(response); }) .catch(error => { // 处理错误 console.error('发送 GET 请求失败:', error); }); } // 发送 POST 请求函数 function sendPostRequest() { const token = localStorage.getItem('token'); const headers = { Authorization: `Bearer ${token}` }; const data = { name: 'John Doe', age: 30 }; return http.post('/api/user', data, headers) .then(response => { // 处理成功响应的数据 console.log(response); }) .catch(error => { // 处理错误 console.error('发送 POST 请求失败:', error); }); } // 调用发送 GET 请求函数 sendGetRequest(); // 调用发送 POST 请求函数 sendPostRequest();
在上述示例中,我们定义了两个函数:
sendGetRequest
和sendPostRequest
。在这两个函数中,我们从本地存储中获取访问令牌,并将其添加到请求头中的Authorization
字段中。对于发送 GET 请求的函数,我们将params
参数设置为null
或省略该参数。对于发送 POST 请求的函数,我们将请求体数据封装在一个对象中,并将其作为data
参数传递给http.post
方法。在成功的响应中,我们将打印响应数据。在发生错误时,我们将处理错误并将其抛出