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-05-30 11:06  流浪2024  阅读(12)  评论(0)    收藏  举报