uniapp怎么调用api接口-猿码集

1. uniapp简介

Uniapp是由DCloud开发的一款跨平台应用开发框架。它可以快速构建高效能、多平台的应用程序，包括H5、小程序、APP、快应用等多个平台，而且都是基于同一份代码（前端代码）实现的，降低了开发的难度。

Uniapp中有很多插件和工具，可以加快开发效率。比如uni-request插件，它是一个网络请求插件，可以方便地进行网络请求，本文就是以uni-request为例，来讲解如何在uniapp中调用api接口。

2. 安装uni-request插件

在使用uni-request插件前，需要先安装该插件。可以在coscmd命令行中，使用npm或yarn的方式进行安装。

npm install uni-request

或者：

yarn add uni-request

3. 引入uni-request插件

在需要使用uni-request插件的页面中，可以使用以下方式引入：

import { post, get } from "@/utils/request";

其中，post和get分别是uni-request插件提供的网络请求方式，@/utils/request是在uniapp中通用的网络请求路径。

4. 调用api接口

4.1 GET请求

使用uni-request插件调用GET请求，可以使用以下方式：

get('/api/getUser', { id: 123 }).then(res => {
  console.log(res)
}).catch(err => {
  console.log('请求失败：', err)
})

其中，第一个参数是请求的url，第二个参数是请求参数（可选），可以是一个对象或字符串。请求成功后，返回的是一个promise对象，可以使用then方法处理请求的结果，也可以使用catch方法处理请求失败的情况。

4.2 POST请求

使用uni-request插件调用POST请求，可以使用以下方式：

post('/api/login', {
  username: 'admin',
  password: '123456'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('请求失败：', err)
})

其中，第一个参数是请求的url，第二个参数是请求参数（必选），可以是一个对象或字符串。请求成功后，返回的是一个promise对象，可以使用then方法处理请求的结果，也可以使用catch方法处理请求失败的情况。

5. uni-request插件参数配置

除了上述基本的请求方式外，uni-request插件还提供了参数配置的功能，包括设置请求的headers、超时时间、请求的类型等功能，可以根据项目需要使用。

5.1 设置请求的headers

可以使用以下方式来设置请求的headers：

import { post } from "@/utils/request";
post('/api/login', {
  username: 'admin',
  password: '123456'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('请求失败：', err)
})

其中，headers是一个对象，可以设置请求头的相关信息。

5.2 设置超时时间

可以使用以下方式来设置请求的超时时间：

import { post } from "@/utils/request";
post('/api/login', {
  username: 'admin',
  password: '123456'
}, {
  timeout: 5000
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('请求失败：', err)
})

其中，timeout是一个数字，代表请求超时的时间（单位：毫秒）。

5.3 设置请求类型

可以使用以下方式来设置请求的类型：

import { post } from "@/utils/request";
post('/api/login', {
  username: 'admin',
  password: '123456'
}, {
  responseType: 'arraybuffer'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log('请求失败：', err)
})

其中，responseType是一个字符串，代表请求的类型，比如arraybuffer、json、text等。

总结

使用uni-request插件可以方便地进行API接口调用，在uniapp中实现跨平台开发。通过配置参数，可以满足不同的请求需求。在实际开发中，需要根据项目的具体需求和后端API接口来调用请求，并根据请求结果进行相关的处理。

uniapp怎么调用api接口