【axios】使用json-server 搭建REST API - 使用axios - 自定义axios - 取消请求 - 拦截器

最新推荐文章于 2023-07-28 07:31:39 发布
最新推荐文章于 2023-07-28 07:31:39 发布
阅读量210 收藏 2
点赞数 1
分类专栏： 前端 html 文章标签： json restful ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bhegi_seg/article/details/123374531
版权

文章目录

1. 自己创建一个API

1.1 API 的分类

  1. REST API: restful （Representational State Transfer (资源)表现层状态转化）
    (1) 发送请求进行CRUD 哪个操作由请求方式来决定
    (2) 同一个请求路径可以进行多个操作
    (3) 请求方式会用到GET/POST/PUT/DELETE
  2. 非REST API: restless
    (1) 请求方式不决定请求的CRUD 操作
    (2) 一个请求路径只对应一个操作
    (3) 一般只有GET/POST

1.2 使用json-server 搭建REST API

1.2.1 json-server 是什么

用来快速搭建REST API 的工具包

1.2.2 使用json-server

  1. 在线文档: https://github.com/typicode/json-server

  2. 下载: npm install -g json-server

  3. 目标根目录下创建数据库 json 文件: db.json

    {
    “posts”: [
    { “id”: 1, “title”: “json-server”, “author”: “typicode” },
    { “id”: 2, “title”: “json-server2”, “author”: “typicode” }
    ],
    “comments”: [
    { “id”: 1, “body”: “some comment”, “postId”: 1 }
    ],
    “profile”: { “name”: “typicode” }
    }

  4. 启动服务器执行命令: json-server --watch db.json

1.2.3 使用浏览器访问测试

http://localhost:3000/posts
http://localhost:3000/posts/1

1.2.4 使用axios 访问测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div>
    <button onclick="testGet()">GET请求</button>
    <button onclick="testPost()">POST请求</button>
    <button onclick="testPut()">PUT请求</button>
    <button onclick="testDelete()">DELETE请求</button>
  </div>

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
  <script>
    function testGet() {
最低0.47元/天 解锁文章
bhegi_seg
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios的基本使用
qq_56088882的博客
08-03 7194
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
Axios使用方法详解，从入门到进阶
最新发布
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios 使用详解
热门推荐
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
Axios 使用详解
qq_34185872的博客
02-16 3371
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
axios-case-converter:转换snake_casecamel的Axios变压器拦截器
05-28
axios-case-converter 转换snake_case / camelCase的Axios变压器/拦截器将传出data params对象键转换为snake_case 将传入的data对象键转换为camelCase 将传出的headers对象键转换为Header-Case 将传入的headers对象...
pixabay_img_finder:使用React，Axios和Material-UI的图片搜索器
05-01
它支持异步操作，使得在React组件中管理网络请求变得更加简单，同时提供了拦截请求和响应、取消请求等高级功能。 **Material-UI框架** Material-UI是React的一个流行UI库，它遵循Google的Material Design规范。...
Vue添加请求拦截器及vue-resource 拦截器使用
01-21
一、现象 统一处理错误及配置请求信息 二、解决 1、安装 axios , 命令： npm install axios --save-dev 2、在根目录的config目录下新建...// 添加请求拦截器 axios.interceptors.request.use(function (config) { 　//
vue-axios-interceptors：全局捕获和处理ajax响应
02-01
Vue-AXios拦截器 将Axios与Vue使用时，可以全局捕获和处理Ajax错误。 安装 npm install vue-axios-interceptors --save // or yarn add vue-axios-interceptors // Make sure you import this package after you've...
axios-debug-log:带有调试库的日志记录请求和响应的Axios拦截器
05-13
通过记录请求和响应的拦截器。 安装 $ npm install --save axios axios-debug-log Node.js的用法 安装：在执行任何axios之前添加require('axios-debug-log') 。 启用：在启动出色的Node.js应用程序之前，设置DEBUG...
Axios使用详解
m0_67942533的博客
10-06 5386
Axios使用详解
axios的使用
m0_60827885的博客
01-31 2232
这样我们封装的request函数就可以使用了，一般项目中我们都会创建一个文件夹用来放所有的接口，起名为api,在文件夹中创建不同页面的文件，写入不同的接口，首先要引入request。首先，需要在src文件夹下创建一个文件夹，一般取名为utils(是应用程序的简写，小方法）定义好了requst函数，如何去使用呢。引入：import axios from 'axios'一、axios是基于promiss对ajax的一种封装。在下面创建一个文件，取名为request（请求）1.1要使用axios下载引用。
Axios的介绍与使用
dafsq的博客
04-26 589
Axios的介绍与使用
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
weixin_54048131的博客
07-28 495
npm i axios-S
【axios】axios的基本使用
weixin_43790653的博客
04-01 2万+
axios是一个专注于网络请求的库。 不同于jquery，功能复杂，既可以操作dom，又可以做动画，还可以发ajax请求。axios是一个专注于网络请求的库。 一、基本使用 1.导入库文件 在js中导入axios的库文件后，会直接在全局挂载一个axios方法，就可以直接使用了。 <!-- 导入axios的库文件 --> <script src="lib/axios.js"></script> <script> console.log(axios); &
Axios简介
fj123321666的博客
03-27 4889
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiospromise异步编程的一种解决方案所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
尚硅谷前端项目开发笔记
Ly
02-05 1819
$ref $ children 和 $parent使用，通过props实现父向之传值时为什么传入数字也需要使用 v-bind 呢 ？解决使用vue-router跳转后不回顶部问题；使用编程时导航+事件委派的方式实现路由跳转；封装 axios,设置请求和响应拦截器；使用getters 数据控制台出现 undefined 红色警告；使用loadsh插件实现防抖和节流；使用 watch 侦听器 +this.$nextTick()；配置导航守卫；路由独享的守卫；本地存储与会话存储区别
axios 使用axios-retry插件后，请求拦截器里已携带config，但是响应拦截没有返回config
06-02
使用 `axios-retry` 插件后，请求拦截器里携带的 `config` 参数会被 `axios-retry` 中间件拦截并进行修改。因此，在响应拦截器中直接返回 `config` 参数可能会导致请求失败。 如果你需要在响应拦截器中获取请求的 `...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值