首页
学习
活动
专区
圈层
工具
发布

【axios】使用json-server 搭建REST API

1.1 API 的分类 REST API: restful (Representational State Transfer (资源)表现层状态转化) (1) 发送请求进行CRUD 哪个操作由请求方式来决定...(2) 同一个请求路径可以进行多个操作 (3) 请求方式会用到GET/POST/PUT/DELETE 非REST API: restless (1) 请求方式不决定请求的CRUD 操作 (2) 一个请求路径只对应一个操作...(3) 一般只有GET/POST 1.2 使用json-server 搭建REST API 1.2.1 json-server 是什么?...XHR 的 ajax 封装 (简单版axios) 2.1 特点 函数的返回值为promise, 成功的结果为response, 失败的结果为error 能处理多种类型的请求: GET/POST/PUT/...= express() // 使用cors, 允许跨域 app.use(cors()) // 能解析urlencode格式的post请求体参数 app.use(express.urlencoded()

3.7K00
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    简单入门Fetch API

    简单入门Fetch API 前言 Fetch API是使用 JavaScript请求资源的优秀工具。虽然我们开发时可能是经常使用axios,但是实际上Fetch API也能做很多一样的事。...并且使用Fetch API不需要安装axios,所以我们做一些小案例,但是需要调接口的话,Fetch API便是很好的选择,不需要安装axios,也不需要像XMLHttpRequest 对象那样子需要较多步骤...(使用方式和text()方法一样) 请求失败 请求失败的时候还是会正常执行then方法里的处理函数。(这里的失败是指服务器返回了响应,但是不是成功的请求。)...方法 上面我们直接使用fetch()方法就是GET请求,那么假如我们想要使用POST方法来进行新增数据之类的操作呢?...fetch方法的第二个参数就是自定义选项,通过自定义选项就能实现GET请求之外的请求。比如使用POST方法的时候,自定义选项就需要method来确定请求方法,以及body来确定请求体的数据。

    1.4K10

    Vue + Axios + Node.js(Express)如何实现无感刷新Token?

    在前后端分离架构中,Vue前端配合Axios发起请求,Node.js(Express)搭建后端服务时,可实现Token无感刷新以提升用户体验。...具体而言,前端Vue项目通过Axios拦截器,在每次请求前检查Token状态。若Token即将过期,先向服务端发起静默刷新请求,Express后端验证旧Token后颁发新Token。...一、技术栈与核心约定前端:Vue3(适配Vue2,只需微调语法)+Axios(统一请求拦截)后端:Node.js+Express+JWT(生成Token)+Redis(存储RefreshToken,可选但推荐...无效;403=RefreshToken过期/无效二、前端实现(核心代码)1.初始化Axios实例(api/index.js)封装请求/响应拦截器,处理Token携带、刷新和重试逻辑:importaxiosfrom'axios...(express.json());//挂载路由app.use('/api/auth',authRouter);//启动服务app.listen(port,()=>{console.log(`后端服务启动成功

    23020

    【Vue3+TypeScript】CRM系统项目搭建之 — Axiox 网络请求封装

    POST请求:POST请求通常包含请求体,用于提交数据给服务器。服务器会处理POST请求的请求体来获取提交的数据。...如下是 POST 请求简写与传入配置项写法时,关于请求体格式的一点区别: 接口 var express = require('express') var path = require('path') var...//发送请求 axios.get('get/getAll').then(res=>{ console.log(res.data.data) }); axios.post('post/getAll')...(成功的、失败的) 一种是响应方向的拦截(成功的,失败的) 拦截器作用: 比如:请求之前在请求头加token、强制登录 响应的时候可以进行相应的数据处理 请求拦截器 //创建实例 let...,将以上实例导入 比如:此模块的所有请求接口:api下的skuInfo.js //导入axios实例 const api_name = '/admin/product/skuInfo' export

    51610

    基于Node.js+Express+编写一个微信订阅号聊天机器人

    =https://registry.npm.taobao.org 运行项目 npm start 打开浏览器查看 [运行项目成功截图] 代码编写 准备一个机器人API 我这里分享一个免费的机器人API:点我获取...~ [免费的机器人API] 在项目中安装axios xml2js模块 npm i axios xml2js 修改项目目录/routers/index.js中的代码 [修改项目代码2] const express...= require('express'); const router = express.Router(); const axios = require('axios'); router.get("/..."); res.send("验证失败"); } }); // 响应用户发送来的消息 const xml2js = require('xml2js'); router.post('...[安装Node.js3] 上传源码到服务器 [上传源码到服务器1] [上传源码到服务器2] [上传源码到服务器3] 添加Node.js项目 [添加Node.js项目] 反向代理 [创建网站] [设置反向代理

    1.1K10

    AirPods 监控头部运动,同步大象机器人myCobot 280协作机械臂

    express-node.js:Express 是一个快速、开放、最小化的 Web 应用程序框架,用于 Node.js。它被设计用来构建 Web 应用程序和 API。...传感器值    axios.post(String(process.env.API_URL), {       pitch: data.attitude.pitchDeg || 0,      roll...请求中我使用了axios,它能够发送异步HTTP请求到REST端点并处理相应。...import axios from 'axios';完整的代码import axios from 'axios'; // 为了简化POST请求而添加import React, {  useEffect,...传感器值      // 不管成功还是失败都更新lastUpdateTimeRef      // 出于某种原因,没有使用await      axios        .post(String(API_URL

    62910

    openai api key获取并调用GPT-4模型部署到微信小程序示例代码

    要将GPT-4模型API部署到微信小程序并开发一个写作助手,你需要遵循以下步骤:注册并取得openai api key获取设置API访问:在OpenAI官网注册并获取API密钥确保你有足够的API使用额度创建微信小程序...GPT-4 API并获取响应将响应返回给小程序并显示给用户优化用户体验:添加加载动画实现错误处理和提示添加历史记录功能安全性考虑:在后端服务器中妥善保管API密钥实现用户认证和授权机制添加请求频率限制以防止滥用测试和调试...);const axios = require('axios');const app = express();app.use(express.json());# 快速获取OpenAI api key ➟...'https://uiuiapi.com/'app.post('/generate', async (req, res) => { try { const response = await axios.post...res.data }); }, fail: (err) => { console.error(err); wx.showToast({ title: '生成失败

    80110

    Vue + Node.js 搭建「文件上传」管理后台

    创建「上传文件」功能 我们来写一个 JS 脚本,这个脚本调用 Axios 发送 HTTP API 请求,与后端服务器通讯。...这个脚本包含 2 个功能 upload(file): POST 数据到后端,再加一个上传进度的回调,可以放个上传进度条。...Axios 提供的 post()&get() 来向后端 API 发送 POST & GET 请求 创建一个 Vue 多文件上传组件 接下来,我们来写一个 Vue 上传组件,这个组件要包含上传文件的所有基本功能...${err}`, }); } }; 设置后端 Rest API 上传文件的路径 当 Vue 前端通过 Axios 发送 HTTP 请求时,我们需要通过路由来确定服务器应该如何响应 我们来设置三种常用到的上传文件所需功能...向后端服务器发 POST 请求上传文件 [postman-post-update] 上传大于最大限制 (2MB) 的文件,500 报错。

    13.6K30

    axios笔记(二) 深入了解axios

    先来一个情景:我们要向端口 3000 发送 get 请求,要向端口 4000 发送 post 请求 通过 axios.create(config)实现: const instance1 = axios.create...所以会先触发请求拦截器,再触发响应拦截器,经过响应拦截器后才能得到数据 3.3.4 取消请求 express 知识:Express 笔记: clz 先搭建一个服务器: const express = require...,取消请求的函数可以传参,传的参数将变成请求失败时,Cancel 对象的 message(这个时候并不是 Error 对象) 取消请求优化:发送请求前取消掉未完成的请求 在点击事件最前面添加判断 if...看下下面的流程图就可能可以迎刃而解了(有错可评论指出) 为了解决上面的问题,这时候就需要使用 axios.isCancel(error)判断是不是取消请求导致的请求失败,如果是,则此时不需要把 cancel...(axios.isCancel(error)) { console.log('请求1失败: ', error.message) } else {

    3.5K10

    从加密到并发控制:Node.js实现学历认证系统的企业级最佳实践

    你将学习如何使用Node.js原生的crypto模块实现AES加密解密、如何使用axios发送HTTP请求并处理错误、如何在Express和NestJS框架中优雅地封装服务、以及如何实现带并发控制的批量查询功能...HTTP客户端:选用axios库,它提供了Promise-based的API设计,完美契合async/await语法。相比原生的http模块,axios在错误处理、请求拦截、超时控制等方面更加便捷。...模块的AES-128-CBC加密解密*-使用axios发送HTTP请求并处理响应*-完善的异常处理和错误重试机制*-支持批量查询与并发控制**@moduleEducationAPI*@author天远API...理解这些字段的业务含义,是将API集成到实际系统中的关键。响应数据层级结构API响应分为两层:外层是通用响应结构,内层是加密的业务数据。...从底层的AES加密实现,到异步并发控制,再到Express框架的优雅封装,每一个环节都充分利用了Node.js的语言特性和生态优势。

    15010
    领券