三种实现AJAX的方法以及Vue和axios结合使用的坑

最新推荐文章于 2024-09-20 16:29:25 发布
最新推荐文章于 2024-09-20 16:29:25 发布
阅读量515 收藏 2
点赞数
文章标签： Vue.js axios AJAX Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/aopstudio/article/details/90964263
版权

前言

之前曾经想自己写一个天气的App，并找到了一个免费的天气数据接口的服务商——和风天气，当时也不懂怎么发HTTP请求，而且也只会用Java语言，看到官方文档里面有一个Java代码示例，就复制了一下在自己电脑上调通。一开始是在控制台输出天气数据的，后来用Swing写了一个图形化界面并放置数据，但也就到此为止了，并没有什么实用价值。

最近学习了一下前端的相关知识，发现像和风天气这样的数据接口，根本不需要用到像Java这样的大型语言，只需在网页端用Javascript发HTTP请求就能获得JSON数据，之后再渲染到HTML网页，大大节省了资源利用和开发时间，并了解到开发这样的网页最适合的方式就是使用AJAX，因为它可以实现网页的局部更新。这样我就可以实现如下的业务场景：输入想要搜索的城市，点击搜索，下面显示出该城市的天气信息，而不影响页面的其他内容。有时候JS调用AJAX请求会有跨域问题，但和风天气的数据接口并没有这个问题。

具体场景

界面如图：

界面

在输入框输入城市名，点击搜索按钮，可以在下面显示出各项数据（从接口获得）。

大致的HTML代码如下：

<div class="container ">
	<div class="text-center">
	<h1>天气查询</h1>
    <div class="form-inline row">
        <input type="text" class="form-control" placeholder="关键字" id="input-location"/>
        <button class="btn btn-primary" onclick="loadBasic();loadAir();">搜 索</button>
    </div>
	</div>
    <table class="table" >
        <thead>
        <tr>
            <th>位置</th>
            <th>温度</th>
            <th>湿度</th>
            <th>能见度</th>
            <th>空气质量指数</th>
            <th>更新时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td id="loc"></td>
            <td id="tmp"></td>
            <td id="hum"></td>
            <td id="vis"></td>
            <td id="aqi"></td>
            <td id="update"></td>
        </tr>
        </tbody>
    </table>
</div>

和风天气返回的json数据示例

{
    "HeWeather6": [{
        "basic": {
            "cid": "CN101010100",
            "location": "北京",
            "parent_city": "北京",
            "admin_area": "北京",
            "cnty": "中国",
            "lat": "39.90498734",
            "lon": "116.4052887",
            "tz": "+8.00"
        },
        "update": {
            "loc": "2019-06-05 21:57",
            "utc": "2019-06-05 13:57"
        },
        "status": "ok",
        "now": {
            "cloud": "91",
            "cond_code": "104",
            "cond_txt": "阴",
            "fl": "23",
            "hum": "55",
            "pcpn": "0.0",
            "pres": "1005",
            "tmp": "23",
            "vis": "16",
            "wind_deg": "249",
            "wind_dir": "西南风",
            "wind_sc": "2",
            "wind_spd": "7"
        }
    }]
}

下面主要描述三种我自己探索经历中使用AJAX的方法

传统AJAX

原生JS就支持AJAX，这里我借鉴了一部分网上的教程里的代码，具体的代码如下：

function loadBasic() //获取基本天气信息
{        
    var xmlhttp;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        var str=xmlhttp.responseText;
        var obj=JSON.parse(str);
        document.getElementById("loc").innerHTML=obj.HeWeather6[0].basic.location;
        document.getElementById("tmp").innerHTML=obj.HeWeather6[0].now.tmp;
        document.getElementById("hum").innerHTML=obj.HeWeather6[0].now.hum+"%";
        document.getElementById("vis").innerHTML=obj.HeWeather6[0].now.vis+"km";
        }
    }
    var location=document.getElementById("input-location").value;
    xmlhttp.open("GET","https://free-api.heweather.net/s6/weather/now?location="+location+"&key=我的和风天气key",true);
    xmlhttp.send();
}
        
function loadAir() //获取空气质量信息
{       
    //仿照上面的方法
}

原生AJAX的确能够满足业务场景的要求，但操作较为繁琐，于是我又找到了另一种方法——axios

