uniapp用axios 真机调试报错:TypeError: adapter is not a function

文章介绍了在uniapp开发中遇到axios不适应的情况,提出了解决方案——通过uniapp封装一个request请求。具体步骤包括创建config.js配置域名,utils/http.js编写http请求模块,包括加载显示和隐藏功能,以及根据请求类型设置header和data。此外,还展示了如何在api管理文件中导入并使用这个封装的请求方法,以及在页面中调用api的例子。
摘要由CSDN通过智能技术生成

分析原因:

uniapp的axios不适配

解决办法:

用uni封装一个request请求

一.新建config.js文件

// 域名地址
export const VUE_APP_API_URL = '测试地址'; 		//测试 → 接口域名

二.新建utils/http.js文件

import {
	VUE_APP_API_URL
} from '../config/index.js'
 
// 加载信息,带遮罩
let needLoadingRequestCount = 0;
let loadingTimer;
function showLoading(title = '', mask = true) {
	if (needLoadingRequestCount === 0) {
		uni.showLoading({
			title,
			mask
		});
 
		// 最长10s自动关闭
		loadingTimer = setTimeout(() => {
			if (needLoadingRequestCount > 0) {
				uni.hideLoading();
			}
		}, 10000);
	}
 
	needLoadingRequestCount++;
}
 
// 隐藏遮罩
 function hideLoading() {
	if (needLoadingRequestCount <= 0) return;
 
	needLoadingRequestCount--;
 
	if (needLoadingRequestCount === 0) {
        loadingTimer && clearTimeout(loadingTimer);
		uni.hideLoading();
	}
}
 
export const apiResquest = (urls,data) => { //prams 为我们需要调用的接口API的参数 下面会贴具体代码
 
  
 
    // 判断请求类型
 
    let headerData = {
		'token': uni.getStorageSync('token'),
        'content-type': 'application/json'
 
    }
    let dataObj = null
        //因为我们的GET和POST请求结构不同这里我们做处理,大家根据自己后台接口所需结构灵活做调整吧
	 dataObj = data
 
 //    if (prams.method === "GET") {
 
 //        headerData = {
 
 //            'content-type': 'application/json',
 
 //            'token': uni.getStorageSync('token')
 
 //        }
 
 //    } else {
	
 //        dataObj = prams.query
 
 //    }
 
    return new Promise((resolve, reject) => {
 
        let url = VUE_APP_API_URL + urls; //请求的网络地址和局地的api地址组合
 
        showLoading('加载中', true)
		hideLoading()
		//showLoading和hideLoading必须配合使用
        return uni.request({
 
            url: url,
 
            data: dataObj,
 
            method: 'POST',
 
            header: headerData,
 
            success: (res) => {
				
                if (res.data.status !== 200) {
 
                    uni.showToast({
 
                        title: '获取数据失败:' + res.data.msg,
 
                        duration: 1000,
 
                        icon: "none"
 
                    })
                    return;
 
                }
 
                resolve(res.data);
 
            },
 
            fail: (err) => {
 
                reject(err);
                console.log(err)
 
            },
 
            complete: () => {
              
            }
 
        });
 
    })
 
}



三.新建api管理文件api/index.js

// 管理接口地址
import { apiResquest } from '../utils/http.js'

//登录
export const getLogin = (data) => apiResquest('user/login',data)

四.页面调用api

import {getLogin } from '../../api/index.js'
//调用方法
		getUserInfo({}).then((res)=>{
					 if(res.status == 200){	
				 }
		})
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值