axios专题（李强）01-安装json-server，引入axios，基本使用，其他方式发送请求，响应结果的结构，配置对象，默认配置，创建实例对象发送请求，拦截器，取消请求，文件结构说明

最新推荐文章于 2024-06-11 15:21:59 发布
最新推荐文章于 2024-06-11 15:21:59 发布
阅读量172 收藏
点赞数
分类专栏： Ajax 文章标签： json 其他 ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43745804/article/details/120815609
版权
1、安装json server

这并不是真的服务器
1、npm安装

npm install -g json-server

2、创建一个包含数据的json文件

{
  "posts": [
    {"id": 1,"title": "json-server","author": "typicode"}
  ],
  "commets": [
    {"id": 1,"body": "some comment","postId": 1}
  ],
  "profile": {"name": "typicode"}
}

3、启动json server
在工作目录下，即db.json所在目录

json-server --watch db.json

结果：启动服务
在这里插入图片描述

2、axios概念

可以用axios发送ajax请求和http请求
支持promise API操作
等等

3、引入axios
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>demo page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>

  <script>
    console.log(axios)
  </script>
</body>
</html>
4、axios的基本使用

先启动json server

json-server --watch db.json

浏览db.json的数据

http://localhost:3000/posts

在这里插入图片描述
axios的基本操作

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="send_post">发送post请求</button>
  <button id="send_put">发送put请求</button>
  <button id="send_delete">发送delet请求</button>


</div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const send_post=document.querySelector('#send_post')
  const send_put=document.querySelector('#send_put')
  const send_delete=document.querySelector('#send_delete')
  //发送get请求
  send_primary.addEventListener('click',function () {
    //发送ajax请求
    axios({
      method:'get',
      url:'http://localhost:3000/posts/2'
    }).then(response => {
      console.log(response.data)
    })
  })
  //发送post请求
  send_post.addEventListener('click',function () {
    console.log('put----')
    //发送ajax请求
    axios({
      method: 'post',
      url: 'http://localhost:3000/posts',
      //设置请求体
      data: {
        title: '中国忠旺自曝严重经营困难3高管辞职',
        author: '新浪网'
      }
    }).then(response => {
      console.log(response.data)
    })
  })
  //发送更新put请求
  send_put.addEventListener('click',function () {
    //发送ajax请求
    axios({
      method: 'put',
      url: 'http://localhost:3000/posts/4',
      //设置请求体
      data: {
        title: '苹果MacBook Pro发布 采用自研M1 Pro芯片 有刘海',
        author: '环球网'
      }
    }).then(response => {
      console.log(response.data)
    })
  })
  //发送删除delete请求
  send_delete.addEventListener('click',function () {
    //发送ajax请求
    axios({
      method: 'delete',
      url: 'http://localhost:3000/posts/4',
    }).then(response => {
      console.log(response.data)
    })
  })

</script>

</body>
</html>
5、axios的其他方式发送请求

以上是上例的数据及服务器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="send_post">发送post请求</button>
  <button id="send_put">发送put请求</button>
  <button id="send_delete">发送delet请求</button>


</div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const send_post=document.querySelector('#send_post')
  const send_put=document.querySelector('#send_put')
  const send_delete=document.querySelector('#send_delete')
  //发送get请求
  send_primary.addEventListener('click',function () {
    //发送ajax请求
    axios.request({
      method:'get',
      url:'http://localhost:3000/commets'
    }).then(response=>{
      console.log(response)
    })
  })
  //发送post请求
  send_post.addEventListener('click',function () {
    //发送ajax请求
    axios.post(
      //不是以对象的形式填入请求地址
      'http://localhost:3000/commets',
      //设置请求体，请求体是对象形式
      {
        body: '我是一条默不作声的评论',
        postid: 2
      }
    ).then(response => {
      console.log(response)
    })
  })

</script>

</body>
</html>

在这里插入图片描述

6、axios响应结果的结构

config：配置对象
data：响应体
headers：响应头信息
request：原生ajax请求对象
status：响应状态码
statusText：响应状态字符串
在这里插入图片描述

7、axios配置对象

config就是配置对象
url：请求地址
method：请求方式
baseURL：请求的baseURL
transformRequest:参数序列化的配置对象
transformResponse:
headers:请求头
params：对象，请求参数，如{id：12345}
以下传参方式都是可以的