axios

axios是对原生AJAX的封装，使用时需要导入axios.js文件包。相较于原生JS，axios使用起来更为简便，同样的功能代码如下：

function loadBasic() //获取基本天气信息
{
    var location=document.getElementById("input-location").value;
    axios.get('https://free-api.heweather.net/s6/weather/now?location='+location+'&key=89d49e32a26d4067822c9ed361231e2d')
    .then(function (response) {
        document.getElementById("loc").innerHTML=response.data.HeWeather6[0].basic.location;
        document.getElementById("tmp").innerHTML=response.data.HeWeather6[0].now.tmp;
        document.getElementById("hum").innerHTML=response.data.HeWeather6[0].now.hum+"%";
        document.getElementById("vis").innerHTML=response.data.HeWeather6[0].now.vis+"km";
    })
    .catch(function (error) {
        console.log(error);
    });
}
function loadAir() //获取空气质量信息
{       
    //仿照上面的方法
}

axios是Vue.js推荐使用的实现AJAX功能的工具，Vue.js的名气我就不说了，在前端那就是如神器一般的存在。但是我们这里并没有用到Vue.js。让Vue.js和axios结合起来该怎么使用呢，请看下文

Vue.js和axios结合

一开始照着网上的教程和自己的摸索，我是这么写的（错误示范）：

var vm=new Vue({
    el: '#app',
    data: {
        inputlocation:' ',
        loc:'',
        tmp:'',
        hum:'',
        vis:'',
        aqi:'',
        update:''
        
    },
    methods: {
        loadBasic:function(){
            axios.get('https://free-api.heweather.net/s6/weather/now',{
                params:{
                    location:this.inputlocation,
                    key:'89d49e32a26d4067822c9ed361231e2d'
                }
            })
            .then(function (response) {
                this.loc=(response.data.HeWeather6[0].basic.location);
                this.tmp=response.data.HeWeather6[0].now.tmp;
                this.hum=response.data.HeWeather6[0].now.hum+"%";
                this.vis=response.data.HeWeather6[0].now.vis+"km";
            })
            .catch(function (error) {
                console.log(error);
            });
        },
        loadAir:function(){
            axios.get('https://free-api.heweather.net/s6/air/now',{
                params:{
                    location:this.inputlocation,
                    key:'89d49e32a26d4067822c9ed361231e2d'
                }
            })
            .then(function (response) {
                this.update=response.data.HeWeather6[0].update.loc;
                this.aqi=response.data.HeWeather6[0].air_now_city.aqi;
            })
            .catch(function (error) {
                console.log(error);
            });
        }

    }
})

同时HTML也有较大的改动，我在此列出：

<div class="container " id="app">
	<div class="text-center">
	<h1>天气查询</h1>
    <div class="form-inline row">
        <input type="text" class="form-control" placeholder="关键字" id="input-location" v-model="inputlocation"/>
        <button class="btn btn-primary" @click="loadBasic();loadAir()">搜 索</button>
    </div>
	</div>
    <table class="table" >
        <thead>
        <tr>
            <th>位置</th>
            <th>温度</th>
            <th>湿度</th>
            <th>能见度</th>
            <th>空气质量指数</th>
            <th>更新时间</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td id="loc">{{loc}}</td>
            <td id="tmp">{{tmp}}</td>
            <td id="hum">{{hum}}</td>
            <td id="vis">{{vis}}</td>
            <td id="aqi">{{aqi}}</td>
            <td id="update">{{update}}</td>
        </tr>
        </tbody>
    </table>
</div>

但是发现不能成功实现，而且确认数据应该是绑定上了，甚至在控制台手动执行axios方法（将this改成vm）都能成功。后来经过一番搜索，再加上室友的神助攻，发现原来axios方法里面的this已经不是指向vm对象了，因为已经经过了两层方法。这种情况在非严格模式下this会被当做window，在严格模式下this不可用。解决这个问题的方法有两种

  1. 在第一层方法内指定that=this，在第二层方法内把this替换成that
  2. 使用ES6的箭头函数

第一种方法的代码如下：

