Axios基本用法 - 千语创想

Axios基本用法如下：

axios({options})

axios.get(url,{options});

GET传参方式：

1.通过url传参

2.通过params选项传参

POST传参方式：

axios.post(url,data,{options});

默认情况下，axios将JavaScript对象序列化为JSON。要以application / x-www-form-urlencoded格式发送数据，您可以使用以下选项之一。

传值方式:

1.自己拼接为键值对

2.使用transformRequest，在请求发送前将请求数据进行转换

3.如果使用模块化开发，可以使用qs模块进行转换

get和post的区别

Vue中axios中箭头函数的this和function（response）函数体中的this的区别

1、在methods下的函数this指向的是当前创建的vue实例，

2、axios与后台交互后回调函数的内部的this指向window而并非指向当前的vue实例，

3、若想拿到后台回传的数据更新data里的数据，不能在回调函数中直接使用this，要用外部函数定义的变量（如：_this）存储的this，也就是当前vue的实例。

4、使用箭头函数之后，箭头函数指向的函数内部的this已经绑定了外部的vue实例了

Axios的get请求代码示例

<!DOCTYPE html>

<html>

<head>

<title>axios请求</title>

</head>

<body>

<tr>

<td v-for="value in columnName">{{value}}</td>

</tr>

<td>{{student.id}}</td>

<td>{{student.name}}</td>

<td>{{student.age}}</td>

<td>{{student.email}}</td>

</tr>

</table>

</div>

</body>

