28、js - axios的基本使用

已于 2023-06-08 20:56:02 修改
阅读量270 收藏 1
点赞数
文章标签： javascript 开发语言 ecmascript 前端 前端框架 Powered by 金山文档
于 2023-06-07 10:37:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/echoliner/article/details/131082783
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

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

        // axios的使用
        // 没写method配置项，默认是get请求
        // 执行完axios()方法得到的是promise对象，所以可以在axios()方法后面使用.then().catch()
        axios({
            url: 'http://hmajax.itheima.net/api/province'
        }).then(res => {
            // 请求成功
            console.log(res);
        }).catch(error => {
            // 请求失败
            // 捕获异常
        })

        // 一、get请求
        // query查询数据（属于get请求）：需要params配置项，可以省略method配置项
        axios({
            // 浏览器控制台实际请求的url是这个：http://hmajax.itheima.net/api/city?pname=%E8%BE%BD%E5%AE%81%E7%9C%81
            url: 'http://hmajax.itheima.net/api/city',
            params: {
                pname: '辽宁省'
            }
        }).then(res => {
            console.log(res);
        })

        // 二、post请求
        // 请求数据（属于post请求）：1、需要data配置项，2、需要method配置项
        axios({
            url: 'http://hmajax.itheima.net/api/register',
            method: 'POST', // post大小写都可以
            data: {
                username: "hello1111",
                password: "123456"
            }
        }).then(res => {
            console.log(res);
        })

        // 三、delete请求
        // 删除数据（属于delete请求）：1、路径需要带上参数值（下面是带上参数id的值），2、需要method配置项
        const id = 1;
        axios({
            // 浏览器控制台实际请求的url是这个： http://hmajax.itheima.net/api/books/1
            url: `http://hmajax.itheima.net/api/books/${id}`,
            method: 'DELETE'
        }).then(res => {

        })

        // 四、put请求

    </script>
</body>

