luch-request 使用教程

1. 项目介绍

luch-request 是一个基于 Promise 开发的 uni-app 跨平台、项目级别的请求库。它具有更小的体积、易用的 API 和方便简单的自定义能力。luch-request 支持请求和响应拦截、全局挂载、多个全局配置实例、自定义验证器、文件上传/下载、任务操作、自定义参数以及多拦截器等功能。

2. 项目快速启动

安装

使用 npm 安装 luch-request：

npm install luch-request -S

创建实例

在项目中创建一个 Request 实例，并进行基本的配置：

import Request from 'luch-request';

const http = new Request();

// 执行GET请求
http.get('/user/login', {
  params: {
    userName: 'name',
    password: '123456'
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

// 执行POST请求
http.post('/user/login', {
  userName: 'name',
  password: '123456'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

配置全局拦截器

可以在请求前或响应后进行全局拦截器的配置：

http.interceptors.request.use(config => {
  // 在发送请求之前做些什么
  return config;
}, error => {
  // 对请求错误做些什么
  return Promise.reject(error);
});

http.interceptors.response.use(response => {
  // 对响应数据做点什么
  return response;
}, error => {
  // 对响应错误做点什么
  return Promise.reject(error);
});

3. 应用案例和最佳实践

文件上传

使用 luch-request 进行文件上传：

http.upload('api/upload/img', {
  files: [file], // 需要上传的文件列表
  name: 'file', // 文件对应的 key
  formData: {
    // 其他额外的 form data
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

自定义验证器

可以自定义验证器来处理响应状态码：

http.validateStatus = function (statusCode) {
  return statusCode >= 200 && statusCode < 300; // 默认的
};

4. 典型生态项目

uni-app

luch-request 是专为 uni-app 设计的请求库，可以与 uni-app 生态无缝集成，适用于各种跨平台应用开发。

Vue.js

由于 uni-app 基于 Vue.js，luch-request 也可以在 Vue.js 项目中使用，提供统一的请求管理方案。

DCloud 插件市场

luch-request 在 DCloud 插件市场上有广泛的应用，开发者可以通过插件市场获取更多关于 luch-request 的使用案例和扩展功能。

通过以上步骤，您可以快速上手并使用 luch-request 进行项目开发。希望本教程对您有所帮助！