UNIAPP调用API接口

API：开发者可以通过这些接口与其它程序进行交互，获取所需数据或者执行指定操作。

网络请求 API:

UniApp 中内置了网络请求 API，方便调用

uni.request

uni.uploadFile

uni.request 接口主要用于实现网络请求。GET 和 POST 是使用最普遍的两种请求方式。

该接口支持的请求方式有：GET、POST、PUT、DELETE、HEAD、OPTIONS、TRACE、CONNECT。

参数名	类型	是否必填	作用
url	String	是	请求的 URL 地址
method	String	是	请求的方式，支持 GET、POST、PUT、DELETE、HEAD、OPTIONS、TRACE、CONNECT
header	Object	否	需要设置的请求头部信息
data	Object/String	否	请求的数据
dataType	String	否	返回值的数据类型，支持 json、text、default
responseType	String	否	响应类型，支持 text、arraybuffer、blob
success	Function	否	请求成功后的回调函数
fail	Function	否	请求失败后的回调函数
complete	Function	否	请求完成后的回调函数

复制代码

uni.request({
    url: 'https://api.example.com/login', 
    method: 'POST',  
    header: {
        'content-type': 'application/json'
    },  
    data: {
        username: 'example',
        password: 'example123'
    },  
    success: res => {
        console.log(res.data)
    },  
    fail: error => {
        console.log(error)
    }
})

uni.uploadFile 接口主要用于上传文件

参数名	类型	是否必填	作用
url	String	是	请求的 URL 地址
filePath	String	是	要上传的文件路径，仅支持本地路径
name	String	是	上传文件的名字
header	Object	否	需要设置的请求头部信息
formData	Object	否	需要上传的额外参数
success	Function	否	请求成功后的回调函数
fail	Function	否	请求失败后的回调函数
complete	Function	否	请求完成后的回调函数

复制代码

uni.uploadFile({
    url: 'https://api.example.com/upload', 
    filePath: '/path/to/file',
    name: 'file', 
    header: {
        'content-type': 'multipart/form-data'
    }, 
    formData: {
        'name': 'example'
    },
    success: res => {
        console.log(res.data)
    },
    fail: error => {
        console.log(error)
    }
})

路由 API:

uni.navigateTo

uni.redirectTo

uni.navigateTo 接口是用于跳转到新页面的方法，并传递参数。

通过这个接口，我们可以实现跳转到新页面，并传递参数。

参数名	类型	是否必填	作用
url	String	是	要跳转的页面路径，支持相对路径和绝对路径
success	Function	否	跳转成功后的回调函数
fail	Function	否	跳转失败后的回调函数
complete	Function	否	跳转完成后的回调函数

复制代码

uni.navigateTo({
    url: '/pages/detail/detail?id=1',
    success: res => {
        console.log(res)
    },
    fail: error => {
        console.log(error)
    }
})

uni.redirectTo 接口是用于关闭当前页面并跳转到新页面的方法

参数名	类型	是否必填	作用
url	String	是	要跳转的页面路径，支持相对路径和绝对路径
success	Function	否	跳转成功后的回调函数
fail	Function	否	跳转失败后的回调函数
complete	Function	否	跳转完成后的回调函数

复制代码

uni.redirectTo({
    url: '/pages/index/index',
    success: res => {
        console.log(res)
    },
    fail: error => {
        console.log(error)
    }
})

Storage API

一些数据需要本地存储，以便在下次启动应用程序时能够快速访问到

UniApp 提供了 Storage API，用于本地存储数据。

方法名	参数	作用
uni.setStorage	key,value	将数据存储在本地缓存中
uni.getStorage	key	从本地缓存中获取指定 key 对应的内容
uni.removeStorage	key	从本地缓存中删除指定 key
uni.clearStorage	无	清空本地缓存

复制代码

// 存储数据
uni.setStorage({
    key: 'username',
    data: 'example',
    success: function () {
        console.log('数据存储成功')
    }
})

// 获取数据
uni.getStorage({
    key: 'username',
    success: function (res) {
        console.log(res.data)
    }
})

// 删除数据
uni.removeStorage({
    key: 'username',
    success: function () {
        console.log('数据删除成功')
    }
})

网络请求、路由、Storage 存储、组件、插件、生命周期