</html>
EchoLiner
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在JavaScript中使用Axios
08-12 1万+
Axios is an open source library that allows us to easily make HTTP requests. It’s effectively just fetch with extra superpowers! Axios是一个开放源代码库，使我们可以轻松地发出HTTP请求。 它实际上是通过额外的超能力来fetch ！ Let’s see thi...
ts-axios.rar
07-31
Axios 是一个基于 promise 的 HTTP 库，既可以在浏览器中使用，也可以在 Node.js 环境下运行，它的易用性和高性能深受开发者喜爱。本篇文章将通过分析 "ts-axios.rar" 中提供的源文件，探讨如何将 TypeScript 与 ...
JavaScript学习 -- axios的使用
weixin_41489908的博客
07-19 1378
axios是一种流行的JavaScript库，它提供了一个简单的API用于发送HTTP请求。在本文中，我们介绍了如何安装和导入axios、如何发送请求、如何发送POST请求、如何设置请求头以及如何发送并发请求。axios使用非常方便，几乎可以支持所有的请求类型，并具有对Promise的支持。使用时需要注意的是，我们需要处理rejected状态的Promise对象，以及进行错误处理。
一起来学javascript-axios
最新发布
m0_74762754的博客
06-13 583
/ 相比原生的 fetch，Axios 提供了更多便利的功能，如拦截请求和响应、转换请求和响应数据、取消请求等。// Axios 是一个基于 Promise 的 HTTP 库，可以用于浏览器和 Node.js，支持 Vanilla JS、Angular、React、Vue 等框架。// Axios 提供了对 GET、POST、PUT、DELETE 等HTTP方法的封装，使得进行 AJAX 请求变得更加简单。// // 处理成功情况，response.data 包含了服务器返回的数据。
javascript http库axios
weixin_34112030的博客
04-26 343
还是那个开源项目中的代码看到的： 直接看axios官方的介绍吧，里面的用法介绍很全： https://github.com/mzabriskie/axios Installing Using npm: $ npm install axios Using cdn: <script src="https://unpkg.com/axios/dist/axios.min.js...
js中axios
ssjjrr的博客
10-04 4644
js axios
vue.js axios的使用
water_Popcorn的博客
04-30 635
首先安装 ：npm install axios --save vue源码： <script> importaxiosfrom'@/axios' //导入axios exportdefault{ data(){ return{ List:[], ...
vue axios使用
xidianzxm
02-28 66
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript" ...
NodeJs - Axios实现短信验证码注册登录完整示例：NodeJs - Axios.js和附件说明
11-03
在本文中，我们将深入探讨如何使用Node.js和Axios库来实现短信验证码功能，以便在用户注册和登录过程中增加安全性和验证。Node.js是一个开放源代码、跨平台的JavaScript运行环境，它允许开发者在服务器端运行...
vue-axios的使用及其中get与post网络请求
06-23
接着，在你的主入口文件（通常是 `src/main.js`）中引入并使用 Vue-axios： ```javascript import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` ...
todolist:使用js轻松完成工作清单-axios
03-08
在这个"todolist:使用js轻松完成工作清单-axios"的项目中，我们将探讨如何利用JavaScript和axios库来构建这样一个功能丰富的应用。 首先，我们要了解JavaScript的基本语法和特性，这是编写任何JavaScript代码的基础...
封装axios.js
07-01
封装axios.js,带token拦截的，GET和POST都有，还有PUT和DELETE
Vue官方推荐AJAX组件axios.js使用方法详解与API
12-12
Axios.js作为Vue官方插件的AJAX组件其主要有以下几个特点： 1、比Jquery轻量，但处理请求不多的时候，可以使用 2、基于Promise语法标准 3、支持nodejs 4、自动转换JSON数据 Axios.js用法 axios提供了一下几种请求方式 axios.request(config) axios.get(url[, config]) axios.delete(url[, config]) axios.head(url[, config]) axios.post(url[, data[, config]]) axios.put(url[, data[, config
axios.js或axios.min.js下载
08-21
可以直接将js文件放前后端一起的项目中或项目中引用，避免在线引用的延迟。 适用于基于script标签引入的html页面
egg-axios-plus实在axios插件的封装基础上完美兼容eggjs框架，满足常用的Get、Post、Delete、Pu
01-27
标题和描述中提到的`egg-axios-plus`是一个针对Egg.js框架的`axios`插件增强版，它的目标是确保与Egg.js的完美兼容性，并提供对基本HTTP方法（GET、POST、DELETE、PUT）的支持。这意味着开发者可以在Egg.js应用中...
Axios 简单使用指南
村雨遥
10-12 572
Axios是一个开源的基于promise的HTTP请求库，一般常用于浏览器和node.js中。它能够在具有相同代码库的浏览器和nodejs中同时运行，在服务器侧，它利用服务器端原生的node.jshttp模块，而在客户端侧（一般是浏览器），则使用的是。从Vue 2.0版本开始，就极力推荐使用Axios来进行ajax以上就是本文的所有内容了，主要介绍了Axios的定义、特性、如何安装以及所支持的浏览器，然后介绍了如何使用Axios来模拟发起最常用的GET、POST、PUT以及DELETE请求。
Js进阶28-Axios专题
晴雪月乔的博客
06-27 794
前后端通信，Axios
Vue.js快速入门之四：axios安装和使用
觉醒法师的专栏
06-05 8514
Axios是一个基于promise的HTTP库，可以用在浏览器和node.js中。如果对axios进行全局配置，后自定义实例进行默认配置，后者将优先于前者。 axios安装好可以直接使用了，为什么还要自定义一个新实例，再次封装呢。其实在实际的项目开发中，特别是中大型项目，一个系统所有请求的数据源不可能只有一个，会有很多数据源。每个数据源请求和响应也会存在差异，这时就存在特殊性了，需要根据实际情况来进行处理。............
vue-axios使用
08-26
Vue.js 是一个流行的 JavaScript 框架，而 axios 是一个用于发起 HTTP 请求的库。在 Vue.js 中使用 axios 可以方便地与后端进行数据交互。 首先，你需要在项目中安装 axios。可以通过运行以下命令来使用 npm 安装： ``` npm install axios ``` 或者使用 yarn 安装： ``` yarn add axios ``` 安装完成后，你可以在需要使用 axios 的 Vue 组件中引入它： ```javascript import axios from 'axios'; ``` 接下来，你可以在组件的方法中使用 axios 发起 HTTP 请求。下面是一个简单的示例： ```javascript methods: { fetchData() { axios.get('https://api.example.com/data') .then(response => { // 请求成功时的处理逻辑 console.log(response.data); }) .catch(error => { // 请求失败时的处理逻辑 console.error(error); }); } } ``` 在上面的示例中，我们使用 axios 的 get 方法发起了一个 GET 请求，并在请求成功和失败时分别处理了响应数据和错误。 除了 get 方法，axios 还提供了其他常用的请求方法，如 post、put、delete 等。你可以根据自己的需求选择合适的方法来发送请求。 另外，如果你需要在所有的请求中设置一些默认的配置，例如设置请求头、设置基本 URL 等，你可以在项目的入口文件或者一个单独的配置文件中进行配置。以下是一个示例： ```javascript axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.headers.common['Authorization'] = 'Bearer token'; ``` 以上是简单介绍了在 Vue.js 中使用 axios 的基本流程，你可以根据自己的需求进行更复杂的配置和使用。希望对你有帮助！如果还有其他问题，请继续提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值