uni-app发起请求以及请求封装，上传及下载功能（六）

一、发起网络请求

uni-app中内置的uni.request()已经很强大了，简单且好用。为了让其更好用，同时支持拦截器，支持Promise 写法，特对其进行封装。同时支持H5和小程序环境，

uni.request()是一个统一的网络请求接口，支持HTTP和HTTPS协议，可以处理GET、POST等请求方法。这个API提供了基本的HTTP请求功能，可以满足大部分应用的网络通信需求。
由于uni-app是基于Vue.js的，可以使用一些适用于前端的JavaScript网络库如axios 第三方库，支持Promise API，有丰富的拦截器、配置选项和错误处理。

1.使用及封装

使用uni.request()的步骤如下：

1. 在需要发起网络请求的页面中引入uni.request()方法。
2. 调用uni.request()方法，并传入相应的参数，包括请求地址、请求方法、请求头部和请求数据等。
3. 监听请求的成功和失败回调，并在回调函数中处理返回的数据。
   参数说明

• method 有效值：method有效值必须大写，每个平台支持的method有效值不同
• success 返回参数说明

• 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。

  /**
   * 请求组件封装
   * url 请求地址
   * data 请求参数
   * method 请求的方法 默认get请求
   * contentType 请求内容类型 1 json 强求 2 form表单请求
  */
  
  function request({url, data, method='GET', contentType = '1'}) {
  	let header = {
  		'content-type': contentType == 1 ? 'application/json' : 'application/x-www-form-urlencoded'
  	}
  	let baseUrl = 'http://192.168.0.78';
  	console.log(baseUrl + url)
  	return new Promise((resolve, reject) => {
  		uni.request({
  			url: baseUrl + url,
  			data,
  			method,
  			header,
  			success: (res) => {
  				console.log(res)
  				if (res.statusCode == 200) {
  					resolve(res.data)
  				} else if (res.statusCode == 401) {
  					uni.showToast({
  						icon: 'none',
  						title: '未登录或登录状态已超时',
  						duration:1500,
  					})
  				} else if (res.statusCode == 405) {
  					uni.showToast({
  						icon: 'none',
  						title: '请求方法错误',
  						duration:1500,
  					})
  				} else {
  					uni.showToast({
  						icon: 'none',
  						title: '请求错误' + res.statusCode,
  						duration:1500,
  					})
  				}
  			},
  		})
  	})
  }
  

  

• 返回值
  如果希望返回一个 requestTask 对象，需要至少传入 success / fail / complete 参数中的一个

  var requestTask = uni.request({
  	url: 'http://192.168.0.18:8080/request', //仅为示例，并非真实接口地址。
  	complete: ()=> {}
  });
  requestTask.abort();
  

  如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象
  通过 requestTask，可中断请求任务。
  requestTask 对象的方法列表

  方法	参数	说明
  abort		中断请求任务
  offHeadersReceived		取消监听 HTTP Response Header 事件，仅微信小程序平台支持
  onHeadersReceived		监听 HTTP Response Header 事件。会比请求完成事件更早，仅微信小程序平台支持

  const requestTask = uni.request({
  	url: 'http://192.168.0.18:8080/request', //仅为示例，并非真实接口地址。
  	data: {
          name: 'name',
          age: 18
  	},
  	success: function(res) {
  		console.log(res.data);
  	}
  });
  
  // 中断请求任务
  requestTask.abort()
  

2. https 请求配置自签名证书

uni.configMTLS(OBJECT)
https 请求配置自签名证书，只有app支持，其他都不支持

• OBJECT 参数说明

• certificate 参数说明 证书配置项

• 证书格式说明
  证书支持两种格式，文件格式和 Base64字符串格式
  1. 文件格式说明：可将证书文件放到工程的 ‘static’ 目录中（当然也可以通过请求下载到本地），然后填写文件路径，
  2. Base64String格式说明：将证书文件的二进制转换为 Base64String 字符串，然后在字符串前面添加’data:cert/pem;base64,'前缀，示例：‘data:cert/pem;base64,xxx’ xxx 代表真实的证书 base64String

