异步请求解决方案：Axios

最新推荐文章于 2024-04-22 17:39:51 发布

念惟忆

最新推荐文章于 2024-04-22 17:39:51 发布

阅读量1.4k

点赞数

分类专栏：前后端分离文章标签： ajax

本文链接：https://blog.csdn.net/guchengyixin/article/details/120439674

版权

前后端分离专栏收录该内容

1 篇文章 0 订阅

订阅专栏

文章目录

官方文档链接：http://www.axios-js.com/zh-cn/docs/

推荐视频链接：【编程不良人】axios 异步请求技术,已完结

推荐视频链接：网络应用-axios基本使用

另一地址博文：axios | 墨匠初心

一、 Axios是什么？

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

地位：前端最流行的 Ajax 请求库，是一个异步请求技术，React、Vue官方推荐使用 Axios 发送 Ajax请求

作用：支持请求拦截器、响应拦截器、支持请求取消、请求/响应数据转换、批量发送多个请求

异步请求：基于 XMLHttpRequest 对象发起的请求都是异步请求

异步请求特点：请求之后页面不刷新，响应回来更新的是页面的局部，多个请求之间互不影响，并行执行

技术趋势：jQuery的ajax确实是用来发送异步请求的，但是过气了，当前主流的系统架构是前后端分离，主打的技术栈是 Vue 全家桶系列，使用的异步请求技术就是 Axios

最佳实践：模板引擎 + jQuery开发服务端渲染、Vue + Axios 开发前后端分离

二、如何安装或引用 Axios

使用npm

 npm install axios

使用bower

 bower install axios

使用cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

三、接口说明

黑马程序员开放的接口：随机笑话： https://autumnfish.cn/api/joke/list

可点击 https://autumnfish.cn/api/joke/list?num=20检测此接口是否有效，建议在Chrome浏览器中安装JSON Viewer插件

请求地址： https://autumnfish.cn/api/joke/list
请求方法：get
请求参数：num

请求参数数据格式：查询字符串

参数名	参数说明	类型	备注
num	笑话条数	Number	类型为数字

响应内容：响应成功与否

黑马程序员开放的接口：用户注册：https://autumnfish.cn/api/user/reg

浏览器地址栏发出的请求为Get，可以使用postman测试工具，测试此接口是否有效

请求地址： https://autumnfish.cn/api/user/reg
请求方法：post
请求参数：username

请求参数数据格式：json格式

参数名	参数说明	类型	备注
username	用户名	String	不能为空

响应内容：随机笑话

四、小小案例

1、axios(config) 方法

参数说明：可以使用一个配置对象来创建请求

提前的提醒：如果你不熟悉配置对象这个词，那么可以简单的理解为下面这个东东:

// 这个对象字面量作为参数传入axios()方法中，就是一个配置对象
// 配置对象的一个属性就是一个配置项
// 当然，允许使用的属性名都是axios库的开发者设计好的，不要自定义属性名哟
{
    url:"https://autumnfish.cn/api/joke/list", // url 配置项 指明 请求地址
    method:"get", // method 配置项 指明 请求方法
    params:{  // params 配置项 指明 get方法的请求参数
      num:10 
    }
}

执行 GET 请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
	  url:"https://autumnfish.cn/api/joke/list", // url 配置项 指明 请求地址
	  method:"get", // method 配置项 指明 请求方法
	  params:{  // params 配置项 指明 get方法的请求参数
		num:10 
	  }
	}).then(res => {
		console.log(res);
	}).catch(err => {
		console.log(err)
	})	
</script>

执行 POST 请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	axios({
	  url:"https://autumnfish.cn/api/user/reg", // url 配置项 指明 请求地址
	  method:"post", // method 配置项 指明 请求方法
	  data:{  // data 配置项 指明 post方法的请求参数，此外适用于 put、patch
		username:"古城尘埃" 
	  }
	}).then(res => {
		console.log(res);
	}).catch(err => {
		console.log(err)
	})	
</script>

2、axios(url [,config])方法

常识补充：前端文档中的 [ ] 一般意味着此参数可以不传实参

参数说明：显然，url是请求地址

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    //  发送 GET 请求（默认的方法）
    axios('https://autumnfish.cn/api/joke/list?num=10')
	  .then(res => {
		console.log(res);
	  }).catch(err => {
		console.log(err)
	  })	
