axios 介绍

axios 介绍

axios 是一款基于 javascript xhr 进行封装的插件,自己通过 xhr 进行编写 ajax 请求,实现起来逻辑比较复杂,axios 封装后将复杂的逻辑写在插件的内部,我们用户只需要关心如何调用即可。对我们的开发带来了很大的便捷。

安装

:::warning 注意

在 webpack 案例的基础上进行 axios 实现,请保留上个案例的代码。如需要请查看 搭建本地开发服务器

:::

通过命令安装 axios 插件

sh 复制代码
$ yarn add axios

使用

main.js 文件中编写 axios 代码。

javascript 复制代码
import axios from 'axios'

const p1 = axios({
    method: 'post',
    url: 'https://study.noxussj.top/api/login',
    data: 'account=test&password=123456',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
    }
})

p1.then((res) => {
    console.log(res.data)
})

通过 npx webpack-dev-server 命令运行项目预览效果,同时在浏览器中按 F12 打开调试工具。

可以看到接口请求成功了。

原文链接:菜园前端

相关推荐
用户21411832636027 分钟前
dify案例分享-国内首发!手把手教你用Dify调用Nano Banana2AI画图
前端
wa的一声哭了15 分钟前
Webase部署Webase-Web在合约IDE页面一直转圈
linux·运维·服务器·前端·python·区块链·ssh
GISer_Jing19 分钟前
3D Cesium渲染架剖析
javascript·3d·webgl
han_20 分钟前
前端性能优化之CSS篇
前端·javascript·性能优化
k***858424 分钟前
【SpringBoot】【log】 自定义logback日志配置
android·前端·后端
小满zs27 分钟前
Next.js第十章(Proxy)
前端
z***I3942 小时前
JavaScript爬虫应用案例
开发语言·javascript·爬虫
d***9352 小时前
Webpack、Vite区别知多少?
前端·webpack·node.js
清风徐来QCQ2 小时前
javaScript(map,ref,?,forEach,watch)
java·前端·javascript
q***73552 小时前
windows配置永久路由
android·前端·后端