浅学一下axios

1. 简介

axios是一个基于Promise ,作用于nodejs和浏览器中的网络请求库。

具有以下特性:

  • 从浏览器创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 超时处理
  • 查询参数序列化支持嵌套项处理
  • 自动将请求体序列化为: JSON (application/json) Multipart / FormData (multipart/form-data) URL encoded form (application/x-www-form-urlencoded)
  • 将 HTML Form 转换成 JSON 进行请求
  • 自动转换JSON数据
  • 获取浏览器和 node.js 的请求进度,并提供额外的信息(速度、剩余时间)
  • 为 node.js 设置带宽限制
  • 兼容符合规范的 FormData 和 Blob(包括 node.js)
  • 客户端支持防御XSRF

2. json server

2.1简介

json-server是一款json数据服务器,它运行 Express 服务器,可以对json文件、js脚本生成的json数据、远程json数据进行restful风格的增删改查操作,通过 指定一个json文件作为api数据源 ,可以进行分页、排序、关联查询、范围查询等各种查询操作,是一套完整的模拟 REST API 接口

使用json-server需要注意:

  • 查询数据使用 GET
  • 新增数据使用 POST
  • 删除数据使用 DELETE
  • 修改数据使用 PUT 和 PATCH

2.2 安装

npm install -g json-server

2.3 db.json

在项目目录创建一个db.json文件

json 复制代码
{
  "users": [
    {
      "id":1,
      "name": "codeyu",
      "age": 20,
      "addr": "江苏南京"
    },
    {
      "id":2,
      "name": "xiaoming",
      "age": 22,
      "addr": "江苏苏州"
    }
  ]
}

2.4 启动服务

进入项目目录,打开终端输入 json-server --watch db.json

3. axios快速上手

3.1 在html中使用

xml 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>axios</title>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  <script>
    axios.get("http://localhost:3000/users").then(res => {
      console.log(res.data);
    })
  </script>
</body>
</html>

3.2 在vue3项目中使用

准备一个vue3项目:

npm create vue@latest

安装axios:

npm install axios

xml 复制代码
<template>
  <div>
    <h1>welcome to axios</h1>
  </div>
</template>
​
<script setup lang="ts">
import axios from 'axios';
​
axios.get('http://localhost:3000/users').then(res => {
  console.log(res.data);
})
</script>
相关推荐
幽络源小助理5 小时前
SpringBoot基于Mysql的商业辅助决策系统设计与实现
java·vue.js·spring boot·后端·mysql·spring
鱼樱前端7 小时前
今天介绍下最新更新的Vite7
前端·vue.js
炒毛豆9 小时前
vue3.4中的v-model的用法~
前端·vue.js
阳火锅10 小时前
都2025年了,来看看前端如何给刘亦菲加个水印吧!
前端·vue.js·面试
夕水11 小时前
ew-vue-component:Vue 3 动态组件渲染解决方案的使用介绍
前端·vue.js
我麻烦大了11 小时前
实现一个简单的Vue响应式
前端·vue.js
aklry12 小时前
uniapp三步完成一维码的生成
前端·vue.js
用户261245834016113 小时前
vue学习路线(11.watch对比computed)
前端·vue.js
阑梦清川14 小时前
Java后端项目前端基础Vue(二)
vue.js
雪碧聊技术15 小时前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model