axios的使用

于 2023-12-11 14:49:35 发布
阅读量737 收藏
点赞数 19
文章标签： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55269913/article/details/134926031
版权

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

如果您想在浏览器中使用 Axios，首先需要安装它。您可以使用 npm（Node 包管理器）或 yarn 来安装 Axios。例如，在命令行中输入以下命令：

shell复制代码

npm install axios

或

csharp复制代码

yarn add axios

安装完成后，您可以在 JavaScript 文件中引入 Axios，并使用它来发送 HTTP 请求。例如：

javascript复制代码

import axios from 'axios';
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});

如果您想在 node.js 中使用 Axios，首先需要安装它。在命令行中输入以下命令：

shell复制代码

npm install axios

或

csharp复制代码

yarn add axios

安装完成后，您可以在 JavaScript 文件中引入 Axios，并使用它来发送 HTTP 请求。例如：

javascript复制代码

const axios = require('axios');
axios.get('/user?ID=12345')
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script>
</head>
<body>
    <script>
        // axios({
        //     url:"",
        //     method:'',
        //     // 基础路径
        //     baseUrl:"",
        //     //get delete head 一类请求携带参数
        //     params:{

        //     },
        //     //post put patch 一类请求携带
        //     data:{

        //     },
        //     //请求头
        //     headers:{},
        //     //请求超过几秒中断请求
        //     timeout:2000
        // })



        // axios get 请求返回的是一个promise对象
    //    let res =  axios({
    //         url:"http://hmajax.itheima.net/api/ambition"
    //     }).then(res =>{
    //         console.log(res);
    //     }).catch(error=>{
    //         console.dir(error)
    //     })
    //     console.log(res);
     

    // get带参数 不需要转换数据格式 axios会自动转换为json查询字符串
    //  let res = axios({
    //     url:'http://121.199.0.35:8888/index/article/pageQuery',
    //     // get类请求携带参数选项 params只接受一个纯js对象 
    //     params:{
    //         page:1,
    //         pageSize:10
    //     }
    // })
    // console.log(res);

    // post请求 post 参数 json字符串或者表单格式数据
    // post发起请求默认数据格式为json格式 请求头Content-Type也会自动设置为application/json
    // let res =  axios({
    //     url:'http://121.199.0.35:8888/user/login',
    //     method:'post',
    //     data:{
    //         username:'admin1',
    //         password:123321
    //     }
    // })
    // console.log(res);

    //post 发起表单格式的请求
    let res = axios({
        url:"http://121.199.0.35:8888/baseUser/saveOrUpdate",
        method:'post',
        data:Qs.stringify({
            username:'aaa',
            password:1111
        }),
        headers:{
            'Authorization':'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g'
        }
    })
    console.log(res);
    </script>
</body>
</html>

axios快捷方法

<!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>
  <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.2/qs.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
</head>
<body>
  <script>
    // axios({})==>axios.request({})

    // 快捷方法 get无参  axios.get(url,请求配置项) 
    // axios.get('http://121.199.0.35:8888/index/carousel/findAll').then(res=>{
    //   console.log(res.data,'获取响应');
    // });
    // get带参 
    // axios.get('http://121.199.0.35:8888/index/article/pageQuery',{
    //   params:{
    //     page:1,
    //     pageSize:10
    //   },
    //   headers:{
    //   },
    //   timeout:2000
    // }).then(res=>{
    //   console.log(res.data,'获取响应');
    // })

    // delete head options 
    // axios.post(url,data,请求配置项) 发起post请求 数据格式会自动转为json格式
    // let data = {
    //   username:"admin1",
    //   password:123321
    // }
    // axios.post('http://121.199.0.35:8888/user/login',data,{
    //   timeout:2000,
    //   headers:{}
    // }).then(res=>{
    //   console.log(res);
    // })
    let data = {
      username:'测试用户9999888',
      password:654789,
    };
    axios.post('http://121.199.0.35:8888/baseUser/saveOrUpdate',Qs.stringify(data),{
      headers:{
        'Authorization': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJNalU9Iiwic3ViIjoiYWRtaW4xIiwiaXNzIjoiMDk4ZjZiY2Q0NjIxZDM3M2NhZGU0ZTgzMjYyN2I0ZjYiLCJpYXQiOjE3MDIyNjMyNTYsImF1ZCI6InJlc3RhcGl1c2VyIiwiZXhwIjoxNzAyNDM2MDU2LCJuYmYiOjE3MDIyNjMyNTZ9.JHmlslry8c_MfFCBH5Ld4PUxYU1-2nMWo2OhOXO3H3g"
      }
    }).then(res=>{
      console.log(res.data,'获取响应');
    })
  </script>
