Uniapp third party network request

  background

In applet project , I won't support it axios, And the original wx.request() API The function is relatively simple , Global customization functions such as interceptors are not supported . therefore ,
It is suggested that uni-app Project use @escook/request-miniprogram Third party packet initiates network data request

  install

npm i @escook/request-miniprogram -S  Download network request package 

main.js

//  Import the package requested by the network 
import {
	$http
} from '@escook/request-miniprogram'
uni.$http = $http
//  The root path of the request 
$http.baseUrl = 'https://api-hmugo-web.itheima.net'
//  Request interceptor 
$http.beforeRequest = function(options) {
	uni.showLoading({
		title: ' Data loading ...'
	})
	//  Judge whether the requested is authorized  API  Interface 
	if (options.url.indexOf('/my/') !== -1) {
		//  Add an authentication field to the request header 
		options.header = {
			//  The value of the field can be directly from  vuex  Intermediate acquisition 
			Authorization: store.state.m_user.token,
		}
	}
}
//  Response interceptors 
$http.afterRequest = function() {
	uni.hideLoading()
}

  Use

const {
					data: res2
				} = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', {
					order_number: orderNumber
				})
				// 2.2  Prepaid order generation failed 
				if (res2.meta.status !== 200) return uni.$showError(' Prepaid order generation failed ！')
				// 2.3  Get the necessary parameters related to order payment 
				const payInfo = res2.message.pay

Encapsulation interface  

 1. stay utils New under folder config.js

var url;
if (process.env.NODE_ENV === 'development') {
	console.log(' development environment ')
	url = 'https://www.uinav.com'
} else {
	console.log(' Production environment ')
	url = 'https://www.uinav.com'
}
export const baseUrl = url

2. stay utils New under folder request.js

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

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

const service = $http
//  The root path of the request 
 $http.baseUrl = baseUrl
//  Request interceptor 
$http.beforeRequest = function(options) {
	uni.showLoading({
		title: ' Data loading ...'
	})
	//  Judge whether the requested is authorized  API  Interface 
	if (options.url.indexOf('/my/') !== -1) {
		//  Add an authentication field to the request header 
		options.header = {
			//  The value of the field can be directly from  vuex  Intermediate acquisition 
			Authorization: store.state.m_user.token,
		}
	}
}
//  Response interceptors 
$http.afterRequest = function() {
	uni.hideLoading()
}

export default service

3. stay apis New under file login.js

 //  Sign in 
 export function login(data) {
   return request.post('/login', data)
 
 }
 
 //  Get the carousel 
 export function getswiperdata(data) {
   return request.get('/api/public/v1/home/swiperdata', data)
 
 }
 

4. Using interfaces in pages

	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: " Login successful ",
					});
				}