html5 前端 前端框架 axios的基本使用

Axios笔记

一、Axios引言

Axios 是一个基于的JavaScript的网络请求库，用于从浏览器向服务器发起网络请求。Axios解决的问题：

目前为止，我们学习了html、css和js以及vue。借助html和css我们可以呈现出一定的页面效果。使用js和vue我们可以将数据回显到页面。但是现在页面的数据都是硬编码的，实际场景下数据一定是来源于服务端的。而Axios就能向服务端发起网络请求，解决页面数据来源的问题。

二、Axios 基本使用

0 环境准备

在tomcat服务器中部署一个 axios-test 项目，项目中放置一个数据文件：users.json。内容如下：

[

{"id":1,"name": "小明", "age": 13, "gender": "男"},

{"id":2,"name": "小红", "age": 13, "gender": "女"},

{"id":3,"name": "小绿", "age": 4, "gender": "男"},

{"id":4,"name": "小翠", "age": 14, "gender": "女"}

]

并放置一个html文件用来学习axios（因为浏览器的限制，必须同一个项目的页面才可以访问同一个项目的数据资源），整体目录结构如下：

1 get方式发起请求

直接请求

//发送GET方式请求

axios.get("url")

.then(function(response){ //处理响应

console.log(response.data);

}).catch(function(err){//捕获异常

console.log(err);

});

示例：访问users.json数据文件

点击

new Vue({

el:"#app",

methods:{

test(){

axios.get("http://localhost:8080/axios-test/users.json").then(function(response){ //得到成功的响应，状态码200，执行then中的内容

console.log(response.data);

}).catch(function(err){

console.log(err);

});

}

}

});

携带参数请求

//1. 使用params发送请求参数

axios.get("url",{params:{/*请求参数*/}}).then(function(response){

console.log(response.data);

}).catch(function(err){

console.log(err);

});

注意:get方式发起请求如果携带参数，参数会以k=v形式拼接在url中。

1.多对数据之间使用&连接

2.请求参数和请求地址使用?连接

//2. 直接拼接k=v参数到url

axios.get("url?k1=v1&k2=v2").then(function(response){

console.log(response.data);

}).catch(function(err){

console.log(err);

});

示例：携带name和age参数发起请求

axios.get("http://localhost:8080/axios-test/users.json",{params:{name:"xiaohei",age:18}})

.then(function(response){//得到成功的响应，状态码200，执行then中的内容

console.log(response.data);

}).catch(function(err){

console.log(err);

});

axios.get("http://localhost:8080/axios-test/users.json?name=xiaohei&age=18")

.then(function(response){ //得到成功的响应，状态码200，执行then中的内容

console.log(response.data);

}).catch(function(err){

console.log(err);

});

2 post方式发起请求

直接请求

//发送POST方式请求

axios.post("url").then(function(response){//处理响应

console.log(response.data); //响应成功后，进入这里

}).catch(function(err){//捕获异常

console.log(err); //响应失败后，进入这里

});

示例：访问users.json数据文件

axios.post("http://localhost:8080/axios-test/users.json")

.then(function(response){//处理响应

console.log(response.data); //响应成功后，进入这里

}).catch(function(err){//捕获异常

console.log(err); //响应失败后，进入这里

});

携带参数请求

示例：携带name和age参数发起请求

axios.post("http://localhost:8080/axios-test/users.json",Qs.stringify({name:"xiaohei",age:18}))

.then(function(response){//处理响应

console.log(response.data); //响应成功后，进入这里

}).catch(function(err){//捕获异常

console.log(err); //响应失败后，进入这里

});

2.3 get和post的区别

get方式:

get请求不安全（数据会作为url的一部分）get请求发送数据量有限制（受限于浏览器地址栏允许的字符数量）get请求只能发送文本数据（字符串）

post方式:

post请求更安全（请求参数在请求体中）post请求发送的数据量无限制post请求能发送更多的数据类型 （文本数据和二进制文件，比如文件上传一定要使用post）

2.4 a标签和axios异步请求的区别

a标签:

请求携带的请求参数只能拼接在地址后，也就只能携带文本数据同步的请求：会发生页面跳转，响应回的结果通常会覆盖掉原有页面的内容，一旦原页面被覆盖原页面将无法使用。

axios:

请求携带的请求参数可以拼接在地址后，也可以在请求体中。可以携带各种类型的请求数据。异步请求：不进行页面跳转，新的结果不会覆盖原页面，当然也就必须手动编码将数据回显到页面。

3 综合案例

使用axios从服务器获取数据，并回显到页面。开发思路：

需要通过axios获取users.json数据通过v-for指令将数据回显到表格中axios的执行时机需要在页面加载完毕后立刻执行，也就是在create钩子函数中执行

参考文章

 您阅读本篇文章共花了： 

大家都在找：

html5：html5下载

前端：前端开发

前端框架：前端框架bootstrap