Entrada oficial:

Versión del paquete: consulte el directorio a continuación

1. Cree una nueva carpeta api, donde se coloca principalmente la información de la interfaz

login.js pone el método de interfaz de la página de inicio de sesión

import axios from '../util/http'
const Login = {
	 // 获取验证码
	goPhoneCode(params) {
	  return axios({
		method:'get',
		url:`/phoneCode`,
		params:params
	  })
	},
}
export default Login

index.js registra todos los métodos de interfaz

/**
 * api接口的统一出口
 */
import common from './common'
import login from './login'

export default {
  common,
  login,
}

2. Cree una nueva carpeta de utilidades y cree tres nuevos archivos

Método de caché encapsulado por auth.js

const TokenKey = 'uni_token';

// 认证令牌
export function getToken() {
	return uni.getStorageSync(TokenKey)
}

export function setToken(token) {
	return uni.setStorageSync(TokenKey, token)
}

export function removeToken() {
	return uni.removeStorageSync(TokenKey)
}

El método de interfaz de solicitud encapsulado por http.js

import {getToken,removeToken} from './auth';
import env from './env';


// 封装数据返回成功提示函数------------------------------------------------------
function successState(res) {
  let code = res.data.code;
	console.log('@return-data:')
	console.log(res)
	//公共报错提醒
	if(code !== 200){
		// 非成功状态码弹窗
		uni.showToast({
			icon: 'none',
			duration: 3000,
			title: `${res.data.msg}`
		});
	}
  // 登陆失效
  if (res.data.code === 403) {
  	// 清除本地token
  	removeToken()
  	// 关闭所有页面返回到登录页
  	uni.reLaunch({
  		url: '/pages/login/login'
  	})
  }
  console.log('/------http(END)------/')
	
  return res
}
// 封装数据返回失败提示函数------------------------------------------------------
function errorState(err) {
  // 请求失败弹窗
  uni.showToast({
  	icon: 'none',
  	duration: 3000,
  	title: '服务器错误,请稍后再试'
  });
  console.log('/------http(END)------/')
}


// 封装axios---------------------------------------------------------------------
function service(options = {}) {
	options.url = `${env.baseUrl}${options.url}`;
	// 判断本地是否存在token，如果存在则带上请求头
	if (getToken()) {
		options.header = {
			'content-type': 'application/json',
			'authorization': `${getToken()}`	// 这里是token
		};
	}
	console.log('/------http(START)------/')
  console.log('@all-url:')
  console.log(options.url)
  console.log('@params:')
  console.log(options)
	
	return new Promise((resolved, rejected) => {
		options.success = (res) => {
			successState(res)
			resolved(res)
		};
		options.fail = (err) => {
			errorState(err)
			rejected(err);
		};
		uni.request(options);
	});
}

export default service;v

env.js dirección baseurl pública y otras variables

"use strict";
/**
 * 	appid : 		小程序appid
 *  baseUrl : 		服务端域名
 */
export default {
	appid: '****',
	baseUrl: 'http://***.70.94.135:7001'
}

3. Configuración global en main.js

//接口
import api from './api'
Vue.prototype.$api = api

4. Uso específico en la página

mounted() {
		this.getLoginCap()
	},
	methods: {
		//获取验证码
		getLoginCap(){
			let phone = '13519102731'
			this.$api.login.goPhoneCode({phone}).then(res=>{
					debugger
				if(res.data.code == 200){
				}
			})
		}
	}

Abra el archivo console.log de f12 , puede ver la dirección específica, los parámetros y el valor de retorno

Método oficial: haz clic en mí para ingresar directamente

uni.solicitud(OBJETO)

Cuando se ejecuta cada plataforma del Mini Programa, las API relacionadas con la red deben configurarse con una lista blanca de nombres de dominio antes de usarse.

OBJETO descripción del parámetro

