uni-app网络请求封装(和vue网络请求的方法类似)

  • 我这里分为三个文件js方便管理
  • env.js(管理请求的网络地址)
  • request.js(接口调用的文件)
  • servixe.js(接口的请求代码)

env.js

/**
 *  baseUrl : api调用服务器域名
 */
let baseUrl = "https:你请求的网络地址";
// 下面这个判断是判断环境切换请求的网络地址,不需要的可以删除
if (process.env.NODE_ENV === "development") {
     
  baseUrl = "http://localhost:3033/api";	
}

request.js

//这里我只是布置了需要用到的,如果要添加别的方法,请随意
import {
      baseUrl } from '@/pages/api/env'
export const request = (prams) => {
     
	return new Promise((resolve, reject) => {
     
		let url = baseUrl + prams.url;
		return uni.request({
     
			url: url,
			data: prams.query,
			dataType: 'json',
			success: (res) => {
     
				resolve(res.data);
			},
			fail: (err) => {
     
				reject(err);
			},
			complete: () => {
     
				console.log('请求完成')
			}
		});
	})
}

servixe.js

import {
      request } from '@/pages/api/request'

/**
 *  文章列表(全部)
 */
export const article = () => {
      return request({
      url:'/queryAll', method:'get'})}

/**
 *  文章列表(id查询)
 */
export const articleId = (query) => {
      return request({
      url:'/query', method:'get',query:query})}


在页面上调用:

//这里演示的是带参数的请求
import {
      queryAll, articleId } from "@/pages/api/servixe"
onLoad() {
     
	let id = '我是参数';
	articleId({
     
		id: id
	}).then((res) => {
     
		console.log(res);	//这里就是请求到的结果了
	})
},

//不带参数的请求(直接不填写即可)
article().then((res) => {
     
		console.log(res);	//这里就是请求到的结果了
	})
})

你可能感兴趣的:(uni-app,ajax,vue,vue,uni-app,ajax,https)