uniapp网络请求封装及简单使用

// 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 值。

如何使用

1. 导入http.js文件

2. import http from './http.js';

   3简单不带token请求

3. 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

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 方法。在成功的响应中，我们将打印响应数据。在发生错误时，我们将处理错误并将其抛出