uni.configMTLS({
    certificates: [{
        'host': 'www.baidu.com',
        'client': '/static/client.p12',
        'clientPassword': '123456789',
        'server': ['/static/server.cer'],
    }],
    success ({code}) {
    	// 类型是Number	成功返回 0,失败返回相应 code 码
    }
});

3.拦截器

uni.addInterceptor(STRING, OBJECT)

• STRING 参数说明
  需要拦截的api名称，如：uni.addInterceptor(‘request’, OBJECT) ，将拦截 uni.request()

  注
  仅支持异步接口，如：uni.setStorage(OBJECT)，暂不支持同步接口如：uni.setStorageSync(KEY,DATA)
  uniCloud请求云端接口时（callFunction、uploadFile等）也会使用uni.request发送请求，请确保拦截器内不错误的处理此类请求

• OBJECT 参数说明

uni.addInterceptor('request', {
  invoke(args) {
    // 在请求发送之前的处理
    console.log('请求拦截:', args);
    // 可以修改args中的参数
    // 例如: 添加token
    // args.header = args.header || {};
    // args.header['Authorization'] = 'Bearer ' + getToken();
  },
  success(args) {
    // 在请求成功之后的处理
    console.log('请求成功拦截:', args);
  },
  fail(err) {
    // 在请求失败之后的处理
    console.error('请求失败拦截:', err);
  },
  complete() {
    // 在请求结束之后的处理
    console.log('请求结束拦截');
  }
});
 uni.addInterceptor({
  returnValue(args) {
    // 只返回 data 字段
    return args.data
  }
})

• 删除拦截器
  uni.removeInterceptor(STRING)
  STRING：需要删除拦截器的api名称

// 移除请求拦截器
uni.removeInterceptor('request');

二、上传下载

1.上传 uni.uploadFile(OBJECT)

将本地资源上传到开发者服务器，客户端发起一个 POST 请求，其中 content-type 为 multipart/form-data。 如页面通过 uni.chooseImage 等接口获取到一个本地资源的临时文件路径后，可通过此接口将本地资源上传到指定服务器。

注：
1：在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
2：:App支持多文件上传，微信小程序只支持单文件上传，传多个文件需要反复调用本API。所以跨端的写法就是循环调用本API。
3：网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。
4：支付宝小程序开发工具上传文件返回的http状态码为字符串形式，支付宝小程序真机返回的状态码为数字形式

• OBJECT参数说明

  参数名	类型	必填	说明	平台差异说明
  url	String	是	开发者服务器 url
  files	Array	是（files和filePath选其一）	需要上传的文件列表。使用 files 时，filePath 和 name 不生效。	App、H5（ 2.6.15+）
  fileType	String	是	开发者服务器 url	仅支付宝小程序，且必填。
  file	File	否	要上传的文件对象。	仅H5（2.6.15+）支持
  filePath	String	是（files和filePath选其一）	要上传文件资源的路径。
  name	String	是	文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
  header	Object	否	HTTP 请求 Header, header 中不能设置 Referer。
  timeout	String	否	超时时间，单位 ms	H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
  formData	Object	否	HTTP 请求中其他额外的 form data
  success	String	否	接口调用成功的回调函数
  fail	String	否	接口调用失败的回调函数
  complete	String	否	接口调用结束的回调函数（调用成功、失败都会执行）

  // html
  <button @click="handleUpload">上传文件</button>
  // js
   uni.chooseImage({
  	  success: (chooseImageRes) => {
  			console.log(chooseImageRes)
  	  		const tempFilePaths = chooseImageRes.tempFilePaths;
  	  		uni.uploadFile({
  	  			url: 'http://192.168.0.18:8080/jeecg-boot/sys/common/uploadImagea', //仅为示例，非真实的接口地址
  	  			filePath: tempFilePaths[0],
  	  			name: 'file',
  	  		    formData: {
  	  		      'user': 'test'
  	  			},
  	  		 	success: (uploadFileRes) => {
  	  		 		console.log(uploadFileRes.data);
  	  			}
  	  		 });
  	  	}
  	  });
  

  

