uni-app 发起请求，Toast 消息提示 ，跳转页面

 发起网络请求

在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单

 

官方文档：https://uniapp.dcloud.io/api/request/request

 

下面说几个重点知识

data 数据说明

最终发送给服务器的数据是 String 类型，如果传入的 data 不是 String 类型，会被转换成 String。转换规则如下：

• 对于 GET 方法，会将数据转换为 query string。例如 { name: 'name', age: 18 } 转换后的结果是 name=name&age=18。
• 对于 POST 方法且 header['content-type'] 为 application/json 的数据，会进行 JSON 序列化。
• 对于 POST 方法且 header['content-type'] 为 application/x-www-form-urlencoded 的数据，会将数据转换为 query string。

 

示例

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

 

二、Toast 消息提示 

此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方，具体表现在：

uView的toast有5种主题可选
可以配置toast结束后，跳转相应URL

目前没有加载中的状态，请用uni的uni.showLoading，这个需求uni已经做得很好

 

官方网站：https://www.uviewui.com/components/toast.html

 

基本使用

以下为一个模拟登录成功后，弹出toast提示，并在一定时间(默认2000ms)后，自动跳转页面到个人中心页(也可以配置跳转的参数)的示例

<template>
    <view>
        <u-toast ref="uToast" />
    </view>
</template>

<script>
    export default {
        methods: {
            showToast() {
                this.$refs.uToast.show({
                    title: '登录成功',
                    type: 'success',
                    url: '/pages/user/index'
                })
            }
        }
    }
</script>

View Code