nombre del parámetro	Tipos de	Requerido	valores predeterminados	ilustrar	Descripción de la diferencia de plataforma
URL	Cuerda	sí		Dirección de la interfaz del servidor del desarrollador
datos	Objeto/Cadena/ArrayBuffer	no		solicitar parámetros	La aplicación no admite el tipo ArrayBuffer
encabezamiento	Objeto	no		Establezca el encabezado de la solicitud. El Referer no se puede establecer en el encabezado.	La aplicación y el lado H5 traerán cookies automáticamente, y el lado H5 no se puede modificar manualmente
método	Cuerda	no	OBTENER	Para valores válidos, consulte la descripción a continuación.
se acabó el tiempo	Número	no	60000	Tiempo de espera, en ms	H5 (HBuilderX 2.9.9+), APLICACIÓN (HBuilderX 2.9.9+), subprograma WeChat (2.10.0), subprograma Alipay
tipo de datos	Cuerda	no	json	Si se establece en json, intentará hacer un JSON.parse en los datos devueltos
tipo de respuesta	Cuerda	no	texto	Establezca el tipo de datos de la respuesta. Valores legales: texto, arraybuffer	El subprograma Alipay no es compatible
sslVerificar	booleano	no	cierto	verificar certificado ssl	La aplicación solo es compatible con Android (HBuilderX 2.3.3+), no es compatible con el empaquetado sin conexión
con Credenciales	booleano	no	falso	Si llevar credenciales (cookies) en solicitudes entre dominios	Solo soporte H5 (HBuilderX 2.6.15+)
primeroIpv4	booleano	no	falso	se prefiere ipv4 para la resolución de DNS	App-Android solo compatible (HBuilderX 2.8.0+)
éxito	Función	no		Reciba la función de devolución de llamada devuelta con éxito por el servidor del desarrollador
fallar	Función	no		Función de devolución de llamada para falla de llamada de interfaz
completo	Función	no		La función de devolución de llamada del final de la llamada de interfaz (la llamada se ejecutará si tiene éxito o falla)

valores válidos del método

Nota: El valor válido del método debe estar en mayúsculas. El valor válido del método admitido por cada plataforma es diferente. Para obtener más información, consulte la siguiente tabla.

método	aplicación	H5	subprograma WeChat	subprograma Alipay	subprograma Baidu	subprograma ByteDance, subprograma Feishu
OBTENER	√	√	√	√	√	√
CORREO	√	√	√	√	√	√
PONER	√	√	√	X	√	√
ELIMINAR	√	√	√	X	√	X
CONECTAR	X	√	√	X	X	X
CABEZA	X	√	√	X	√	X
OPCIONES	√	√	√	X	√	X
RASTRO	X	√	√	X	X	X

descripción del parámetro de retorno de éxito

parámetro	Tipos de	ilustrar
datos	Objeto/Cadena/ArrayBuffer	Datos devueltos por el servidor del desarrollador
código de estado	Número	El código de estado HTTP devuelto por el servidor del desarrollador
encabezamiento	Objeto	El encabezado de respuesta HTTP devuelto por el servidor del desarrollador
galletas	`Array.<string>`	Cookies devueltas por el servidor del desarrollador, formateadas como una matriz de cadenas

datos descripción de datos

Los datos finales que se envían al servidor son de tipo String, si los datos entrantes no son de tipo String, se convertirán a String. Las reglas de conversión son las siguientes:

Para GET los métodos, los datos se convierten en una cadena de consulta. Por ejemplo { name: 'name', age: 18 } , el resultado convertido es name=name&age=18.
Para los datos que son POST método y header['content-type'] son application/json , se realiza la serialización JSON.
Para los datos que son POST método y header['content-type'] son application/x-www-form-urlencoded , los datos se convertirán en una cadena de consulta.

encapsulación de método de interfaz de fondo de solicitud uni-app

Prefacio:

La interfaz de fondo de solicitud para la clasificación de métodos en uni-app. Versión de paquete personal y método oficial.