/post?a=100&b=22
/post/a/100/b/200
/post/a.100/b.22
params:{
	a:100,
	b:33
}

在这里插入图片描述

8、axios默认设置
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="send_post">发送post请求</button>
  <button id="send_put">发送put请求</button>
  <button id="send_delete">发送delet请求</button>


</div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const send_post=document.querySelector('#send_post')
  const send_put=document.querySelector('#send_put')
  const send_delete=document.querySelector('#send_delete')

  //默认配置
  //设置默认的请求方式
  axios.defaults.method='get'
  //设置baseURL
  axios.defaults.baseURL='http://localhost:3000'
  //设置默认参数
  axios.defaults.params={i:100,a:'hello'}
  //设置默认的timeout
  axios.defaults.timeout=3000
  //发送get请求
  send_primary.addEventListener('click',function () {
    //发送ajax请求
    axios.request({
      method:'get',
      url:'/commets'
    }).then(response=>{
      console.log(response)
    })
  })
  //发送post请求
  send_post.addEventListener('click',function () {
    //发送ajax请求
    axios.post(
      //不是以对象的形式填入请求地址
      'http://localhost:3000/commets',
      //设置请求体，请求体是对象形式
      {
        body: '我是一条默不作声的评论',
        postid: 2
      }
    ).then(response => {
      console.log(response)
    })
  })
  //也可以使用封装好的方法直接发送请求
  send_post.addEventListener('click',function(){
    //使用axios对象
    axios_object.get('/getJoke').then(response=>{
      console.log(response)
    })
  })

</script>

</body>
</html>
9、创建实例对象发送请求
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="send_post">发送post请求</button>
 </div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const send_post=document.querySelector('#send_post')

  //发送get请求，
  const axios_object=axios.create({
    baseURL:'https://api.apiopen.top',
    timeout:2000
  })

  send_primary.addEventListener('click',function(){
    //使用axios对象
    axios_object({
      url:'/getJoke'
    }).then(response=>{
      console.log(response)
    })
  })

  //也可以使用封装好的方法直接发送请求
  send_post.addEventListener('click',function(){
    //使用axios对象
    axios_object.get('/getJoke').then(response=>{
      console.log(response)
    })
  })

</script>

</body>
</html>
10、拦截器interceptors

一些函数，请求拦截器，响应拦截器，把关人作用
设置一个请求拦截器

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="send_post">发送post请求</button>
 </div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const send_post=document.querySelector('#send_post')

  axios.interceptors.request.use(function (config) {
    console.log('请求拦截器成功---111')//先进后执行，先进后出
    //可以修改config的参数
    config.params={a:100}
    return config
    // throw '自己抛出的异常'
  },function(error){
    console.log('请求拦截器失败')
    return Promise.reject(error)
  })

  axios.interceptors.request.use(function (config) {
    console.log('请求拦截器成功---222')//就近先执行,后进先出
    //可以修改config的参数
    config.timeout=3000
    return config
    // throw '自己抛出的异常'
  },function(error){
    console.log('请求拦截器失败')
    return Promise.reject(error)
  })

  axios.interceptors.response.use(function (response) {
    console.log('响应拦截器成功---111')
    return response
  },function(error){
    console.log('响应拦截器失败')
    return Promise.reject(error)
  })

  axios.interceptors.response.use(function (response) {
    console.log('响应拦截器成功----222')
    return response
  },function(error){
    console.log('响应拦截器失败')
    return Promise.reject(error)
  })

  axios({
    method:'get',
    url:'http://localhost:3000/posts'
  }).then(response=>{
    console.log('自定义成功的回调函数')
  }).catch(reason => {
    console.log('自定义失败的回调函数')
  })


</script>

</body>
</html>
11、取消请求
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test page</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

</head>
<body>
<div>
  <h2>axios的基本使用</h2>
  <button id="send_primary">发送get请求</button>
  <button id="cacel_send">取消请求</button>
 </div>