</script>

五、axios()方法的语法糖

官网描述：为方便起见，为所有的请求方法（get、post…）提供了别名（axios.get()、axios.post()…）

语法糖：在使用别名方法时，url、method、data这些属性都不必在配置中指定，params没这待遇

1、执行 POST 请求

axios.post()方法以字符串的形式传参时，Content-Type为application/x-www-form-urlencoded

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>                         // 官方推荐 使用post方法，需要传参时使用对象字面量的形式
    axios.post('https://autumnfish.cn/api/user/reg',"username=测试账号")
	  .then(function (response) {  //提醒： 当前接口的后端代码无法未对字符串形式传递的参数进行处理，但是参数确实传递了
	    console.log(response); // 建议对比去掉参数 、加上参数两种情况的响应数据
	  }).catch(function (error) {
	    console.log(error);
	  })
</script>

axios.post()方法以对象字面量形式传参时，Content-Type为application/json

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>                         // 官方推荐 使用post方法，需要传参时使用对象字面量的形式
    axios.post('https://autumnfish.cn/api/user/reg',{username:"测试账号"})
	  .then(function (response) {                   // 
	    console.log(response); // 建议对比去掉参数 、加上参数两种情况的响应数据
	  }).catch(function (error) {
	    console.log(error);
	  })
</script>

再次提醒：在使用别名方法时，url、method、data这些属性都不必在配置中指定，params没这待遇

2、执行 GET 请求

<!-- 引入axios的相关依赖 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Make a request for a user with a given ID：用给定的ID请求用户
axios.get('https://autumnfish.cn/api/joke/list?num=10')
  .then(function (response) { // 响应回来触发的回调函数
    console.log(response)  // 依旧建议对比去掉参数 、加上参数两种情况的响应数据
  })
  .catch(function (error) { // 当请求出现错误时回调函数，强调：这里是请求出错了，比如api地址错误
      console.log(error)
  })
</script>

<!-- 可选地，上面的请求可以这样做 -->
<!-- 引入axios的相关依赖 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// Make a request for a user with a given ID：用给定的ID请求用户
axios.get('https://autumnfish.cn/api/joke/list',{
	params:{
		num:10
	}
  }).then(function (response) { // 响应回来触发的回调函数
    console.log(response)  // 建议对比去掉参数 、加上参数两种情况的响应数据
  })
  .catch(function (error) { // 当请求出现错误时回调函数，强调：这里是请求出错了，比如api地址错误
      console.log(error)
  })
</script>

知识补充：

在http请求中，Content-Type默认的值为 application/x-www-form-urlencoded

这种编码格式的特点是：name/value值对，每组之间使用&连接，而name与value之间是使用 = 连接，比如name=111&password=1236，叫做查询字符串;

application/x-www-form-urlencoded ： <form encType=””>中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）

application/json： JSON数据格式

五、并发请求

并发请求：在同一时间发送多个不同的请求到后端服务，最后统一处理不同服务的响应结果

执行多个并发请求

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function test1() {
        return axios.get('https://autumnfish.cn/api/joke/list?num=10')
    }
    function test2() {
        return axios.get('https://autumnfish.cn/api/joke/list?num=10')
    }
    // axios.all()处理并发请求
    axios.all([test1(),test2()])
    .then(res=>{
        console.log(res)
    })
</script>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    function test1() {
        return axios.get('https://autumnfish.cn/api/joke/list?num=10')
    }
    function test2() {
        return axios.get('https://autumnfish.cn/api/joke/list?num=10')
    }
    // axios.all()处理并发请求
    axios.all([test1(),test2()])
    .then(
        axios.spread((res1,res2)=>{
			console.log(res1,res2)
		})
    )
</script>

总结

针对于并发请求需要用到 axios.all() 方法来完成并发请求的处理

针对于并发请求的结果汇总需要使用 axios.spread() 方法来统一汇总请求结果

拓展一：Axios应用于Vue

总结：

axios回调函数中的this指向已经改变，无法访问到Vue实例中的data中的数据

解决方案一：把 this 保存起来，回调函数中直接使用保存的 this 即可

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	var app = new Vue({
		data:{
			joke:"这是个笑话"
		},
		methods: {
			getJoke:function(){
                let that = this
				axios.get("https://autumnfish.cn/api/joke/list?num=10")
				  .then(function(response){
					that.joke = response.data.jokes
				  })
				  .catch(function(err){
					  console.log(err)
				  })
			}
		}
	}).$mount("#app")
