草庐IT

Vue接口调用（二）axios用法

XXXxxx光 2024-01-04 原文

Vue接口调用🔥

接口调用地址
Vue接口调用（一）fetch用法https://blog.csdn.net/m0_55990909/article/details/123957200
Vue接口调用（二）axios用法🔥https://blog.csdn.net/m0_55990909/article/details/123981283
Vue接口调用（三）async/await用法🔥https://blog.csdn.net/m0_55990909/article/details/123981292

axios用法

✍目录总览：

1. axios的基本特性

axios 是一个基于Promise用于浏览器和node.js的HTTP客户端。

它具有以下特征：

  • 支持浏览器和node.js
  • 支持promiseAPI
  • 自动转换JSON数据
  • 能拦截请求和响应请求
  • 转换请求数据和响应数据（请求是可以加密，在返回时也可进行解密）

2. axios的基本用法

//客户端请求
axios.get('http://localhost:3000/adata')
		.then(ret =>{
			//data属性名称是固定的，用于获取后台响应的数据
			console.log(ret.data)
		})
//服务器端响应
app.get('/adata', (req, res) => {
  res.send('Hello axios!')
})
  • 服务器端响应的是ret对象
  • data属性是我们需要的数据，获取方法：ret.data(对象.属性名)

3. axios的常用API

  • get：查询数据
  • post：添加数据
  • put：修改数据
  • delete：删除数据

4. axios的参数传递🔥

4.1 get传递参数
第一种方式

  • 通过URL传递参数

    • 1. 传统url地址 通过?传参
    //客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios get传统url地址请求传参
    axios.get('http://localhost:3000/axios?id=123')
      .then(function (ret) {
        console.log(ret.data)
      })
  </script>
</body>
//服务器响应
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})

  • 2. 通过restful形式的url（用params接收参数）
//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios getrestful形式的url请求传参
    axios.get('http://localhost:3000/axios/456').then(function(ret){
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.get('/axios/:id', (req, res) => {
  res.send('axios get (Restful) 传递参数' + req.params.id)
})

第二种方式
  • 通过params选项传递参数（比较方便，传递多个参数的 时候）
//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios get通过params选项传递参数
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function (ret) {
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.get('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})

4.2 delete传递参数

参数传递方式和get相似（两种）

  • 通过url地址传参
    • 传统url地址 通过？传参
    • restful形式的url（用params接收参数）
  • 通过params（用query接收参数）
//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios delete通过params选项传递参数
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function (ret) {
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.delete('/axios', (req, res) => {
  res.send('axios get 传递参数' + req.query.id)
})

4.3 post传递参数
第一种方式
  • 通过选项传递参数（默认传递的是json格式的数据）
//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios post传递参数
    axios.post('http://localhost:3000/axios', {
      uname: 'xuhui那束光',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.post('/axios', (req, res) => {
  res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})

  • 提交的数据格式是JSON形式，需要服务器端提供JSON支持🔥
//服务器端支持
app.use(bodyParser.json());

第二种方式
  • 通过URLsearchParams传递参数（application/x-www-for,-urlencoded）
//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios post传递参数
    var params = new URLSearchParams();
    params.append('uname', 'xuhui那束光');
    params.append('pwd', '5555');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.post('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

  • 提交的数据格式为字符串形式

4.4 put传递参数

参数传递方式与post相似（选项传参和URLsearchParams传参）

//客户端请求
<body>
  <script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    //axios put 请求传参
    axios.put('http://localhost:3000/axios/123', {
      uname: 'xuhui那束光',
      pwd: 123
    }).then(function (ret) {
      console.log(ret.data)
    })
  </script>
</body>
//服务器响应
app.put('/axios/:id', (req, res) => {
  res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
})

5.axios的响应结果

响应结果的主要属性：

  • data：实际响应回来的数据
  • headers：响应头信息
  • status：响应状态码
  • statusText：响应状态信息
axios.get('http://localhost:3000/axios').then(function (ret) {
      console.log(ret)
})

  • data绝大多数场景返回来的是JSON形式的数据🔥
//向服务器请求JSON接口
axios.get('http://localhost:3000/axios-json').then(function (ret) {
      console.log(ret.data.uname)
})
//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'xuhui',
    age: 12
  });
})
  • data是大对象ret里面的小对象🔥

通过 对象.属性名(data.uname) 可以获取对应的值

6. axios的全局配置

在发送请求前，可以做一些配置信息

  • axios.defaults.timeout = 3000；//响应超时时间
  • axios.defaults.baseURL = ‘http://localhost:3000/app’；//默认地址
  • axios.defaults.headers[ ’ mytoken’ ] = ‘aqwerarwrqrwqr’ //设置请求头
1. 默认地址演示🔥
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {
      console.log(ret.data.uname)
})

//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'xuhui',
    age: 12
  });
})

2. 设置请求头
// 配置请求的基准URL地址
axios.defaults.baseURL = 'http://localhost:3000/';
// 配置请求头信息
axios.defaults.headers['mytoken'] = 'hello';
//向服务器请求JSON接口
axios.get('axios-json').then(function (ret) {
	console.log(ret.data.uname)
})

//服务器端准备一个JSON接口
app.get('/axios-json', (req, res) => {
  res.json({
    uname: 'xuhui',
    age: 12
  });
})

  • 对于跨域请求来说，请求头是需要后台进行配置的

7. axios拦截器

1.请求拦截器🔥
  • 在请求发出之前设置一些信息

//axios请求拦截器
axios.interceptors.request.use(function(config) {
	console.log(config.url)
	config.headers.mytoken = 'nihao';
	return config;
}, function(err){
      console.log(err)
})
//向服务器发起请求
axios.get('http://localhost:3000/adata').then(function(data){
      console.log(data)
})

