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

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

原文链接:菜园前端

相关推荐
Cobyte27 分钟前
17. Vue3 业务组件库按需加载的实现原理
前端·javascript·vue.js
谢尔登37 分钟前
原型理解从入门到精通
开发语言·javascript·原型模式
粥里有勺糖40 分钟前
视野修炼-技术周刊第127期 | Valdi
前端·javascript·github
前端世界1 小时前
从零搭建 ASP.NET 单文件 Web 项目:一个能真用的 BookShop 管理页实战
服务器·前端·asp.net
码上成长1 小时前
Vue Router 3 升级 4:写法、坑点、兼容一次讲透
前端·javascript·vue.js
BBB努力学习程序设计1 小时前
响应式页面设计与实现:让网站适配所有设备的艺术
前端·html
IT从业者张某某2 小时前
less 工具 OpenHarmony PC适配实践
前端·microsoft·less
行走的陀螺仪2 小时前
vue3-封装权限按钮组件和自定义指令
前端·vue3·js·自定义指令·权限按钮
isyuah2 小时前
vite-plugin-openapi-ts CLI 使用指南
前端·vite
qq_398586543 小时前
浏览器中内嵌一个浏览器
前端·javascript·css·css3