本文共 2440 字，大约阅读时间需要 8 分钟。

Axios 简介

Axios是前端最流行的axaj请求库，

react与vue官方都推荐使用axios发axaj请求 可在github上查看：

axios特点

1. 基本 promise的异步ajax请求库，即返回的是promise的对象
2. 浏览器端 / node服务端都可以使用
3. 支持请求 / 响应拦截器
4. 支持请求取消
5. 请求 / 响应数据转换
6. 批量发送多个请求

Axios的使用

axios必须先导入才可以使用，使用以下代码进行导入

• 使用get或post方法即可发送对应的请求
• then方法中的回调函数会在请求成功或失败时触发
• 通过回调函数的形参可以获取响应内容，或错误信息

简单实现Axios的 get post方法

使用的api是https://autumnfish.cn/api 在这个api当中可以获取一个笑话，或者多个笑话的内容。

第一步：定义两个按钮用于实现get和post

之后先实现get方法，如下所示：

document.querySelector(".get").onclick = function() {
   	axios.get("https://autumnfish.cn/api/joke/list?num=3").then(function(response) {
   		console.log(response)	},	function(err) {
    //请求出错时触发		console.log(err)	}	)}

相同的道理，实现post方法，区别在于参数的传递。

document.querySelector(".post").onclick = function() {
   	axios.post("https://autumnfish.cn/api/user/reg", {
   		username: "yueyue1"	}).then(function(response) {
   		console.log(response)			},function(err){
   				console.log(err)			}	)}

案例实现：获取笑话

案例是一个单击按钮更新笑话的网页，笑话的内容是由https://autumnfish.cn/api/joke 提供的。具体怎么实现呢，如下：

第一步：导入vue axios相关的包，vue使用的是本地文件，axios是网上提供的

第二步：定义一个按钮，绑定一个单击事件 GetJoke ，并且在下方进行显示笑话的内容。

第三步：创建一个Vue对象，添加挂载点el，笑话数据joke:""，以及绑定的单击事件所对应的逻辑代码，如下所示：

GetJoke: function() {
   	alert("单击")	var that = this //this会被改变	axios.get("https://autumnfish.cn/api/joke").then(function(response) {
   		that.joke = response.data	})}

在这里，可以先查看response的值是什么，可以发现在response下的data就是笑话数据，其次在使用回调函数的时候，this的值会被改变，使用一个变量that进行保存。运行效果如下图所示：

案例实现：天气查询

基本逻辑与上面这个案例一致，这次使用http://wthrcdn.etouch.cn/weather_mini 这个api进行提供数据，只不过使用这个api后面需要跟上参数：?city="广州" 表示查询的是某一个城市的天气信息。如使用http://wthrcdn.etouch.cn/weather_mini?city=广州 对这个链接直接访问，就可以看到相关的信息。

首先：导入相关vue、axios包，以及定义一个文本输入框和一个按钮，给按钮绑定一个单击事件，表示单击按钮后进行查询，而文本输入框需要使用v-model进行数据的双向绑定，用来保存城市名称。 单击事件对应的方法中，修改api，

var that = this //回调函数,this值被改变axios.get('http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response)

之后把response打印出来，查找我们需要的信息，如下图所示：很显然，我们要的信息是response.data.data.forecast 这个数组。

数据有了之后，我们直接把这个数组进行保存。that.weatherArr = response.data.data.forecast 最后使用v-for把数组的内容渲染出来就可以了，<div v-for="item in weatherArr">{

{item}}</div> 为例避免后续调错，以及还添加了部分css的代码，就把整体代码放在下面：

			
   									
   
    @CSDN 庸俗的情怀
   
		
   
			
    
				
     				
     
     
			
    
			
    
				
     
      					日期 {
   {
   item.date}}
      
					{
   {
   item.low}} ~ {
   {
   item.high}}
      
					风向 {
   {
   item.fengxiang}}
      
					天气 {
   {
   item.type}}
      
					风力 {
   {
   item.fengli}}				
     
			
    
		
   
					

运行代码查看效果图：

转载地址：http://uzqzi.baihongyu.com/