axios

一.服务器搭建

点击跟踪操作

2.安装

npm install json-server

  1. 创建db.json文件

示例:

javascript 复制代码
{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}
  1. 启动JSON Server 并指定db.json作为数据库文件

要求安装json-server 和 db.json在同一个文件夹里

$ npx json-server db.json

地址栏打开

二.认识axios

1.含义:用于浏览器和 node.js 的基于 Promise 的 HTTP 客户端

在浏览器端,可以借助axios向服务器端发送AJAX请求来获取数据

在node.js端,可以借助axios向服务器端发送HTTP请求来获取数据

2.特点

  • 从浏览器发出 XMLHttpRequests
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • JSON 数据的自动转换
  • 🆕 自动数据对象序列化和正文编码multipart/form-data``x-www-form-urlencoded
  • 用于防止 XSRF 的客户端支持

3.浏览器支持

4.安装

项目中使用包管理工具进行安装

npm install axios

yarn add axios

bower install axios

安装包后,可以使用or方法导入库:import require

import axios, {isCancel, AxiosError} from 'axios';

也可以使用默认导出,因为命名导出只是从 Axios 工厂重新导出:

import axios from 'axios';

console.log(axios.isCancel('something'));

如果使用 for 导入,则只有默认导出可用require

const axios = require('axios');

console.log(axios.isCancel('something'));

如果在尝试将模块导入自定义或旧环境时出错, 可以尝试直接导入 Module 包:

const axios = require('axios/dist/browser/axios.cjs'); // browser commonJS bundle (ES2017)

// const axios = require('axios/dist/node/axios.cjs'); // node commonJS bundle (ES2017)

CDN安装:

使用 jsDelivr CDN(ES5 UMD 浏览器模块)安装:

<script src="https://cdn.jsdelivr.net/npm/axios@1.6.7/dist/axios.min.js"></script>

使用 unpkg CDN安装:

<script src="https://unpkg.com/axios@1.6.7/dist/axios.min.js"></script>

  1. 关于axios的配置,学习阶段直接使用jsDelivr CDN引入安装即可

注意,要在vue3项目中引入axios,是在index.html文件中进行引入,而不是在组件中进行引入。这样它会在整个应用的 HTML 文件中加载。

该网址资源有时访问较慢,可换为国内资源

搜索bootcdn.cn

进行选择

相关推荐
前端_学习之路20 分钟前
React--Fiber 架构
前端·react.js·架构
coderlin_22 分钟前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说38 分钟前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409191 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding1 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜1 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui
SevgiliD1 小时前
el-button传入icon用法可能会出现的问题
前端·javascript·vue.js
我在北京coding1 小时前
Element-Plus-全局自动引入图标组件,无需每次import
前端·javascript·vue.js
鱼 空1 小时前
解决el-table右下角被挡住部分
javascript·vue.js·elementui
柚子8161 小时前
scroll-marker轮播组件不再难
前端·css