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 打开调试工具。

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

原文链接:菜园前端

相关推荐
一只小bit几秒前
Qt 信号与槽:信号产生与处理之间的重要函数
前端·c++·qt·cpp·页面
m0_376137945 分钟前
DevUI主题系统进阶:CSS-in-JS与暗黑模式无缝切换架构
javascript·css·架构·devui
nono牛8 分钟前
30天Shell脚本编程实战(14天逆袭)
前端·chrome·bash
晚霞的不甘10 分钟前
实战深研:构建高可靠、低延迟的 Flutter + OpenHarmony 智慧教育互动平台(支持离线教学、多端协同与国产化适配)
前端·javascript·flutter
董世昌4115 分钟前
前端跨域问题:原理、8 种解决方案与实战避坑指南
开发语言·前端·javascript
吃炸鸡的前端24 分钟前
Vite创建react项目
前端·react.js·前端框架
IT_陈寒26 分钟前
Redis性能提升40%!我用这5个冷门但高效的配置优化了千万级QPS应用
前端·人工智能·后端
晚霞的不甘26 分钟前
实战精研:构建高安全、多模态的 Flutter + OpenHarmony 智慧医疗健康应用(符合 HIPAA 与医疗器械软件规范)
javascript·安全·flutter
雨季66627 分钟前
Flutter 智慧金融零售服务平台:跨端协同升级金融便民体验
开发语言·javascript·ecmascript
GISer_Jing28 分钟前
SSE Conf 大会分享——AI Native 3D开发革命,让创意不再被技术门槛阻挡(推荐!!!)
前端·人工智能·3d·信息可视化