luch-request请求封装

Luch-Request 是一个基于 Promise 的小程序网络请求库,它提供了一套简洁易用的 API,可以方便地进行网络请求的封装。

npm install luch-request --save

封装代码

import Request from 'luch-request';
 
//创建请求实例方法
function createRequest(options = {}) {
  return new Request({
    ...options
  });
}
 
//基地址
const baseURL: string = 'http://localhost:3000';
 
//创建http实例对象
const http = createRequest({
  baseURL
});
 
//请求
http.interceptors.request.use(
  (config) => {
    // 可以在请求的时候固定设置content-type以及token等信息内容
    config.header = {
      'content-type': 'application/json',
      token: uni.getStorageSync('token') || ''
    };
    return config;
  },
  (config) => {
    // 可使用async await做异步
    return Promise.reject(config);
  }
);
 
//请求拦截
http.interceptors.response.use(
  (response) => {
    console.log(response.data);
    if (response.data.code === 200) {
      return response.data.data;
    }
  },
  //错误处理
  (error) => {
    // 利用http状态码可以实现不同情况接口错误内容的收集与反馈操作
    if (error && error.errMsg) {
      // 判断http请求的状态码,并设置不同的错误提示信息
      switch (error.statusCode) {
        case 400:
          error.errMsg = '错误请求';
          break;
        case 401:
          error.errMsg = '未授权,请重新登录';
          break;
        case 403:
          error.errMsg = '拒绝访问';
          break;
        case 404:
          error.errMsg = '请求错误,未找到该资源';
          break;
        case 405:
          error.errMsg = '请求方法未允许';
          break;
        case 408:
          error.errMsg = '请求超时';
          break;
        case 500:
          error.errMsg = '服务器端出错';
          break;
        case 501:
          error.errMsg = '网络未实现';
          break;
        case 502:
          error.errMsg = '网络错误';
          break;
        case 503:
          error.errMsg = '服务不可用';
          break;
        case 504:
          error.errMsg = '网络超时';
          break;
        case 505:
          error.errMsg = 'http版本不支持该请求';
          break;
        default:
          error.errMsg = '连接错误';
      }
      const errorData = {
        code: error.statusCode,
        message: error.errMsg
      };
      // 统一错误处理可以放这,例如页面提示错误...
      console.log('统一错误处理: ', errorData);
    }
    return Promise.reject(error);
  }
);
 
export default http;

  • 7
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp是一款跨平台的开发框架,可以用于同时开发iOS、Android和Web应用程序。而luch-request是uniapp中一个常用的网络请求库,用于发送HTTP请求并处理响应。 luch-request封装了uni.request方法,提供了更加简洁和易用的接口,使得发送网络请求变得更加方便。它支持Promise风格的异步请求,可以发送GET、POST等各种类型的请求,并且可以设置请求头、请求参数、超时时间等。 以下是luch-request的一些主要特性和使用方法: 1. 支持拦截器:可以在请求发送前和响应返回后进行拦截和处理。 2. 支持全局配置:可以在全局设置请求的默认参数,如请求头、超时时间等。 3. 支持取消请求:可以取消正在进行的请求。 4. 支持文件上传和下载:可以发送文件上传请求,并支持进度监听。 5. 支持自动刷新token:可以在请求失败时自动刷新token并重新发送请求。 使用luch-request封装发送网络请求的步骤如下: 1. 安装luch-request:在uniapp项目中的package.json文件中添加依赖,并执行npm install命令进行安装。 2. 引入luch-request:在需要发送请求的页面或组件中引入luch-request库。 3. 创建实例:通过new关键字创建一个luch-request实例。 4. 发送请求:使用实例的request方法发送请求,并设置请求的相关参数。 5. 处理响应:在请求成功后,可以通过then方法获取响应数据;在请求失败后,可以通过catch方法捕获错误信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值