2.响应拦截器🔥
  • 在获取数据之前对数据做一些加工处理

//axios响应拦截器
axios.interceptors.response.use(function(res) {
      console.log(res)
      return res;
}, function(err){
      console.log(err)
})
//向服务器发起请求
axios.get('http://localhost:3000/adata').then(function (data) {
      console.log(data)
})
  1. （25行拦截器打印的信息 res）和 （31行最终需要的数据 ） 打印的信息是完全一样的。
  2. 但是，响应拦截器res中拿到的不是具体数据。

  • 在调用接口时，只关心实际的数据，不需要包装数据的对象，可以在设置拦截器内容，对接收到的数据进行处理加工🔥

  • 最后拿到的data是经过响应拦截器处理后的数据

用法axiosspanclasstokenvue.js交互

有关Vue接口调用（二）axios用法的更多相关文章

  1. 使用 ACL 调用 upload_file 时出现 Ruby S3 "Access Denied"错误 - 2

    我正在尝试编写一个将文件上传到AWS并公开该文件的Ruby脚本。我做了以下事情:s3=Aws::S3::Resource.new(credentials:Aws::Credentials.new(KEY,SECRET),region:'us-west-2')obj=s3.bucket('stg-db').object('key')obj.upload_file(filename)这似乎工作正常，除了该文件不是公开可用的，而且我无法获得它的公共(public)URL。但是当我登录到S3时，我可以正常查看我的文件。为了使其公开可用，我将最后一行更改为obj.upload_file(file

  2. c# - 如何在 ruby​​ 中调用 C# dll？ - 2

    如何在ruby​​中调用C#dll？ 最佳答案 我能想到几种可能性:为您的DLL编写(或找人编写)一个COM包装器，如果它还没有，则使用Ruby的WIN32OLE库来调用它；看看RubyCLR,其中一位作者是JohnLam，他继续在Microsoft从事IronRuby方面的工作。(估计不会再维护了，可能不支持.Net2.0以上的版本)；正如其他地方已经提到的，看看使用IronRuby，如果这是您的技术选择。有一个主题是here.请注意，最后一篇文章实际上来自JohnLam(看起来像是2009年3月)，他似乎很自在地断言RubyCL

  3. java - 从 JRuby 调用 Java 类的问题 - 2

    我正在尝试使用boilerpipe来自JRuby。我看过guide从JRuby调用Java，并成功地将它与另一个Java包一起使用，但无法弄清楚为什么同样的东西不能用于boilerpipe。我正在尝试基本上从JRuby中执行与此Java等效的操作:URLurl=newURL("http://www.example.com/some-location/index.html");Stringtext=ArticleExtractor.INSTANCE.getText(url);在JRuby中试过这个:require'java'url=java.net.URL.new("http://www

  4. ruby - 调用其他方法的 TDD 方法的正确方法 - 2

    我需要一些关于TDD概念的帮助。假设我有以下代码defexecute(command)casecommandwhen"c"create_new_characterwhen"i"display_inventoryendenddefcreate_new_character#dostufftocreatenewcharacterenddefdisplay_inventory#dostufftodisplayinventoryend现在我不确定要为什么编写单元测试。如果我为execute方法编写单元测试，那不是几乎涵盖了我对create_new_character和display_invent

  5. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  6. postman接口测试工具-基础使用教程 - 2

    1.postman介绍Postman一款非常流行的API调试工具。其实，开发人员用的更多。因为测试人员做接口测试会有更多选择，例如Jmeter、soapUI等。不过，对于开发过程中去调试接口，Postman确实足够的简单方便，而且功能强大。2.下载安装官网地址:https://www.postman.com/下载完成后双击安装吧，安装过程极其简单，无需任何操作3.使用教程这里以百度为例,工具使用简单，填写URL地址即可发送请求，在下方查看响应结果和响应状态码常用方法都有支持请求方法:getpostputdeleteGet、Post、Put与Delete的作用get：请求方法一般是用于数据查询，

  7. C51单片机——实现用独立按键控制LED亮灭（调用函数篇） - 2

    说在前面这部分我本来是合为一篇来写的，因为目的是一样的，都是通过独立按键来控制LED闪灭本质上是起到开关的作用，即调用函数和中断函数。但是写一篇太累了，我还是决定分为两篇写，这篇是调用函数篇。在本篇中你主要看到这些东西！！！1.调用函数的方法（主要讲语法和格式）2.独立按键如何控制LED亮灭3.程序中的一些细节（软件消抖等）1.调用函数的方法思路还是比较清晰地，就是通过按下按键来控制LED闪灭，即每按下一次，LED取反一次。重要的是，把按键与LED联系在一起。我打算用K1来作为开关，看了一下开发板原理图，K1连接的是单片机的P31口，当按下K1时，P31是与GND相连的，也就是说，当我按下去时

  8. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU

  9. ruby - 如何找到调用当前方法的方法 - 2

    如何找到调用此方法的位置？defto_xml(options={})binding.pryoptions=options.to_hifoptions&&options.respond_to?(:to_h)serializable_hash(options).to_xml(options)end 最佳答案 键入caller。这将返回当前调用堆栈。文档:Kernel#caller.例子[0]%rspecspec10/16|===================================================62=====

  10. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API，它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController，并且我已经阅读了几个HTTParty指南，直到我想要什么，但也许我只是有点迷路，真的不知道该怎么做。基本上，我需要做的就是调用API，获取它返回的URL，然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码？ 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

随机推荐