使用uni-app 封装自己的request请求

冷不防 2022-12-11 05:26 183阅读 0赞

1、在根目录下创建common文件夹，在文件夹下创建request.js  
request.js的代码  
代码中增加了去除http预检请求配置。  
（如需了解，请跳转链接：https://blog.csdn.net/m0\_49016709/article/details/108854674）

const request = { }    
    request.globalRequest = (url,data,method) => { 
    	uni.showLoading({ 
    		title: "加载中"
    	})
        return uni.request({ 
            url:url,
            method:method,
            data:data,
            dataType:'json',
            header:{ 
    			'content-type':'application/json',
    			'cache-control':'no-cache',//不使用浏览器缓存
    			'Access-Control-Allow-Headers': 'appId',
    			'Access-Control-Allow-Methods': 'POST, GET, OPTIONS',
    			'Access-Control-Max-Age': 86400,
    		},
        }).then(res => { 
    		uni.hideLoading();
            if (res[1].data.code == 200) { 
                return res
            } else { 
                uni.showToast({ 
                	title: res.message,
                	duration: 2000
                });
            }
        }).catch(parmas => { 
    		uni.hideLoading()
    　　　　　　switch (parmas.code) { 
    　　　　　　　　case 401:
    　　　　　　　　　　uni.clearStorageSync()
    　　　　　　　　　　break
    　　　　　　　　default:
    　　　　　　　　　　uni.showToast({ 
    　　　　　　　　　　　　title: parmas.message,
    　　　　　　　　　　　　icon: 'none'
    　　　　　　　　　　})
    　　　　　　　　　　return Promise.reject()
    　　　　　　　　　　break
    　　　　　　}
    　　})
     };
      export default request

2、在根目录下创建api文件夹，在文件夹下创建index.js  
index.js的代码

import request from '../common/request.js'
    const api = { }
    
    //测试地址上线前注销
    const basePath = 'http://127.0.0.1:8080'
    
    //正式地址上线前打开
    // const basePath = 'http://127.0.0.1:8081/'
    
    // 发起请求
    api.register = (url,params,method) => request.globalRequest(`${ basePath}`+url,params,method)
    
    export default api

3、在main.js配置代码

import Vue from 'vue'
    import App from './App'
    
    import request from './common/request.js'
    import api from './api/index.js'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$request = request
    Vue.prototype.$api = api
    
    App.mpType = 'app'
    
    const app = new Vue({ 
        ...App
    })
    app.$mount()

4、在index.vue中调用

onLoad() { 
    	this.queryInfo();
    },
    methods: { 
    	queryInfo(){ 
    		let data={ };
    		let that=this;
    		this.$api.register('后台的接口',data,'POST').then(res => { 
    		// 成功的操作
    			console.log(res);
    		}).catch(err => { 
    		// 失败的操作
    		})
    	}
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，183人围观）

还没有评论，来说两句吧...

相关阅读

相关 uniapp的request.js请求封装

request.js const baseUrl = getApp().globalData.baseURL import utils from './u

末蓝、/ 2022年12月28日 04:25/ 0 赞/ 300 阅读

相关使用uni-app 封装自己的request请求

1、在根目录下创建common文件夹，在文件夹下创建request.js request.js的代码代码中增加了去除http预检请求配置。（如需了解，请跳转链接

冷不防/ 2022年12月11日 05:26/ 0 赞/ 184 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打

忘是亡心i/ 2022年10月12日 15:00/ 0 赞/ 217 阅读

相关 uniapp封装request请求

步骤如下： 1、项目下新建common文件夹，再创建request.js文件 ![777c8043f1259002e7f925313ffa12aa.png][] 2、打开

今天药忘吃喽~/ 2022年10月11日 00:45/ 0 赞/ 219 阅读

相关 uniapp request请求同步化

第一种方式内容区： <view class="content"> <button type="default" @click="testIntern

Myth丶恋晨/ 2022年09月12日 13:46/ 0 赞/ 851 阅读

相关 uniapp 数据请求封装以及通用使用

import urlConfig from './config.js' const request = {} const headers =

川长思鸟来/ 2021年09月17日 23:30/ 0 赞/ 469 阅读

相关 uniapp unirequest 网络请求封装

import urlConfig from './config.js' const request = {} const headers

╰半橙微兮°/ 2021年09月17日 22:36/ 0 赞/ 481 阅读

相关 uniapp网络请求封装；小程序请求接口封装；uni.request接口封装

[另一篇全面封装文章][Link 1] [资源文章下载地址][Link 2] 1.正常使用uni.request()发送请求(未封装) get() {

淩亂°似流年/ 2021年09月07日 06:19/ 0 赞/ 1510 阅读

相关 axios封装request请求

/src/utils/request.js import axios from 'axios' import {Loading, Toast, Dialog,

小鱼儿/ 2021年07月26日 19:07/ 0 赞/ 595 阅读

相关 uniapp自己封装请求拦截

request.js export function packRequest(obj){ let { url, method, params, da

Love The Way You Lie/ 2021年07月24日 17:13/ 0 赞/ 874 阅读