• 返回值
  如果希望返回一个 uploadTask 对象，需要至少传入 success / fail / complete 参数中的一个

  var uploadTask = uni.uploadFile({
  	url: 'http://192.168.0.18:8080/jeecg-boot/sys/common/uploadImagea', //仅为示例，并非真实接口地址。
  	complete: ()=> {}
  });
  uploadTask.abort();
  

  如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象
  
  通过uploadTask ，可以监听上传进度变化事件，以及取消上传任务
  uploadTask 对象的方法列表

  方法	参数	说明
  abort		中断上传任务
  onProgressUpdate	callback	监听上传进度变化
  onHeadersReceived	callback	监听 HTTP Response Header 事件。会比请求完成事件更早,仅微信小程序平台支持
  offProgressUpdate	callback	取消监听上传进度变化事件，仅微信小程序平台支持
  offHeadersReceived	callback	取消监听 HTTP Response Header 事件，仅微信小程序平台支持

   let uploadTask =	uni.uploadFile({
  	url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/uploadImagea', //仅为示例，非真实的接口地址
  	complete: ()=> {}
  });
  console.log(uploadTask)
  uploadTask.onProgressUpdate((res) => {
  	console.log(res)
  	console.log('上传进度' + res.progress);
  	console.log('已经上传的数据长度' + res.totalBytesSent);
  	console.log('预期需要上传的数据总长度' + res.totalBytesExpectedToSend);
  
  	// 测试条件，取消上传任务。
  	if (res.progress > 50) {
  		uploadTask.abort();
  	}
  });
  

  
  注：后面会有文章对uni.chooseImage的介绍

2. 下载 uni.downloadFile(OBJECT)

下载文件资源到本地，客户端直接发起一个 HTTP GET 请求，返回文件的本地临时路径。

注：
在各个小程序平台运行时，网络相关的 API 在使用前需要配置域名白名单。
在h5上是跨域的，用户需要处理好跨域问题。
网络请求的 超时时间 可以统一在 manifest.json 中配置 networkTimeout。

• OBJECT 参数说明

注： 文件的临时路径，在应用本次启动期间可以正常使用，如需持久保存，需在主动调用 uni.saveFile，才能在应用下次启动时访问得到。

• success 返回参数说明

uni.downloadFile({
	url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/file/test', //仅为示例，并非真实的资源
	success: (res) => {
		if (res.statusCode === 200) {
			console.log('下载成功');
		}
	}
});

• 返回值
  如果希望返回一个 downloadTask 对象，需要至少传入 success / fail / complete 参数中的一个。

  var downloadTask = uni.downloadFile({
  	url: 'https://www.example.com/file/test', //仅为示例，并非真实接口地址。
  	complete: ()=> {}
  });
  downloadTask.abort();
  

  如果没有传入 success / fail / complete 参数，则会返回封装后的 Promise 对象
  通过 downloadTask，可监听下载进度变化事件，以及取消下载任务。

• downloadTask 对象的方法列表

  方法	参数	说明
  abort		中断下载任务
  onProgressUpdate	callback	监听下载进度变化
  onHeadersReceived	callback	监听 HTTP Response Header 事件，会比请求完成事件更早,仅微信小程序平台支持
  offProgressUpdate	callback	取消监听下载进度变化事件，仅微信小程序平台支持
  offHeadersReceived	callback	取消监听 HTTP Response Header 事件，仅微信小程序平台支持

  const downloadTask = uni.downloadFile({
  	url: 'http://192.168.0.18:8084/jeecg-boot/sys/common/download', //仅为示例，并非真实的资源
  	success: (res) => {
  		if (res.statusCode === 200) {
  			console.log('下载成功');
  		}
  	}
  });
  
  downloadTask.onProgressUpdate((res) => {
  	console.log('下载进度' + res.progress);
  	console.log('已经下载的数据长度' + res.totalBytesWritten);
  	console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
  
  	// 满足测试条件，取消下载任务。
  	if (res.progress > 50) {
  		downloadTask.abort();
  	}
  });