uni-ajax网络请求库使用

uni-ajax网络请求库使用

uni-ajax是什么

uni-ajax是基于 Promise 的轻量级 uni-app 网络请求库,具有开箱即用、轻量高效、灵活开发

特点。

下面是安装和使用教程

  1. 安装该请求库到项目中

    javascript 复制代码
    npm install uni-ajax
  2. 编辑工具类request.js

    javascript 复制代码
    // ajax.js
    
    // 引入 uni-ajax 模块
    import ajax from 'uni-ajax'
    
    // 创建请求实例
    const instance = ajax.create({
      // 初始配置
      baseURL: 'https://meal.xvidc.com/api'
    })
    
    // 添加请求拦截器
    instance.interceptors.request.use(
      config => {
        // 在发送请求前做些什么
        return config
      },
      error => {
        // 对请求错误做些什么
        return Promise.reject(error)
      }
    )
    
    // 添加响应拦截器
    instance.interceptors.response.use(
      response => {
        // 对响应数据做些什么
        return response
      },
      error => {
        // 对响应错误做些什么
        return Promise.reject(error)
      }
    )
    
    // 导出 create 创建后的实例
    export default instance
  3. 在封装的api中引入使用

    javascript 复制代码
    import request from "@/utils/request";
    
    /**
     * 测试
     */
    export function test(data) {
      return request.get({url:"/combination/list"});
    }
  4. 页面引入使用

    javascript 复制代码
    import {test} from '@/api/api.js'
    
    test().then(res => {
    	console.log(res)
    }).catch(err => {
    	console.log(err)
    })

成功返回

参数配置说明: https://uniajax.ponjs.com/api/config

相关推荐
良木林10 分钟前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang7 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止7 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms7 小时前
前端项目集成lint-staged
前端·vue·lint-staged
谢尔登7 小时前
【React Natve】NetworkError 和 TouchableOpacity 组件
前端·react.js·前端框架
Lin Hsüeh-ch'in8 小时前
如何彻底禁用 Chrome 自动更新
前端·chrome
augenstern4169 小时前
HTML面试题
前端·html
张可9 小时前
一个KMP/CMP项目的组织结构和集成方式
android·前端·kotlin
G等你下课10 小时前
React 路由懒加载入门:提升首屏性能的第一步
前端·react.js·前端框架
蓝婷儿11 小时前
每天一个前端小知识 Day 27 - WebGL / WebGPU 数据可视化引擎设计与实践
前端·信息可视化·webgl