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

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

原文链接:菜园前端

相关推荐
鲨莎分不晴24 分钟前
【实战】老项目焕发新生:从 Webpack 平滑迁移到 Vite 避坑全记录
前端·webpack·node.js
web小白成长日记1 小时前
从零起步,用TypeScript写一个Todo App:踩坑与收获分享
前端·javascript·typescript
圣心1 小时前
Gemini 模型 介绍
前端
huangyiyi666661 小时前
前端-远程多选搜索框不能反显的问题解决
前端·javascript·vue.js·笔记·学习
敲敲了个代码1 小时前
让 Vant 弹出层适配 Uniapp Webview 返回键
前端·javascript·vue.js·学习·面试·uni-app
AOwhisky1 小时前
Ansible管理变量和事实(管理变量部分) & 部署文件到受管主机
前端·chrome·ansible
摘星编程2 小时前
React Native for OpenHarmony 实战:Accessibility 辅助功能详解
javascript·react native·react.js
小二·2 小时前
Python Web 开发进阶实战:绿色软件工程 —— 构建低能耗、低碳排的可持续应用
开发语言·前端·python
hhcccchh2 小时前
学习vue第十四天 小白学父组件传递子组件(Props)
前端·vue.js·学习
派大鑫wink2 小时前
【Day32】Tomcat 服务器:安装、配置与 Web 应用部署
服务器·前端·tomcat