<script>
  const send_primary=document.querySelector('#send_primary')
  const cacel_send=document.querySelector('#cacel_send')
  //声明全局变量
  let cancel=null

  send_primary.addEventListener('click',function(){
    if (cancel!== null){
      cancel()
    }
    axios({
      method:'get',
      url:'http://localhost:3000/posts',
      //添加配置对象返回的是一个函数
      cancelToken:new axios.CancelToken(function (c) {
        cancel=c//把c这个函数传给了全局变量cancel
      })
    }).then(respone=>{
        console.log(respone)
        cancel=null//如果成功了，再把全局的cancel改回去
    })
  })

  cacel_send.addEventListener('click',function(){
      cancel()

  })

</script>

</body>
</html>
12、文件结构说明

dist:打包后的文件
lib：核心目录
lib/adapter：适配器，发送请求和爬虫之类相关的内容
lib/cancel：cancel取消请求，里面有cancelToken，iscancel，cancel三个文件
core：Axios.js，等等，不打了
在这里插入图片描述

心湖中的石子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
json-server
m0_62956518的博客
04-23 1万+
jsonserver,前端非常实用的一个技术，vue3可以对json中的数据进行操作
Nodejs的安装及环境配置
liufeifeinanfeng的博客
10-10 2857
1、下载安装包 下载地址：https://nodejs.org/zh-cn/download/ 根据自己电脑系统及位数选择，我这里选择windows64位.msi格式安装包 msi和.zip格式区别： 1、.msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windowsinstaller的数据包，把所有和安装文件相关的内容封装在一个包里。 2、.zip是一个压缩包，解压之后即可，不需要安装 下载完成后，双击安装包，开
json-server(利用数据自动生成后端接口)的安装和使用、Vue3中axios的安装、封装和使用
最新发布
qq_63064285的博客
06-11 996
很容易想到，有时候多个页面需要用到同一个请求地址，仍然有很多重复的代码，并且在渲染页面写请求数据占据了很多空间，不利于维护。为了解决这种问题，我们可以将不同的请求地址封装为一个方法，这样我们只有时只需要调用方法传参就可以获得请求数据了，这里仅提供一个想法，不做具体的介绍。
json-server 详解
瓜皮伦的博客
06-11 1899
这几天在写react的前端项目,想着后端接口没有,在网上也找不到比较合适的接口,所以在github和npm上翻了许久关于前端简单生成后端接口的工具,终于被找到了这个神仙工具。
『前端必备』本地数据接口—json-server 详细介绍（入门篇）
zhou139856的博客
07-13 5847
前端必备的本地接口数据之 json-server 详细介绍
json-server搭建使用
专治八阿哥的孟老师
04-01 2018
在开发过程中，接口多半是滞后于页面开发的。利用JSON Server快速搭建模拟返回REST风格的后台数据，保证前后端开发的分离。前后端开发只要设定好接口以及数据的定义，剩下的就可以各自开发，最后集成测试。JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。依赖express开发而来，可以进行深度定制。
使用axios发送post请求,将JSON数据改为form类型的示例
10-16
今天小编就为大家分享一篇使用axios发送post请求,将JSON数据改为form类型的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
use-axios-client:使用钩子在React中发出axios请求
03-10
使用钩子在React中发出axios请求。 安装 使用npm： $ npm install use-axios-client 与纱线： $ yarn add use-axios-client 例子 import { useAxios } from 'use-axios-client' ; export default ( ) => { const...
axios-mp-adapter:允许在微信小程序中发出请求的Axios适配器
05-02
axios-mp-适配器安装使用npm： npm i axios-mp-adapter --save-dev例子var axios = require ( 'axios' ) ;var mpAdapter = require ( 'axios-mp-adapter' ) ;axios ( { url : 'https://foo.bar' , adapter : ...
SimpleRouteWithReact:这是一个简单的网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据
05-20
这是一个简单的React网站，它使用react-router-dom进行页面之间的导航，还使用axios从JSON API获取数据。入门使用此应用之前，请检查您的PC是否具有reactJs工作环境。 打开Git Bash。 将当前工作目录更改为要克隆...
1分钟学会使用json-server
MOAN.小M.的博客
04-20 2749
json-server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。 简单的说，它可以模拟小型后台接口，在一个JSON文件中操作数据，是基于的node.js的一个模块
json-server的学习笔记
lalala_dxf的博客
12-23 1974
json-server 是一款小巧的接口模拟工具，一分钟内就能搭建一套 Restful 风格的 api，尤其适合前端接口测试使用。只需指定一个 json 文件作为 api 的数据源即可，使用起来非常方便开源地址主页地址Github项目地址创建一个文件。{\\?id=:id中的\\是转义使用--routes选项启动JSON 服务器。现在可以使用其他路线访问资源。1、返回一个 Express 服务器。2、返回 JSON 服务器使用的中间件。options选项static静态文件的路径logger。
json-server环境搭建
qq_60976312的博客
08-25 1337
json-server环境搭建
json-server全攻略-前端必备技能
张培跃的个人博客
09-03 3953
在项目的初始阶段，后端提供的接口或数据可能是不完整的，作为一名前端开发工程师，不可避免的要使用mock的数据。如果此时的你不想使用简单的静态数据，而是想自己在本地启动一个server来模拟请求相关的操作，那么json-server是一个不错的选择。 json-serve可以帮助我们快速搭建一个mock-server本地服务，可以根据不同的后缀获取到不同的数据。 一、准备工作 1、安装Node 由于json-server需要通过Node对其进行启动，所以首先要安装Node。Node可自行安装，在此不再进行.
Json-server的使用步骤
haust_允谦的博客
07-13 396
json-server的使用步骤
Axios 请求配置参数详解
热门推荐
Wisdom—Yoga—TaciturnKnight（WYT）
06-23 9万+
axios API可以通过向 axios 传递相关配置来创建请求axios(config)// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios(url[, config])// 发送...
vue 通过axios插件来应用json
忘缘
06-06 2521
在vue想要正常的调用json文件，我们通常可以使用axios插件来满足这个需求，下面我们来看具体操作。 1、安装 cnpm i axios -S //i 是install 的简写 -S就是–save的简写,写入到 dependencies 对象 2、配置 当配置文件中出现了axios，那就说明安装成功了，但是这个时候还不可以直接使用，我们需要对他进行注册。怎么注册呢，如下： 在main.js文件中加入上面两行代码便实现了全局注册，在这里，用红框圈起来的是自己写的，不过使用$http或者 $a
配置axios请求实例对象，封装axios请求
Gomeer的博客
04-04 2465
src根目录下创建config/axios.js 1.引入axios，vue，router import axios from 'axios' import router from '../router' import Vue from 'vue'; 2.创建实例 使用自定义配置创建axios的新实例 const axiosInstance = axios.create({ ...
json接口和json-server
冠日的个人博客
03-25 646
免费的json接口:http://www.bejson.com/knownjson/webInterface/ 我的easy-mock接口:https://www.easy-mock.com/mock/5ce69d5222cb5b3fc52cc89f/insex json-server,作用:使用一个json文件,作为数据库. 通过一个命令,打开一套增删改查的接口 传送门:https:/...
使用axios请求json-server的数据，url会自动拼接id
05-29
是的，axios和其他HTTP客户端库也可以用来请求JSON数据。和使用curl一样，当你向JSON-Server发送GET请求时，URL会自动拼接id字段以获取对应的数据。 以下是一个使用axios获取JSON-Server数据的简单示例： ```javascript import axios from 'axios'; // 发送GET请求，获取所有帖子数据 axios.get('http://localhost:3000/posts').then(response => { console.log(response.data); }); // 发送GET请求，获取id为1的帖子数据 axios.get('http://localhost:3000/posts/1').then(response => { console.log(response.data); }); // 发送POST请求，创建新的帖子数据 axios.post('http://localhost:3000/posts', { title: 'New Post', author: 'John Doe' }).then(response => { console.log(response.data); }); ``` 在上面的示例中，我们首先使用axios发送GET请求获取所有帖子数据，然后使用GET请求获取id为1的帖子数据，最后使用POST请求创建一个新的帖子。 当我们使用GET请求获取数据时，axios会自动将id字段拼接到URL中。例如，当我们使用`axios.get('http://localhost:3000/posts/1')`请求获取id为1的帖子数据时，axios会将URL设置为`http://localhost:3000/posts/1`，这将返回id为1的帖子数据。 希望这个示例能够帮助你更好地了解如何使用axios请求JSON-Server数据，并自动拼接id字段获取对应的数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值