uni-app封装http请求方法

1.微信小程序平台配置合法域名

2.封装http请求

注意项

• 在 uni-app 中，通常不需要单独安装或引入额外的 AJAX 库来进行网络请求，因为 uni-app 已经内置了网络请求的功能，并提供了 uni.request 方法来发送 HTTP 请求。这个方法可以发送各种类型的请求，如 GET、POST 等，并支持 Promise 形式的异步操作。
• 在 uni-app 中封装好的 HTTP 请求库通常不需要在 main.js 文件中单独引入，因为 uni-app 的请求库可以在任何组件或文件中直接使用，无需在入口文件中额外引入。
• 在 uni-app 中，通常不需要在 vue.config.js 中配置 devServer 的代理，因为 uni-app 是基于 Vue 的跨平台应用框架，而不是基于 Vue CLI 的单页面应用项目。在 uni-app 中，通常会在后端服务器端进行跨域配置，而不是在前端项目中配置代理

封装http

import store rom '@/store'

export const  httpRequest=()=>{
    // 配置请求地址，根据环境变量区分
    uni.$u.http.setConfig(config=>{
        config.baseURL = process.env.NODE_ENV === 'development' ? 'url地址' : '/';
        return config
    })

    // 请求拦截，接口请求前添加token
    uni.$u.http.interceptors.request.use((config) => { // 可以在这里自定义一些请求之前的操作
        // 商户id，根据公司接口规定配置
        let merchant_id = ""
        if(config.data) {
            config.data = { 
                ...config.data,
                merchant_id
            }
        } else {
            config.data = { merchant_id }
        }
        // 获取token
        const { authorization } = store.getters
        // // 判断是否有token,如果有，则设置请求头
        if(authorization) {
            // 设置请求头，携带token
            config.header.authorization = authorization
        }
        return config // 可以在这里返回修改后的config
    },config=>{
        return Promise.reject(config)// 返回一个Promise.reject() 在请求错误时拦截
    })
    
    // 响应拦截，接口返回结果后添加一些自定义操作,如登录过期操作，保存token等
    uni.$u.http.interceptors.response.use((response) => { 
        const { data, header, config } = response
        // 将token存储到vuex中
        if(header.authorization){
            store.commit('setToken', header.authorization)
        }
        // 判断返回值，判断是否提示调用成功
        if(config.custom.toastMsg === true) {
            uni.showToast({ title: data.msg, icon: 'none', duration: 2000 })
        }
        // 根据返回状态，判断一些操作
        if(data.code === 404){
            // 跳转到404页面
            uni.navigateTo({
                url: '/subPages/login/index'
            });
        }else if(data.code === '登录过期'){
            // 1.清除token
            store.commit('setToken', '')
            // 2.清除购物车
            store.dispatch('cart/secedeUpdataCart')
            // 3.跳转到登录页面
            uni.redirectTo({ url: '/subPages/login/index' })
            return 
        }else{
            // 登录失败
            uni.navigateTo({
                url: '/subPages/login/index'
            });
        }
        // 接口成功调用，返回数据data
        return data.data
    },err=>{
        // 判断是否有错误信息
        if (error.message ?? error.msg !== ERROR_MESSAGE_NO_TOKEN) {
            uni.showToast({ title: error.message ?? error.msg, icon: 'none' })
        }
        throw err
    })
}

3.定义api文件

• 创建api文件夹，在index.js文件里引入接口

// 引入httpRequest方法
import {httpRequest}  from '../utils/http.js'
httpRequest()
export * from './card.js'

• 定义接口方法，创建card.js文件

export function getOnSaleCard (page, id, limit = 10) {
    console.log('接口调用')
    return uni.$u.http.post('/takeOut/marketCard/getCardList', { page, limit, card_cate_id: id })
  }

4.在页面调用接口

<template>
	<view>
		<u-button @click="getList" type="primary">可售卡</u-button>
	</view>
</template>

<script>
import { getOnSaleCard } from '@/api/index'

export default {
	methods: {
		async getList (page = 1, id) {
			uni.showLoading({ title: '加载中' })
			// 调用方法
			await getOnSaleCard(page, id=1)
			uni.hideLoading()
		},
	}
}
</script>