uniapp中使用axios、uniapp中封装axios_uniapp axios-程序员宅基地

技术标签: uni-app  

根据官方文档,我们知道axios支持nodejs、浏览器环境,但不支持uniapp、小程序,所以要想在uniapp中使用axios就要自定义实现。axios文档对自定义实现,作了说明。

// `adapter` allows custom handling of requests which makes testing easier.
  // Return a promise and supply a valid response (see lib/adapters/README.md).
  adapter: function (config) {
    
    /* ... */
  },

翻译过来就是,要想自定义实现,就要覆盖adapter方法默认实现如下

var settle = require('./../core/settle');

module.exports = function myAdapter(config) {
    
  // At this point:
  //  - config has been merged with defaults
  //  - request transformers have already run
  //  - request interceptors have already run
  
  // Make the request using config provided
  // Upon response settle the Promise

  return new Promise(function(resolve, reject) {
    
  
    var response = {
    
      data: responseData,
      status: request.status,
      statusText: request.statusText,
      headers: responseHeaders,
      config: config,
      request: request
    };

    settle(resolve, reject, response);

    // From here:
    //  - response transformers will run
    //  - response interceptors will run
  });
}

settle.js中的代码

'use strict';

import AxiosError from './AxiosError.js';

/**
 * Resolve or reject a Promise based on response status.
 *
 * @param {Function} resolve A function that resolves the promise.
 * @param {Function} reject A function that rejects the promise.
 * @param {object} response The response.
 *
 * @returns {object} The response.
 */
export default function settle(resolve, reject, response) {
  const validateStatus = response.config.validateStatus;
  if (!response.status || !validateStatus || validateStatus(response.status)) {
    resolve(response);
  } else {
    reject(new AxiosError(
      'Request failed with status code ' + response.status,
      [AxiosError.ERR_BAD_REQUEST, AxiosError.ERR_BAD_RESPONSE][Math.floor(response.status / 100) - 4],
      response.config,
      response.request,
      response
    ));
  }
}

结合uniapp的api,可对axios如此封装


let count = 0
axios.defaults.adapter = function(config) {
     //自己定义个适配器,用来适配uniapp的语法
  count++
  if (count == 1) {
    
    uni.showLoading({
    
      title: "加载中",
	  mask:true
    })
  }
  return new Promise((resolve, reject) => {
    
    var settle = require('axios/lib/core/settle');
    var buildURL = require('axios/lib/helpers/buildURL');
    uni.request({
    
      method: config.method.toUpperCase(),
      url: config.baseURL + config.url,
      header: config.headers,
      data: config.data,
      dataType: config.dataType,
      responseType: config.responseType,
      sslVerify: config.sslVerify,
      complete: function complete(response) {
    
        count--
        if (count == 0) {
    
          uni.hideLoading()
        }
        if (response.data.code != 200) {
    
          uni.showToast({
    
            title: response.data.msg,
            duration: 5000,
            icon: 'none'
          })
          reject(response.data.msg)
          return
        }
        response = {
    
          data: response.data,
          status: response.statusCode,
          errMsg: response.errMsg,
          header: response.header,
          config: config
        };
        settle(resolve, reject, response);
      }
    })
  })
}

我们不禁要问,直接用uni.request封装请求不更简单吗?比如,

function request(data){
    
 return new Promise((resolve,reject)=>{
    
		uni.request({
    
			data,
			complete:function(response){
    
			 resolve(response);
			}
	 })
 })
}

这样做是可以,但没有了拦截器、baseUrl、参数转换等功能;基于axios封装,可以使用axios的api,比如拦截器

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });

总结

  • uniapp中使用axios,是为了按照axios的风格来发送请求,并且axios提供了请求拦截器、响应拦截器、baseUrl、请求参数自动转换等功能;否则就要自己实现;
  • 通过axios开放的adapter方法来适配uniapp环境,uniapp中发送去请求的api是uni.request。
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wangjun5159/article/details/127439782

智能推荐

HBase数据大批量导入方式总结和对比_hbase 大数据量导入-程序员宅基地

文章浏览阅读3.4k次,点赞4次,收藏19次。HBase数据导入1. 背景在实际生产中,海量数据一般都不是直接存储在HBase中,这时候就需要一个数据导入到HBase的步骤上一篇博客讲述了可以通过java api的方式或者shell 客户端方式导入或者创建数据,但这对于实际生产中海量数据导入来说,速度和效率都太慢了,所以我们需要使用其他方式来解决海量输入导入到HBase的问题利用HBase底层文件是HFile形式存储再HDFS中,所以如果能够直接生成HFile的话,这时候再让HBase从HFile中读取数据,就会快很多。2. 批量数据导入_hbase 大数据量导入

Qt 串口通信之使用16进制发送数据的转换方式_qt串口发送16进制数据-程序员宅基地

文章浏览阅读1.7k次,点赞2次,收藏18次。16进制QString转成16进制QByteArray一 概述 有时候在做上位机串口通讯时,经常需要将字符串转成16进制的形式作为发送,借此分析记录一下。二 需求分析//假设需要转换的字符:如下QString str = "abcdef1234";//需求转换成 0xab,0xcd,0xef,0x12,0x34 由上图分析得出,很明显我们只需要拆分字符串然后再重新合并就ok啦,知道了解决方法,接下来就是上代码。三 编写代码方法1:/*******************_qt串口发送16进制数据

