axios的用法

已于 2023-01-26 18:52:14 修改
阅读量745 收藏 2
点赞数
分类专栏： JavaScript 文章标签： javascript 前端 ajax axios
于 2023-01-03 21:29:23 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52851967/article/details/128539648
版权

1、什么是axios

  • Axios 是专注于网络数据请求的库。
  • 相比于原生的 XMLHttpRequest 对象，axios 简单易用。
  • 相比于 jQuery，axios 更加轻量化，只专注于网络数据请求。

功能特点:

  • 在浏览器中发送 XMLHttpRequests 请求
  • 在 node.js 中发送 http请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 等等

2、axios请求方式

支持多种请求方式:

axios(config)
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.patch(url[, data[, config]])

有时候, 我们可能需求同时发送两个请求

  • 使用 axios.all, 可以放入多个请求的数组.
  • axios.all([]) 返回的结果是一个数组，使用 axios.spread 可将数组 [res1,res2] 展开为 res1, res2 

3、常见的配置选项

参数

说明

请求地址

url: '/user',

请求类型

method: 'get',

请根路径

baseURL: 'http://www.mt.com/api',

请求前的数据处理

transformRequest:[function(data){}],

自定义的请求头

headers:{'x-Requested-With':'XMLHttpRequest'},

URL查询对象

params:{ id: 12 },

查询对象序列化函数

paramsSerializer: function(params){ },

request body

data: { key: 'aa'},

超时设置

timeout: 1000,

请求后的数据处理

transformResponse: [function(data){}],

4、示例代码

4.1、常见请求演练 

// 1.发送request请求
axios.request({
    url: "http://123.207.32.32:8000/home/multidata",
    method: "get"
}).then(res => {
    console.log("res:", res.data)
})

// 2.发送get请求
axios.get(`http://123.207.32.32:9001/lyric?id=500665346`).then(res => {
    console.log("res:", res.data.lrc)
})
axios.get("http://123.207.32.32:9001/lyric", {
    params: {
        id: 500665346
    }
}).then(res => {
    console.log("res:", res.data.lrc)
})


// 3.发送post请求
axios.post("http://123.207.32.32:1888/02_param/postjson", {
    name: "coderwhy",
    password: 123456
}).then(res => {
    console.log("res", res.data)
})

axios.post("http://123.207.32.32:1888/02_param/postjson", {
    data: {
        name: "coderwhy",
        password: 123456
    }
}).then(res => {
    console.log("res", res.data)
})

4.2、额外补充

// 1.baseURL
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置
axios.defaults.baseURL = baseURL
axios.defaults.timeout = 10000
axios.defaults.headers = {}

// 1.1.get: /home/multidata
axios.get("/home/multidata").then(res => {
    console.log("res:", res.data)
})

// 1.2.get: /home/data

// 2.axios发送多个请求
// Promise.all
axios.all([
    axios.get("/home/multidata"),
    // 有完整地址是，baseURL不会生效
    axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => { // 只有两个都有结果时，才能调用then
    console.log("res:", res)
})

5、axios的创建实例

为什么要创建axios的实例呢?

  • 当我们从axios模块中导入对象时, 使用的实例是默认的实例；
  • 当给该实例设置一些默认配置时, 这些配置就被固定下来了.
  • 但是后续开发中, 某些配置可能会不太一样；
  • 比如某些请求需要使用特定的baseURL或者timeout等.
  • 这个时候, 我们就可以创建新的实例, 并且传入属于该实例的配置信息.

示例代码

// axios默认库提供给我们的实例对象
axios.get("http://123.207.32.32:9001/lyric?id=500665346")

// 创建其他的实例发送网络请求
const instance1 = axios.create({
    baseURL: "http://123.207.32.32:9001",
    timeout: 6000,
    headers: {}
})

instance1.get("/lyric", {
    params: {
        id: 500665346
    }
}).then(res => {
    console.log("res:", res.data)
})

const instance2 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 10000,
    headers: {}
})

6、请求和响应拦截器

axios的也可以设置拦截器：拦截每次请求和响应

  • axios.interceptors.request.use(请求成功拦截, 请求失败拦截)
  • axios.interceptors.response.use(响应成功拦截, 响应失败拦截)

代码示例

// 对实例配置拦截器
axios.interceptors.request.use((config) => {
    console.log("请求成功的拦截")
    // 1.开始loading的动画

    // 2.对原来的配置进行一些修改
    // 2.1. header
    // 2.2. 认证登录: token/cookie
    // 2.3. 请求参数进行某些转化

    return config
}, (err) => {
    console.log("请求失败的拦截")
    return err
})

axios.interceptors.response.use((res) => {
    console.log("响应成功的拦截")

    // 1.结束loading的动画

    // 2.对数据进行转化, 再返回数据
    return res.data
}, (err) => {
    console.log("响应失败的拦截:", err)
    return err
})

