• 技术文章 >web前端 >uni-app

    uniapp怎么发起请求

    coldplay.xixicoldplay.xixi2021-01-12 17:01:27原创1937

    uniapp发起请求的方法:1、使用【uniapp.request({})】方法;2、使用【this.$axios({})】方法,代码为【this.$axios({method: 'get',url: this.$api+ '/Test】。

    本教程操作环境:windows7系统、uni-app2.5.1版本、thinkpad t480电脑。

    推荐(免费):uni-app开发教程

    uniapp发起请求的方法:

    1、使用uniapp.request({})方法

    uni.request({
    uni.request({
    url: this.$api+'/Test/student/test',
    header: {
    'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
    },
    //请求成功后返回
    success: (res) => {
    // 请求成功之后将数据给Info
    if(res.statusCode===200)
    {
    self.Info = res.data;
    }
    }
    });

    2、使用this.$axios({})方法

    this.$axios({
    method: 'get',
    url: this.$api + '/Test/student/test'
    // data: {
    // userName: 'Lan',
    // password: '123'
    // },
    })
    .then(function(res) {
    if (res.data.code === 1234) {
    self.Info = res.data
    }
    })
    .catch(function(error) {
    console.log(error.statusCode)
    })

    this.a p i , t h i s . api,this.api,this.axios要在main.js当中注册为全局变量

    Vue.prototype.$api='http://192.168.2.114:8099'
    Vue.prototype.$axios=axios

    完整示例代码:

    <template>
    <view class="content">
    <span>用户名:</span>
    <input class="username" type="text" :value="username" placeholder="请输入用户名" />
    <view class="">
    <button type="default" @click="getInfo()">测试</button>
    {{ Info }}
    </view>
    </view>
    </template>
    <script>
    export default {
    data() {
    return {
    Info: '',
    username: '工程师',
    pwd: ''
    }
    },
    methods: {
    getInfo() {
    // var self = this;
    // uni.request({
    // url: this.$api+'/Test/student/test',
    // header: {
    // 'content-type': 'application/x-www-form-urlencoded' //自定义请求头信息
    // },
    // //请求成功后返回
    // success: (res) => {
    // // 请求成功之后将数据给Info
    // if(res.statusCode===200)
    // {
    // self.Info = res.data;
    // }
    // }
    // });
    var self = this
    this.$axios({
    method: 'get',
    url: this.$api + '/Test/student/test'
    // data: {
    // userName: 'Lan',
    // password: '123'
    // },
    })
    .then(function(res) {
    if (res.data.code === 1234) {
    self.Info = res.data
    }
    })
    .catch(function(error) {
    console.log(error.statusCode)
    })
    }
    }
    }
    </script>
    <style>
    .span {
    width: 30px;
    }
    .username {
    border-radius: 10px;
    border: 2rpx solid #007aff;
    width: 80px;
    padding: 10px;
    }
    </style>
    <!-- <template>
    <p>用户名:</p>
    <input type="text" placeholder="请输入用户名" value=""/>
    </template>
    <script></script>
    <style></style> -->

    相关免费学习推荐:编程视频

    以上就是uniapp怎么发起请求的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:uniapp 请求
    上一篇:如何解决uniapp提交后乱码的问题 下一篇:uniapp swiper组件如何禁止滑动

    相关文章推荐

    • vue.js如何发送请求• vue.js怎么请求数据• uni-app如何执行同步请求• uniapp如何封装request请求

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网