</body>
</html>

桃汁11
关注
  • 19
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue-axios使用
m0_57391092的博客
08-18 2117
axios使用
vue-axios使用详解
08-30
本篇文章主要介绍了vue-axios使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
axios 使用详解
热门推荐
Baimoc
05-16 3万+
一、安装 cnpm install axios 二、使用 三种写法 // 第一种写法 axios.get('/query?name=tom').then(function (response) { console.log(response); }).catch(function (error) { console.log(error); }); // 第二种写法 axios.get('/query', { params: { name: 'tom' } })
Axios使用详解
m0_67942533的博客
10-06 5329
Axios使用详解
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 2万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
React axios使用
xxxx的博客
01-27 3241
目录 一：什么是axios? 二：axios可以发起那些请求？ 三： 在React项目中如何配置axios? 1：安装axios模块 2: 在request.js中引入axios并配置 3: 接受请收发起请求 4:请求数据GET 5:POST请求 6：PUT请求 7:DELETE请求 一：什么是axios? axios是一个基于Promise的HTTP库，可以用在浏览器和node.js中。 二：axios可以发起那些请求？ GET POST PUT DELETE PATC..
Axios使用方法
singularity（奇点）
03-29 2万+
axios简介 Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 axios的优势： 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF axios的基本使用 如何引入axios 可以通过npm安装来进行使用 $ npm install axio 也可以使用 bower进行安装，然后在页
axios使用方法
Mr-yang的随笔
07-15 4636
1、基本用法 安装 cnpm i axios --save 在 main.js 中引入 axios import axios from 'axios' Vue.prototype.$axios = axios 在组件中使用 axios <script> export default { mounted(){ this.$axios.get('/goods.json').then(res=>{ console.log(res.data); }) } } &
axios使用问题
qq_38783557的博客
11-19 2221
关于axios的使用
前端网络基础 - axios使用
伏城之外的博客
02-20 5747
基于XMLHttpRequest实现AJAX的步骤非常繁琐，XMLHttpRequest发送一个HTTP请求至少需要经过如下几个步骤： 1、创建XMLHttpRequest实例xhr 2、调用xhr.open方法，设置HTTP请求方法，HTTP请求URL 3、调用xhr.send方法，发送HTTP请求 另外，XMLHttpRequest实例接收的HTTP响应通常是异步的，所以需要监听readystatechange事件，获取判断xhr.readyState状态值，当状态值为4时，才表示收到完整的异步
Axios 使用详解
qq_34185872的博客
02-16 3300
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
vue框架搭建之axios使用教程
10-18
本文重点介绍axios如何配合vue搭建项目框架,文章给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧
vue项目中axios使用详解
08-28
主要介绍了vue项目中axios使用方法以及原理介绍，如果你正巧学习这个知识点，那么参考下吧。
axios使用文档1
08-04
引入CDN的方式一个简单的例子服务器端：简单的 springboot 框架整合了 mybatis。数据库：1 promise 主要用于异步计算，可以将异步操作队
一个简单的axios使用教程，安装、封装、使用
最新发布
01-10
axios 使用教程，包括：安装、封装、使用
node.js中axios使用心得总结
10-18
主要介绍了node.js中axios使用心得总结，以及分析了中间遇到的错误，大家参考一下。
VUE和AXios使用的JS文件及Element组件库
08-10
导入使用： <script src="js/vue.js"></script> <script src="element-ui/lib/index.js"></script> <script src="js/axios-0.18.0.js"> <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
openapi-client-axios:使用 axios 使用支持 OpenAPI 的 API 的 JavaScript 客户端库
07-24
同构，适用于浏览器和 Node.js 为具有完整 IntelliSense 支持的 API 生成 TypeScript 定义 (.d.ts) 文档见DOCS.md 快速开始 npm install --save axios openapi-client-axios yarn add axios openapi-client-axios使
axios使用拦截器统一处理所有的http请求的方法.docx
01-12
axios使用拦截器统一处理所有的http请求的方法.docx
axios使用
05-27
以上是 axios 的基本使用方法，使用时需要注意的是，axios 默认使用 JSON 格式传递数据，如果需要发送 FormData 数据，需要手动设置请求头，如下所示： ```javascript const formData = new FormData() formData....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值