let vm = new Vue({

el: "#app",

data() {

return {

columnName: {

no: "编号",

name: "姓名",

age: "年龄",

email: "邮箱"

students: [{

"id": 1001,

"name": "锺勇",

"age": 20,

"email": "t@t.com"

}]

}

methods: {

//发送axios的get请求

sendAxiosGet1() {

//把当前vue对象赋值给_this

let _this = this;

//axios().then().catch(); 格式

axios({

url: "http://rap2api.taobao.org/app/mock/238982/students",

//method表示get/post请求

method: "get",

//请求服务器时参数

params: {},

//服务端响应(返回)的数据格式

responseType: "json",

//服务端响应数据编码

responseEncoding: "utf-8"

}).then(function (response) { //请求成功后的回调函数

console.dir(response);

//response.data 服务端返回的数据

console.dir(response.data)

console.dir(response.data.students)

console.log(this)//window对象

console.log(_this);//vue对象

//response.data固定的, students自定义

_this.students = response.data.students;

}).catch(function (e) {

console.dir(e);

}); //请求失败后的回调函数

}

})

</script>

</html>

Axios的post请求和传参方式代码示例

<!DOCTYPE html>

<html>

<head>

<title>axios请求</title>

</head>

<body>

<tr>

<td v-for="value in columnName">{{value}}</td>

</tr>

<td>{{student.id}}</td>

<td>{{student.name}}</td>

<td>{{student.age}}</td>

<td>{{student.email}}</td>

</tr>

</table>

</div>

</body>

let vm = new Vue({

el: "#app",

data() {

return {

columnName: {

no: "编号",

name: "姓名",

age: "年龄",

email: "邮箱"

students: [{

"id": 1001,

"name": "锺勇",

"age": 20,

"email": "t@t.com"

}]

}

methods: {

//发送axios的get请求

sendAxiosGet1() {

//把当前vue对象赋值给_this

let _this = this;

//axios().then().catch(); 格式

axios({

url: "http://rap2api.taobao.org/app/mock/238982/students",

method: "get", //method表示get/post请求

params: {}, //请求服务器时参数

responseType: "json", //服务端响应(返回)的数据格式

responseEncoding: "utf-8", //服务端响应数据编码

}).then(function (response) { //请求成功后的回调函数

console.dir(response);

//response.data 服务端返回的数据

console.dir(response.data)

console.dir(response.data.students)

console.log(this)//window对象

console.log(_this);//vue对象

//response.data固定的, students自定义

_this.students = response.data.students;

}).catch(function (e) {

console.dir(e);

}); //请求失败后的回调函数

sendAxiosGet2() {

axios({

//请求的地址

url: "http://rap2api.taobao.org/app/mock/238982/students",

//get 请求参数, get请求就会把数据拼接到url上

//http://rap2api.taobao.org/app/mock/238982/students?p1=A&p2=B

//params: {p1: 'A', p2: 'B'}转换成 ?p1=A&p2=B

params: {p1: 'A', p2: 'B'},

//请求方法

method: "get",

//响应的数据类型

responseType: "json",

//响应的数据编码

responseEncoding: "utf-8",

}).then((response) => {

//服务端返回的数据 response.data

console.log(response.data);

console.log(this);//this表示vue对象

this.students = response.data.students;

}).catch(e => {//异常信息

console.log(e);

});

sendAxiosGet3() {

//axios.get("请求地址", {}) 返回Promise对象

axios.get("http://192.168.80.254:8080/student/list", {

params: {pageNo: 1, pageSize: 10},//转换成 ?pageNo=1&pageSize=10

responseType: "json",

responseEncoding: "utf-8",

}).then(response => {

this.students = response.data.students;

}).catch(e => {

console.log(e);

});

sendAxiosPost1() {

axios({

url: "http://192.168.80.254:8080/student/list",

method: "post",

data: {p1: 'A', p2: 'B'},

responseType: "json",

responseEncoding: "utf-8",

}).then(response => {

this.students = response.data.students;

}).catch(e => {

console.log(e);

});

sendAxiosPost2() {

//String类型

let requestData = Qs.stringify({p1: "A", p2: "B"})

console.log(requestData);//p1=A&p2=B

//typeof返回对应数据类型

console.log(typeof (requestData));//String

//form-data

//FormData对象上传文件和提交数据使用

let formData = new FormData();

formData.append("pageNo", "1");

formData.append("pageSize", "10");

console.log(formData.get("pageNo"));

axios({

url: "http://192.168.80.254:8080/student/list",

method: "post",

//告诉服务端参数提交是form-data格式 id=1&name=zhangsan

headers: {"Content-Type": "application/x-www-form-urlencoded"},

//Qs.stringify 把json数据转化成p1=A&p2=B格式(form-data格式)

data: Qs.stringify({p1: "A", p2: "B"}),

responseType: "json",

responseEncoding: "utf-8",

}).then(response => {

this.students = response.data.students;

}).catch(e => {

console.log(e);

});

sendAxiosPost3() {

let data = Qs.stringify({p1: "A", p2: "B"});

// post方法用于post提交

// axios.post(url,data,{}).then().catch()

axios.post("http://192.168.80.254:8080/student/list", data, {

//告诉服务端参数提交是form-data格式 id=1&name=zhangsan

headers: {"Content-Type": "application/x-www-form-urlencoded"},

responseType: "json",

responseEncoding: "utf-8",

}).then(response => {

this.students = response.data.students;

}).catch(e => {

console.log(e);

});

}

})

</script>

</html>

后端代码

@WebServlet(urlPatterns = {"/student/list"})

public class StudentServlet extends HttpServlet {

@Override

protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

doPost(req,resp);

}

@Override

protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

String p1 = req.getParameter("p1");

String p2 = req.getParameter("p2");

System.out.println("p1=" + p1 + ",p2=" + p2);

//设置响应数据格式和编码

resp.setContentType("application/json;charset=utf-8");

//允许跨域请求（后台允许跨域请求）

resp.setHeader("Access-Control-Allow-Origin", "*");

//获取数据

List<Student> students = getStudents();

Result result = new Result(students);

//使用Gson把result对象转换json字符串

Gson gson = new Gson();

String json = gson.toJson(result);

//输出json字符串到前端

resp.getWriter().write(json);

}

/**

* 获取学生数据集合

* @return

private List<Student> getStudents() {

List<Student> students = new ArrayList<>();

students.add(new Student(1L,"李四",20,"mm@163.com"));

students.add(new Student(2L,"王五",21,"mm@163.com"));

students.add(new Student(3L,"赵六",22,"mm@163.com"));

students.add(new Student(4L,"钱七",23,"mm@163.com"));

students.add(new Student(5L,"贵八",24,"mm@163.com"));

return students;

}

public class Result {

List<Student> students;

public Result() {

}

public Result(List<Student> students) {

this.students = students;

}

public List<Student> getStudents() {

return students;

}

public void setStudents(List<Student> students) {

this.students = students;

}

public class Student {

private Long id;

private String name;

private Integer age;

private String email;

public Student() {

}

public Student(Long id, String name, Integer age, String email) {

this.id = id;

this.name = name;

this.age = age;

this.email = email;

}

public Long getId() {

return id;

}

public void setId(Long id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Integer getAge() {

return age;

}

public void setAge(Integer age) {

this.age = age;

}

public String getEmail() {

return email;

}

public void setEmail(String email) {

this.email = email;

}

来千语创想移动应用开发平台学习更多APP开发知识：app开发，app制作，app开发源码下载，app开发框架，app制作模板等免费获取。

千语创想-专业APP开发、app定制服务商，提供一站式移动应用解决方案，满足您的各类需求，欢迎免费评估需求和获取报价。

转载请注明来自：https://www.qianyuthink.com/news/7302.html

上一页：Axios介绍，Axios是什么？
下一页：vue组件库大合集