axios.get("http://123.207.32.32:9001/lyric?id=500665346").then(res => {
    console.log("res:", res)
}).catch(err => {
    console.log("err:", err)
})

7、axios发起GET请求

axios 发起 get 请求的语法：

axios.get('url', { params: { /*参数*/ } }).then(callback)

具体的请求示例如下：

 // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/get'
 // 请求的参数对象
 var paramsObj = { name: 'zs', age: 20 }
 // 调用 axios.get() 发起 GET 请求
 axios.get(url, { params: paramsObj }).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(res)
 })

8、axios发起POST请求

axios 发起 post 请求的语法：

axios.post('url', { /*参数*/ }).then(callback)

具体的请求示例如下：

 // 请求的 URL 地址
 var url = 'http://www.liulongbin.top:3006/api/post'
 // 要提交到服务器的数据
 var dataObj = { location: '北京', address: '顺义' }
 // 调用 axios.post() 发起 POST 请求
 axios.post(url, dataObj).then(function(res) {
     // res.data 是服务器返回的数据
     var result = res.data
     console.log(result)
 })

9、直接使用axios发起请求

axios 也提供了类似于 jQuery 中 $.ajax() 的函数，语法如下：

 axios({

     method: '请求类型',

     url: '请求的URL地址',

     data: { /* POST数据 */ },

     params: { /* GET参数 */ }

 }) .then(callback)

（1）直接使用axios发起GET请求

 axios({
     method: 'GET',
     url: 'http://www.liulongbin.top:3006/api/get',
     params: { // GET 参数要通过 params 属性提供
         name: 'zs',
         age: 20
     }
 }).then(function(res) {
     console.log(res.data)
 })

（2）直接使用axios发起POST请求

 axios({
     method: 'POST',
     url: 'http://www.liulongbin.top:3006/api/post',
     data: { // POST 数据要通过 data 属性提供
         bookname: '程序员的自我修养',
         price: 666
     }
 }).then(function(res) {
     console.log(res.data)
 })

10、完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/axios.js"></script>
</head>

<body>
  <button id="btn1">发起GET请求</button>
  <button id="btn2">发起POST请求</button>
  <button id="btn3">直接使用axios发起GET请求</button>
  <button id="btn4">直接使用axios发起POST请求</button>

  <script>
    document.querySelector('#btn1').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsObj = { name: 'zs', age: 20 }
      axios.get(url, { params: paramsObj }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn2').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/post'
      var dataObj = { address: '北京', location: '顺义区' }
      axios.post(url, dataObj).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn3').addEventListener('click', function () {
      var url = 'http://www.liulongbin.top:3006/api/get'
      var paramsData = { name: '钢铁侠', age: 35 }
      axios({
        method: 'GET',
        url: url,
        params: paramsData
      }).then(function (res) {
        console.log(res.data)
      })
    })

    document.querySelector('#btn4').addEventListener('click', function () {
      axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post',
        data: {
          name: '娃哈哈',
          age: 18,
          gender: '女'
        }
      }).then(function (res) {
        console.log(res.data)
      })
    })
  </script>
</body>

</html>

11、axios请求库封装（简洁版）

封装axios类，index.js

import axios from 'axios'

class HYRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }

  request(config) {
    return new Promise((resolve, reject) => {
      this.instance.request(config).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }

  get(config) {
    return this.request({ ...config, method: "get" })
  }

  post(config) {
    return this.request({ ...config, method: "post" })
  }
}

export default new HYRequest("http://123.207.32.32:9001")

main.js中测试

import {createApp} from 'vue'
import axios from 'axios'
import App from './App.vue'
import hyRequest from './service'

createApp(App).mount('#app')

// ==========测试===========

hyRequest.request({
    url: "/lyric?id=500665346"
}).then(res => {
    console.log("res:", res)
})

hyRequest.get({
    url: "/lyric",
    params: {
        id: 500665346
    }
}).then(res => {
    console.log("res:", res)
})
悠然予夏
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue axios用法教程详解
08-29
Vue Axios用法教程详解 Vue Axios是Vue.js生态系统中的一款流行的HTTP客户端库，由Matt Zabriskie创建，用于替代Vue.js中的Vue Resource插件。下面我们将对Vue Axios的用法进行详细的介绍。 Axios的安装和引入 ...
Axios使用方法详解，从入门到进阶
青春木鱼的博客
08-16 3万+
Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js中。Axios（相比于原生的XMLHttpRequest对象来说） 简单易用,（相比于jQuery）axios包尺寸小且提供了易于扩展的接口，是专注于网络请求的库。
axios的基本使用
qq_56088882的博客
08-03 7221
Axios是专注于的库。相比于原生的对象，axios。相比于jQuery，axios更加，只专注于网络数据请求。文档: https://github.com/axios/axios。
Axios的概述和基本使用
最新发布
liufang_imei的博客
05-05 670
Ajax。
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 使用详解
qq_34185872的博客
02-16 3378
拦截器，类似于中间件的概念，是 axios 的核心功能之一，主要是分为两种：请求拦截器和响应拦截器。表示服务器响应的数据类型，可以是 ‘arraybuffer’, ‘blob’, ‘document’, ‘json’, ‘text’, ‘stream’使用 axios 暴露出来的 get,post,delete,put 等请求方法，参数设置同第 2 种 axios(url[, config])一般用于对一个目标方法的前置或后置切片操作，可以将一些额外的脏逻辑写到其他的文件中管理，提高目标方法的简洁性。
Axios使用详解
m0_70314224的博客
10-08 4226
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。
axios基本入门用法教程
08-31
Vue 2.0 之后，官方推荐使用 Axios 替代 vue-resource，因为 Axios 提供了更丰富的功能和更好的性能。 ### Axios 的基本使用 #### 安装 可以通过 npm 或 bower 来安装 Axios： ```bash npm install axios # 或 ...
在vue组件中使用axios的方法
08-27
在Vue组件中使用Axios的方法 在Vue项目中，Axios是一个非常流行的 HTTP 客户端库，用于发送 HTTP 请求。那么，在Vue组件中如何使用Axios呢？下面我们将详细讲解如何在Vue组件中使用Axios。 首先，在使用Axios之前...
axios语法
longfan_的博客
04-23 1074
axios语法
axios常用语法
weixin_50736511的博客
04-11 5225
1.基本写法 第一种写法 axios.get('/data.json').then((res)=>{ console.log(res) }) 第二种 axios({ method:'get', url:'/data.json' }).then((res)=>{ console.log(res) }) 当要携带参数 第一种 axios.get('/data.json',{ params:{ id:12
【网络请求之Axios】axios的基础用法
在热爱技术的路上一直前行。
06-11 1万+
代码： 结果： 代码： 结果： 结果： axios的返回值是一个Promise类型。代码： 结果： 结果： 注意：这里的请求体参数可以直接写在{}中，而不用加data 结果： 黑马vue视频，感谢llb老师。建议学习axios之前先了解一下http协议。...
Axios的介绍与使用
dafsq的博客
04-26 590
Axios的介绍与使用
axios的使用
m0_60827885的博客
01-31 2239
这样我们封装的request函数就可以使用了，一般项目中我们都会创建一个文件夹用来放所有的接口，起名为api,在文件夹中创建不同页面的文件，写入不同的接口，首先要引入request。首先，需要在src文件夹下创建一个文件夹，一般取名为utils(是应用程序的简写，小方法）定义好了requst函数，如何去使用呢。引入：import axios from 'axios'一、axios是基于promiss对ajax的一种封装。在下面创建一个文件，取名为request（请求）1.1要使用axios下载引用。
Vue2和Vue3axios的如何使用,Vue3全局配置axios,axios全局配置
weixin_54048131的博客
07-28 506
npm i axios-S
axios的使用及说明
m0_72167535的博客
01-01 1792
第一个函数是在请求前进行一个配置，如可以在请求头中添加token，进行请求url前缀的配置，请求参数的映射配置，防止数据重复提交的配置。③创建自定义请求头中必须使用中划线，不能使用下划线，使用下划线需要在nginx中添加额外的配置让下划线生效，默认是忽略下滑线的。①使用2中直接使用的方法，需要在main.js文件中导入axios的配置文件，在其他地方使用时依然导入axios进行使用。首先需要从data中获取后端响应的信息，对状态码进行判断，成功时，直接返回data，失败时，进行信息提示。
细谈Axios中那些不为人知的秘密！一文读懂Axios
纸飞机博客
08-19 1万+
Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。Axios支持Promise API，拦截请求与响应，转换请求数据和响应数据，取消请求自动转换JSON数据客户端，支持防御XSRF。
Vue 网络处理 - axios 异步请求的使用，请求响应拦截器（最佳实践）
CYK_byte的博客
10-16 1万+
axios 用来在前端页面发起一个异步请求，请求之后页面不动，响应回来刷新局部.1.为什么不使用 ajax 呢？官方：在 jQuery 中推荐使用 ajax 技术， Vue 里面不推荐使用 jQuery 框架，因此 Vue 更推荐使用 axiox 异步请求库（axios并不是 vue 官方库）.2.axios 特性可以从浏览器中创建 XMLHttpRequests可以从 node.js 中创建 http 请求.支持 Promise API.支持拦截请求和响应.转换请求数据和响应数据.
vue的axios用法
08-25
- *2* [vue axios用法教程详解](https://download.csdn.net/download/weixin_38513669/12776235)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠然予夏

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值