multipartfile上传文件 大小限制_multipartfile 大小限制-程序员宅基地

文章浏览阅读1.4w次,点赞7次,收藏15次。关于文件上传大小 主要看一个错误org.apache.tomcat.util.http.fileupload.impl.SizeLimitExceededException: the request was rejected because its size (59500387) exceeds the configured maximum (10485760) at org.apache.tomcat.util.http.fileupload.impl.FileItemIteratorImpl.ini_multipartfile 大小限制

基于python的信用卡评分模型_python 信用 评分卡模型-程序员宅基地

文章浏览阅读4.4w次,点赞45次,收藏418次。基于python的信用卡评分模型1. 项目背景介绍1.1 信用风险和评分卡模型的基本概念 信用风险指的是交易对手未能履行约定合同中的义务造成经济损失的风险,即受信人不能履行还本付息的责任而使授信人的预期收益与实际收益发生偏离的可能性,它是金融风险的主要类型。 借贷场景中的评分卡是一种以分数的形式来衡量风险几率的一种手段,也是对未来一段时间内违约、逾期、失联概率的预测。一般来说..._python 信用 评分卡模型

linux 下 tcpdump 详解 前篇(libpcap库源码分析)_libcap 源码-程序员宅基地

文章浏览阅读1.7k次,点赞3次,收藏22次。一 概述用简单的话来定义tcpdump,就是:dump the traffic on a network,根据使用者的定义对网络上的数据包进行截获的包分析工具。 至于tcpdump参数如何使用,这不是本章讨论的重点。liunx系统抓包工具,毫无疑问就是tcpdump。而windows的抓包工具,wireshark也是一款主流的抓包工具。wireshark 使用了winpcap库。tcpdump..._libcap 源码

http://mirrors.aliyun.com/epel/6/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 --程序员宅基地

文章浏览阅读6.5k次,点赞14次,收藏11次。http://mirrors.aliyun.com/epel/6/x86_64/repodata/repomd.xml: [Errno 14] PYCURL ERROR 22 - “The requested URL returned error: 404 Not Found”Trying other mirror.Error: Cannot retrieve repository metadata (repomd.xml) for repository: epel. Please verify its_/epel/6/x86_64/repodata/repomd.xml: [errno 14] pycurl error 22 - "the reques

随便推点

案例课1——科大讯飞_科大讯飞培训案例-程序员宅基地

文章浏览阅读919次,点赞21次,收藏22次。科大讯飞是一家专业从事智能语音及语音技术研究、软件及芯片产品开发、语音信息服务的软件企业,语音技术实现了人机语音交互,使人与机器之间沟通变得像人与人沟通一样简单。语音技术主要包括语音合成和语音识别两项关键技术。此外,语音技术还包括语音编码、音色转换、口语评测、语音消噪和增强等技术,有着广阔的应用。_科大讯飞培训案例

perl下载与安装教程【工具使用】-程序员宅基地

文章浏览阅读4.7k次。Perl是一个高阶程式语言,由 Larry Wall和其他许多人所写,融合了许多语言的特性。它主要是由无所不在的 C语言,其次由 sed、awk,UNIX shell 和至少十数种其他的工具和语言所演化而来。Perl对 process、档案,和文字有很强的处理、变换能力,ActivePerl是一个perl脚本解释器。其包含了包括有 Perl for Win32、Perl for ISAPI、PerlScript、Perl。_perl下载

安装VS2008 SP1-程序员宅基地

文章浏览阅读5.4k次。最近由于在学习SQL2008,所以需要使用VS2008太耍一下关于SQL2008的新特性,尤其是Entity Framework。VS2008和SQL2008我都更新成英文版了。接下来安装VS2008的Sp1补丁,MS又使用了很恶心的网络安装,下载的Sp1才450K,然后网络安装过程中就要下载几百兆的安装文件,万恶的网络安装,光下载就花了我1个多小时。接下来就开始安装了,不到1分钟,直接报错,安装_vs2008 sp1

UITextField添加点击高亮状态_uitextfield return高亮状态-程序员宅基地

文章浏览阅读960次。一、继承自UITextfield自定义一个SSTouchTextField 代码如下:#import "SSTouchTextField.h"@implementation SSTouchTextField#pragma mark - Private- (void)setBackgroundHighlighted:(BOOL)highlighted{ [UIView animateWith_uitextfield return高亮状态

8421 BCD码 加减校正_负数的8421码-程序员宅基地

文章浏览阅读7.9k次,点赞21次,收藏48次。8421码是一种常见的BCD(Binary-Coded Decimal)码,它用4个二进制位表示1个十进制位:00000001001000110100010101100111100010011010…11110123456789x…x例如:我们要表示5和15,使用二进制编码5 - 101 15 - 1111..._负数的8421码

spaCy V3.0 基于规则匹配(3)----基于规则的命名实体识别NER_spacy ner-程序员宅基地

文章浏览阅读2.2k次,点赞4次,收藏14次。EntityRuler是一个spaCy管道组件,可以通过基于patterns字典添加命名实体,能够方便基于规则和统计方式的命名实体识别方法相结合,从而实现功能更强大的spaCy管道。_spacy ner

推荐文章

热门文章

相关标签