loadBasic:function(){
    let that = this;    //如果在response方法里用this，会错误
    axios.get('https://free-api.heweather.net/s6/weather/now',{
        params:{
            location:this.inputlocation,
            key:'89d49e32a26d4067822c9ed361231e2d'
        }
    })
    .then(function (response) {
        that.loc=(response.data.HeWeather6[0].basic.location);
        that.tmp=response.data.HeWeather6[0].now.tmp;
        that.hum=response.data.HeWeather6[0].now.hum+"%";
        that.vis=response.data.HeWeather6[0].now.vis+"km";
    })
    .catch(function (error) {
        console.log(error);
    });
},
loadAir:function(){
    let that = this;    //如果在response方法里用this，会错误
    axios.get('https://free-api.heweather.net/s6/air/now',{
        params:{
            location:this.inputlocation,
            key:'89d49e32a26d4067822c9ed361231e2d'
        }
    })
    .then(function (response) {
        that.update=response.data.HeWeather6[0].update.loc;
        that.aqi=response.data.HeWeather6[0].air_now_city.aqi;
    })
    .catch(function (error) {
        console.log(error);
    });
}

第二种方法的代码如下

loadBasic:function(){
    axios.get('https://free-api.heweather.net/s6/weather/now',{
        params:{
            location:this.inputlocation,
            key:'89d49e32a26d4067822c9ed361231e2d'
        }
    })
    .then((response)=> {
        this.loc=(response.data.HeWeather6[0].basic.location);
        this.tmp=response.data.HeWeather6[0].now.tmp;
        this.hum=response.data.HeWeather6[0].now.hum+"%";
        this.vis=response.data.HeWeather6[0].now.vis+"km";
    })
    .catch(function (error) {
        console.log(error);
    });
},
loadAir:function(){
    axios.get('https://free-api.heweather.net/s6/air/now',{
        params:{
            location:this.inputlocation,
            key:'89d49e32a26d4067822c9ed361231e2d'
        }
    })
    .then((response)=> {
        this.update=response.data.HeWeather6[0].update.loc;
        this.aqi=response.data.HeWeather6[0].air_now_city.aqi;
    })
    .catch(function(error) {
        console.log(error);
    });
}

最后成功用现在新潮的技术实现了我的网页，还是挺美滋滋的。

