Vue调用接口封装

复制代码
const BASE_URL = "http://wjs.test.com/api.php"

export const myRequest = (options) => {
    return new Promise((resove,reject)=>{
        uni.request({
            url: BASE_URL + options.url,
            method: options.method || 'GET',
            data: options.data || {},
            success: (res) => {
                if(res.data.code != 200){
                    return uni.showToast({
                        title:'获取数据失败'
                    })
                }
                resove(res)
            },
            fail: (err) => {
                uni.showToast({
                    title:'请求接口失败'
                }),
                reject(err)
            }
        })
    })
}
复制代码

man.js

import App from './App'
import {myRequest} from 'static/js/common.js'
Vue.prototype.$myRequest = myRequest

页面:

复制代码
data(){
            return{
                message:"Hello Vue",
                flag:true,
                imgUrl:"../../static/images/wukong.jpg",
                person:[
                    {id:1,name:'张三',age:30},
                    {id:2,name:'李四',age:40},
                    {id:3,name:'王五',age:50}
                ]
            }
        },
        methods:{
            clickBut(){
                console.log("你好啊!帅哥");
            },
            async get(){
                const arr = await this.$myRequest({
                    url:"",
                    method:"get"
                })
                this.$data.person = arr.data.list
            }
        },
复制代码

 

posted @   流浪2024  阅读(4)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 上周热点回顾(3.3-3.9)
点击右上角即可分享
微信分享提示