</script>

解决方案二：使用箭头函数，是回调函数中的this指向外层对象，此时this指向未变

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
	var app = new Vue({
		data:{
			joke:"这是个笑话"
		},
		methods: {
			getJoke:function(){
				axios.get("https://autumnfish.cn/api/joke/list?num=10")
				  .then((response)=>{
					  this.joke = response.data.jokes
				  })
				  .catch((err)=>{
					  console.log(err)
				  })
			}
		}
	}).$mount("#app")
</script>

拓展二：使用axios访问微信小程序云数据库

应用场景：需要开发一个后台管理系统管理微信小程序云数据库中的数据

博主水平有限，目前只遇到了这个场景…

外部Web端访问微信小程序云数据库的方法在微信开放文档中HTTP API部分有描述

微信官方描述：HTTP API 提供了小程序外访问云开发资源的能力，使用 HTTP API 开发者可在已有服务器上访问云资源，实现与云开发的互通

外部Web端想要访问微信小程序云数据库，需要先获取access_token
要获取access_token需要使用AppID(小程序ID)和AppSecret(小程序密钥)访问APIhttps://api.weixin.qq.com/cgi-bin/token，官方说明：接口调用凭证
access_token的有效期目前为 2 个小时，需定时刷新，重复获取将导致上次获取的access_token失效

要获取AppID(小程序ID)和AppSecret(小程序密钥)，需要登录微信公众平台：开发 ==> 开发管理 ==> 开发设置（截图时间节点为2021-09-18）

提醒：此代码存在跨域问题，可以直接在浏览器地址栏中进行请求，或使用HBuilderX的内置浏览器，从而获取access_token以供学习使用

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  let api = "https://api.weixin.qq.com/cgi-bin/token" ;
  let query = "?grant_type=client_credential&appid=wxbc82f9619b0b1c17&secret=5603e826ba129b40b381e952ecb75319"
  let url = api + query;
  axios.get(url).then(res => {
	console.log(res)
  })
</script>

查询记录(数据)

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
let api = "https://api.weixin.qq.com/cgi-bin/token" ;
let query = "?grant_type=client_credential&appid=wxbc82f9619b0b1c17&secret=5603e826ba129b40b381e952ecb75319"
let url = api + query;
axios.get(url)
	.then(res => {
		//console.log(res.data.access_token)
		axios.post("https://api.weixin.qq.com/tcb/databasequery?access_token="+res.data.access_token,{
		"env":"wangyi-001-2g2kaxhk5da594ad",
		"query": "db.collection('week1').limit(10).skip(1).get()"
		}).then(res => {
		console.log(res)
		}).catch(err => {
		console.log(res)
		})
	}).catch(err => {
	console.log(res)
})
</script>

实际上，此接口使用在服务器端，这里使用node.js进行演示

const axios = require("axios")

let api = "https://api.weixin.qq.com/cgi-bin/token" ;
let query = "?grant_type=client_credential&appid=wxbc82f9619b0b1c17&secret=5603e826ba129b40b381e952ecb75319"
let url = api + query;
axios.get(url)
  .then(res => {
	  //console.log(res.data.access_token)
	  axios.post("https://api.weixin.qq.com/tcb/databasequery?access_token="+res.data.access_token,{
		"env":"wangyi-001-2g2kaxhk5da594ad",
		"query": "db.collection('week1').limit(10).skip(1).get()"
	  }).then(res => {
		console.log(res)
	  }).catch(err => {
		console.log(res)
	  })
  }).catch(err => {
	console.log(res)
})

念惟忆

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
1
评论
异步请求解决方案：Axios

文章目录一、 Axios是什么？二、如何安装或引用 Axios三、接口说明四、小小案例五、axios()方法的语法糖五、并发请求拓展一：Axios应用于Vue拓展二：使用axios访问微信小程序云数据库官方文档链接：http://www.axios-js.com/zh-cn/docs/推荐视频链接：【编程不良人】axios 异步请求技术,已完结推荐视频链接：网络应用-axios基本使用另一地址博文：axios | 墨匠初心一、 Axios是什么？官方定义：Axios 是一个基于 pro
复制链接

扫一扫