uniapp封装fetch请求

1.首先在根目录下创建一个request.js文件

2.同级下创建一个api.js然后引入request.js

3.在哪个页面使用就在那个页面引入api.js

request.js

api.js

 使用时直接页面导入api.js

 methods中直接使用

 request.js代码贴

const Config = {
	origin: 'https://saasapi.lajiaobaba.cn',//要拼接的路径
	origin_test: 'https://testsaasapi.lajiaobaba.cn',
	tokenFailCode: [401, 402],
}
export const Fetch = ({
    url = '',
    data = {},
    header = { "content-type": "application/json" },
    method = 'GET',
    api = Config.origin
}) => {
    return new Promise((resolve, reject) => {
        // uni.showNavigationBarLoading()
		uni.showLoading({
			title:"加载中"
		})
        uni.request({
            url: api + url,
            header: header,
            method: method,
            data: {
				...data,
			},
            success: res => {
				setTimeout( () => {
					uni.hideLoading()
				}, 500)
                console.log('1111111', url, data, res)
                if (res.data.code == 200) {
                    resolve(res.data)
				} else if(Config.tokenFailCode.includes(res.data.code)){
					uni.setStorageSync('App_Token', '')
					reject(res.data)
				} else {
                    reject(res.data)
                }
            },
            fail: err => {
				console.log('2222222', url, data, err)
                uni.hideLoading()
                reject(err)
            }
        })
    })
}

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
对于Uniapp和Vue3的请求封装,你可以按照以下步骤进行: 1. 首先,创建一个api文件夹用于存放API请求相关的文件。 2. 在api文件夹中创建一个request.js文件。在该文件中,可以使用axios或者uni.request等库来进行网络请求。以下是一个使用axios的示例: ```javascript import axios from 'axios' const request = axios.create({ baseURL: 'http://your-api-base-url.com', // 设置请求的基础URL timeout: 5000 // 设置请求超时时间 }) request.interceptors.request.use( config => { // 在发送请求之前可以做一些处理,比如设置请求头等 return config }, error => { // 请求错误处理 return Promise.reject(error) } ) request.interceptors.response.use( response => { // 对响应数据进行处理 return response.data }, error => { // 响应错误处理 return Promise.reject(error) } ) export default request ``` 3. 在api文件夹中创建一个api.js文件,用于定义具体的API接口。以下是一个示例: ```javascript import request from './request' export function getUserInfo(userId) { return request.get(`/user/${userId}`) } export function login(data) { return request.post('/login', data) } ``` 4. 在需要发送请求的组件中,引入api.js文件,然后调用相应的API接口即可。例如: ```javascript import { getUserInfo, login } from '@/api/api.js' export default { methods: { async fetchData() { try { const userInfo = await getUserInfo(123) console.log(userInfo) } catch (error) { console.error(error)

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值