vue根据url获取内容axios_Vue之通过axios来实现数据请求

Vue之通过axios来实现数据请求

Vue.js是默认没有提供ajax功能的，所以一般我们会采用axios.js插件来实现ajax请求，完成与后端的数据交互。

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。

需要注意的是，axios本质是javascript的ajax的封装，因此会受到同源策略的限制。

axios的功能

从浏览器中创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求数据和响应数据

取消请求

自动转换 JSON 数据

客户端支持防御 XSRF

下载地址

https://unpkg.com/[email protected]/dist/axios.js

https://unpkg.com/[email protected]/dist/axios.min.js

参考手册

axios发送http请求的方式的常用方法：

增 post

删 delete

改 put/patch

查 get

最常用的两种方法是axios.get()和axios.post()

// 发送get请求格式

//参数1:请求数据接口的url地址，必填，如http://www.mzitu.com/?id=200

//参数2：可选，请求参数和请求头内容,json对象，需要提供给数据接口的数据

axios.get("http://www.mzitu.com",{

params:{

id:200,

},

headers:{

//请求头

选项名:'选项值' ，

},

}).then(response=>{

//请求成功以后的回调函数

console.log('http请求成功');

console.log(response); //http的响应对象

console.log(resposne.data);//返回的数据

}).catch(error=>{

//回调函数

//请求失败或者then里面的代码出现bug的时候

console.log('http请求失败');

console.log(error.response.data);//期望从服务端返回错误信息

})

//发送post请求，使用方法与get请求类似

//参数1：必填，请求数据接口的url地址

//参数2：必填，json对象，需要提供给数据接口的参数，如果没有的话，使用{}，

//参数3:可选，json对象，请求头信息

axios.post("http://www.baidu.com/",{

username:'surpass',

password:'donotuseroot!'，

},{

headers:{

//请求头信息

选项名:'选项值' ,

}

}).then(resposne=>{

console.log(response);

}).catch(erros=>{

consolo.log(error);

})

注意：

"""

axios.delete() 的用法和参数与axios.get()一样，

axios.put()或者axios.patch的用法和参数与axios.post()一样。

在http协议中，不同的请求动作都有不同的含义，例如：

get 代表向目标服务器请求获取数据

post 代表向目标服务器请求上传数据

put 代表向目标服务器请求更新数据【修改全部数据】

patch 代表向目标服务器请求更新数据【修改部分数据】

patch 代表向目标服务器请求更新数据

delete 代表向目标服务器请求删除数据

"""

案例1:获取杭州江干区的天气信息

获取城市天气信息的api接口：

http://wthrcdn.etouch.cn/w