aopstudio
关注
Vue——axios实例以及与ajax对比
coising的博客
03-13 1501
复盘项目时，注意到dell老师使用的是axios实例，封装简单可用的get方法，并没有直接使用axios.get。 文章目录axios实例ajax简单的代码实现ajax关于状态码ajax与MVC二者优缺点 axios实例 *为什么要创建axios实例，与直接的axios.get有什么区别呢？ 因为在实际工作中，可能需要访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么你可以通过axios.create创建不同的实例来处理。 而且这样写代码又精简了啊喂（>○<） 另外搜索中又发现了
vue-axios-interceptors：全局捕获和处理ajax响应
02-01
将Axios与Vue使用时，可以全局捕获和处理Ajax错误。 安装 npm install vue-axios-interceptors --save // or yarn add vue-axios-interceptors // Make sure you import this package after you've imported Vue: ...
axios发送ajax请求
于小猿的博客
02-17 499
1、axios是一个独立的部分，不是vue中的一部分，但是经常将axios和vue一起使用，实现ajax操作。 2、使用场景 3、使用步骤 ①、创建HTML页面，引入js文件，包含两个js文件，vue和axios ②、创建一个json文件，写一段json代码，用于后面的调用 { "success":true, "code":20000, "message":"成功", "data":{ "items":[ {"nam
Vue使用axios实现Ajax请求
最新发布
pan_junbiao的博客
09-20 955
在实际开发过程中，浏览器通常需要和服务器端进行数据交互。而 Vue.js 并未提供与服务器端通信的接口。从 Vue.js 2.0 版本之后，官方推荐使用axios 来实现 Ajax 请求。axios 是一个基于 promise 的 HTTP 客户端。
【Vue】Vue通过axios实现Ajax请求
来日浅谈的博客
07-20 1228
【Vue】Vue通过axios实现Ajax请求1. Vue与Ajax2. 安装Axios2. get请求3. post请求4. 执行多个并发请求5. 请求方法的别名 1. Vue与Ajax vue本身是不支持发送ajax请求，需要通过其他库来实现的（比如vue1.0版本官方推荐的vue-resource、vue2.0版本官方推荐的axios），或者也可以使用jquery来发送ajax请求。 vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应
vue2.0中Ajax库(axios),在Vue组件化中利用axios处理ajax请求的使用方法
weixin_39806413的博客
08-05 254
这篇文章主要为大家详细介绍了在Vue组件化中利用axios处理ajax请求的使用方法，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。推荐方式首先在 main.js 中引入 axios代码如下：// 引入...
Vue应用axios实现Ajax请求
qq_46149597的博客
11-07 828
Vue axios的使用方式
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
总结来说，通过在Vue项目的全局配置中设置axios的`withCredentials`属性为`true`，我们可以确保在发送Ajax请求时携带cookie，从而实现身份验证和其他基于cookie的会话管理。这是一个基本的登录权限验证解决方案，但...
vue结合axios与后端进行ajax交互的方法
12-11
在早期，Vue官方推荐使用vue-resource进行AJAX（异步JavaScript和XML）通信。然而，随着时间的发展，社区更倾向于使用axios，因为axios提供了更好的性能和更丰富的特性。axios是一个基于Promise的HTTP库，既可以在...
vue axios 在页面切换时中断请求方法 ajax
12-11
Vue.prototype.$ajax=axios; const CancelToken = axios.CancelToken; let cancel; let cancelAjaxText = '中断成功'; Vue.prototype.post = function(url,data,loading){ var ajax = Vue.prototype.$ajax({ ...
Vue+MUI使用Axios异步加载列表
qq_43005276的博客
11-18 432
//JS new Vue({ el: ‘#app’, //data() { // return { // info: null // } //}, data:{ sites: “” }, mounted() { //加载数据 this.LoadData(); }, methods: { LoadData() { axios .get(Url + “/UserInfo/RoleAuthority/GetListTree”) .then(response => (this.sit
Vue Ajax请求
XWenXiang的博客
06-28 4400
前端发送 Ajax
VUE-ajax
别追我我有止咳糖浆
04-19 927
/ 利用vue-resource中的jsonp方法实现跨域请求数据，这里要注意的是：// url后面不需要跟callback=fn这个参数了，jsonp方法会自动加上id=1')//err是异常数据});
Vue中的ajax请求、Vuex、Vue UI组件库
gh_xiaohe的博客
08-04 1047
😹 作者: gh-xiaohe 😻 gh-xiaohe的博客 😽 觉得博主文章写的不错的话，希望大家三连（✌关注，✌点赞，✌评论），多多支持一下！！！
常见的HTTP状态码
cake_eat的博客
10-10 2460
什么是HTTP状态码 HTTP状态码表示客户端HTTP请求的返回结果、标记服务器端的处理是否正常或者是出现的错误。 HTTP状态码由三个十进制数字组成，第一个十进制数字定义了状态码的类型，后两个数字没有分类的作用。HTTP状态码共分为5种类型： 各类别常见状态码： 2xx （3种） 200 OK：表示从客户端发送给服务器的请求被正常处理并返回； 204 No Content：表示客户端发送给客户端的请求得到了成功处理，但在返回的响应报文中不含实体的主体部分（没有资源可以返回）； 206 Patial Co
vue中使用ajax
dkqh65140的博客
11-19 429
var vue = new Vue({ el:"#vueid", data:{ selectById : "", }, methods:{ yourMethod:function(id){ $.ajax({ ...
vue axios代替ajax发送http请求
peanut的博客
11-13 711
一、GET <div id="app"> <h1>网站列表</h1> <div v-for="site in info" > {{ site.name }} </div> </div> <script type = "text/javascript"> new Vue({ el:...
ajax、$.ajax、axios和fetch对比及其优缺点梳理
CreatorRay的博客
03-18 728
码字不易，有帮助的同学希望能关注一下我的微信公众号：Code程序人生，感谢！代码自用自取。 1.Ajax AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 1.1 工作原理 在用户和服 务器之间加了—个中间层(AJAX引擎)，使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像—些数据验证和数据处理等都交给 Ajax引擎自己来做, 只有确定需要从服务器读.
使用Axios发送Ajax请求
前端开发小白9527
08-18 373
客户端： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Axios 发送 Ajax 请求</title> <script crossorigin="
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值