uniapp - サードパーティのネットワーク リクエスト

 バックグラウンド

ミニプログラム プロジェクトでは axios はサポートされておらず、オリジナルの wx.request() API 関数は比較的単純であり、インターセプターなどのグローバル カスタマイズ機能をサポートしていないため、@escook/request -miniprogram third-を使用することをお勧めします。uni-app プロジェクト パケットのパーティは、ネットワーク データ要求を開始します

 インストール

npm i @escook/request-miniprogram -S 下载网络请求包

main.js

// 导入网络请求的包
import {
	$http
} from '@escook/request-miniprogram'
uni.$http = $http
// 请求的根路径
$http.baseUrl = 'https://api-hmugo-web.itheima.net'
// 请求拦截器
$http.beforeRequest = function(options) {
	uni.showLoading({
		title: '数据加载中...'
	})
	// 判断请求的是否为有权限的 API 接口
	if (options.url.indexOf('/my/') !== -1) {
		// 为请求头添加身份认证字段
		options.header = {
			// 字段的值可以直接从 vuex 中进行获取
			Authorization: store.state.m_user.token,
		}
	}
}
// 响应拦截器
$http.afterRequest = function() {
	uni.hideLoading()
}

 使用

const {
					data: res2
				} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
					order_number: orderNumber
				})
				// 2.2 预付订单生成失败
				if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
				// 2.3 得到订单支付相关的必要参数
				const payInfo = res2.message.pay

パッケージ インターフェイス 

 1. utils フォルダーの下に新しい config.js を作成します。

var url;
if (process.env.NODE_ENV === 'development') {
	console.log('开发环境')
	url = 'https://www.uinav.com'
} else {
	console.log('生产环境')
	url = 'https://www.uinav.com'
}
export const baseUrl = url

2. utils フォルダーの下に新しい request.js を作成します。

import {
	$http
} from '@escook/request-miniprogram'

import {
	baseUrl
} from "@/utils/config.js"

const service = $http
// 请求的根路径
 $http.baseUrl = baseUrl
// 请求拦截器
$http.beforeRequest = function(options) {
	uni.showLoading({
		title: '数据加载中...'
	})
	// 判断请求的是否为有权限的 API 接口
	if (options.url.indexOf('/my/') !== -1) {
		// 为请求头添加身份认证字段
		options.header = {
			// 字段的值可以直接从 vuex 中进行获取
			Authorization: store.state.m_user.token,
		}
	}
}
// 响应拦截器
$http.afterRequest = function() {
	uni.hideLoading()
}

export default service

3. apis ファイルの下に新しい login.js を作成します。

 // 登录
 export function login(data) {
   return request.post('/login', data)
 
 }
 
 // 获取轮播图
 export function getswiperdata(data) {
   return request.get('/api/public/v1/home/swiperdata', data)
 
 }
 

4. ページ内のインターフェースを使用する

	import {
		login
	} from "@/apis/login.js"
---------------------------------------

var data2 = {
					username: this.phone,
					password: this.password
				}
				const {
					data
				} = await login(data2);
				console.log(data);
				if (data.code !== 200){
					uni.showToast({
						title: data.msg,
					});
					
				}   else{
					uni.showToast({
						title: "登录成功",
					});
				}