uniApp,关于uni.requet()方法发起网络请求教程

目录

uniapp简介：

url作用：

data作用：

success作用：

fail作用：

complete作用：

单独封装：

总结：

---

uniapp简介：

uniApp 是基于 Vue.js 构建的一款多端开发框架，支持同时开发 H5、App、小程序等多个不同平台。uni.request 方法是异步请求网络数据的方法之一。下面是如何使用uni.request 方法发起网络请求的详细方法。

首先，需要在script中导入uni.request的方法。

import uniRequest from '@/common/request.js';

接着，您可以在需要发起网络请求的地方使用以下方式调用uni.request方法：

uniRequest({ 
url: 'https://api.Test.com/',
 method: 'GET', data: { id: 1, name: 'Test' }, 
success(res) { console.log('请求成功', res.data); }, 
fail(err) { console.log('请求失败', err); }, 
complete() { console.log('请求完成'); } })

以上代码中，我们传入了一个对象参数，包含以下配置：

url作用：

url 是必传参数，表示请求的接口地址。可以是本地 mock 数据，也可以是线上服务器地址。

method作用：

method 用于设置请求方式，可以是'POST'，'GET'，'PUT'，'DELETE'，'HEAD'等。默认值是'GET'。

data作用：

data 用于设置请求参数。可以是对象，也可以是字符串。如果是对象，则会自动将参数序列化成 key=val&key=val 的格式；如果是字符串，则直接传递。

success作用：

success 是请求成功后的回调函数，接收一个参数 res，包含了成功请求后返回的数据。

fail作用：

fail 是请求失败后的回调函数，接收一个参数 err，包含了失败信息。

complete作用：

complete 是请求完成后的回调函数，无论成功失败都会调用。

以上是使用uni.request方法发起网络请求的基本流程。

单独封装：

单独封装uni.request方法可以提高代码的可读性和可维护性，同时方便在多处使用该方法。

首先，需要在一个公共 js 文件中封装uni.request方法，例如 

export default function uniRequest(options) {
  uni.request({
    ...options,
    success(res) {
      if (options.success) {
        options.success(res);
      }
    },
    fail(err) {
      if (options.fail) {
        options.fail(err);
      }
    },
    complete() {
      if (options.complete) {
        options.complete();
      }
    }
  })
}

以上代码会实现一个新的方法 uniRequest，该方法封装了原本的 uni.request 的请求方式和返回回调。

接着在需要发起网络请求的地方导入该方法后，即可像下面这样使用：

import uniRequest from '@/common/request.js'; 
uniRequest({ 
url: 'https://api.Test.com/', 
method: 'GET', data: { id: 1, name: 'Test' }, 
success(res) { console.log('请求成功', res.data); }, 
fail(err) { console.log('请求失败', err); }, 
complete() { console.log('请求完成'); } })

其中，import uniRequest from '@/common/request.js' 表示从我们刚刚封装的 request.js 文件中导入 uniRequest 方法，然后就可以像使用 uni.request 一样使用该方法发起网络请求了。

总结：

uni.request()方法是一个在uniapp中用来发送HTTP和HTTPS请求的常用方法。该方法包含多个参数，包括请求地址、请求方法、请求参数、请求头、服务器返回的数据类型、响应数据类型以及请求成功和失败的回调函数等。调用成功后会返回一个包含响应数据的对象，调用失败后会返回一个包含错误信息的对象。