1. axios介绍 42
axios是一个基于 promise 的 HTTP 库，可在浏览器和 node.js 中。
1.1 特性： 42
o 从浏览器中创建 XMLHttpRequest
o 从 node.js 发出 http 请求
o 支持 Promise API
o 拦截请求和响应
o 转换请求和响应数据
o 取消请求
o 自动转换JSON数据
o 客户端支持防止 CSRF/XSRF
1.2 使用方式 42
npm使用方式
npm install axios cdn方式
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> 使用本地文件
<script src="js/axios.min.js"></script>2. 使用axios发起请求 42
2.1 新建一个模块 axios-demo
放在E:\java学习\盈利宝\course_pre
2.2 实体类user 42
package com.bjpowernode.axiosdemo.model;
/**
* 实体类 42
*/
public class User {
private Integer id;
private String name;
private Integer age;
private String sex;
public User(Integer id, String name, Integer age, String sex) {
this.id = id;
this.name = name;
this.age = age;
this.sex = sex;
}
public Integer getId() {
return id;
}
public void setId(Integer 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 getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
@Override
public String toString() {
return "User{" +
"id=" + id +
", name='" + name + '\'' +
", age=" + age +
", sex='" + sex + '\'' +
'}';
}
}2.3 配置application.properties
server.port=9000
server.servlet.context-path=/api2.4 服务器controller 42
例子1： get请求url中传递参数
UserController
/*get请求 42*/
@GetMapping("/user/query")
public User queryUser(){
System.out.println("===/user/query 接收前端的请求====");
User user = new User(1001,"张强",20,"男");
return user;
}测试项目能不能运转
浏览器输入http://localhost:9000/api/user/query
ok没问题
3. 前端我们使用HBuilderX
新建项目
项目创建后我们再创建一个子集目录，用于存放js文件
将axios的js文件拷贝到js目录中
E:\java学习\盈利宝\资料\资料\03-axios-js文件
3.1 使用axios发送get请求 43
新建一个demo.html
3.1.1 使用axios发送get请求，无参数 44
前端demo.html 43
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>学习axios</title>
<script src="js/axios.min.js"></script>
</head>
<body>
<button onclick="funGet()">使用axios发送get请求，无参数</button></br>
</body>
<script>
//使用axios发送get请求，无参数 43
//get请求没有参数 43
//axios的格式： axios.get(url).then().catch().finally()
function funGet(){
let url="http://localhost:9000/api/user/query";
axios.get(url).then(resp=>{
//then是一个函数,表示请求成功时执行的
//resp 是形参,表示服务器返回的数据, 这个数据是由axios封装好的.
console.log("请求成功，返回服务器的数据："+resp)
}).catch(err=>{
console.log("请求错误"+err);
}).finally( () =>{
console.log("总是会执行的代码");
})
}
</script>
</html>后端UserController
/*get请求 42*/
@GetMapping("/user/query")
public User queryUser(){
System.out.println("===/user/query 接收前端的请求====");
User user = new User(1001,"张强",20,"男");
return user;
}测试启动后端
运行前端成功
3.1.2 使用axios发送get请求，有两个参数 44
前端demo.html 44
//get 请求有两个参数 ，在url后面传递的 ?=参数名=值 44
function get2(){
let url="http://localhost:9000/api/user/get?id=2000&name=周同学";
axios.get(url).then(resp=>{
console.log("传递参数成功，接收数据："+resp)
})
}后端UserController 44
/*两个参数 43*/
@GetMapping("/user/get")
public User queryUser2(Integer id, String name){
System.out.println("===/user/get 接收前端的请求====id="+id+",name="+name);
User user = new User(id,name,20,"男");
return user;
}测试
3.1.3 使用axios发送get请求，有两个参数params 45
demo.html
//使用axios发送get请求，有两个参数params 45
function get3(){
/* let url="http://localhost:9000/api/user/get";
axios.get(url,{
params:{
id:30005,
name:'zhang同学'
}
}).then(resp=>{
console.log("服务器返回结果"+resp)
}) */
//另外一种写法 45
let data = {
id:100,
name:"lisi"
}
let url="http://localhost:9000/api/user/get";
axios.get(url,{
params:data
}).then(resp=>{
console.log("服务器返回结果"+resp)
})
}
3.2 使用axios发送post请求 46
3.2.1 使用axios发送post请求，有两个参数 46
前端demo.html
//post请求, 传递参数格式 参数名=值&参数名=值
//使用axios发送post请求，有两个参数 46
function post1(){
let url="http://localhost:9000/api/user/add";
//post(请求的url地址," 参数名=值&参数名=值")
axios.post(url,"id=2345&name=zhangsan").then(resp=>{
console.log("post请求处理成功"+resp);
})
}后端UserController
//post请求 46
@PostMapping("/user/add")
public User addUser(Integer id, String name){
System.out.println("===/user/add 接收前端的请求====id="+id+",name="+name);
User user = new User(id,name,20,"男");
return user;
}
3.2.2 使用axios发送post请求，请求数据是json 47
前端demo.html 47
//发起请求,传递的对象数据, 然后axios会把对象自动转为json格式数据 47
function post2(){
let url="http://localhost:9000/api/user/json";
let data = {
id:1001,
name:"张向",
sex:"女",
age:20
}
axios.post(url,data).then(resp=>{
console.log("应答结果："+resp);
})
}后端UserController
/*
* 前端是json格式的数据 ，例如 { id:1001,name:"lisi"} 47
* 后端控制器方法， 使用java对象接收参数， 加入@RequestBody
* @RequestBody：从请求体中，获取数据，转为形参的对象
*
*
* {"id":1001,"name":"张向","sex":"女","age":20}
*
* 使用@RequestBody的要求
* 1.请求头，Content-Type: application/json
* 2.发起的请求是post， 请求数据是json格式
* 3.服务器接收json转为对象， 需要在对象类型的形参前面加入@RequestBody
* */
@PostMapping("/user/json")
public User addUserJson(@RequestBody User user){
System.out.println("===/user/json 接收前端的请求="+user);
User user1 = new User(1001,"lisi",20,"男");
return user;
}
使用@RequestBody的要求
* 1.请求头，Content-Type: application/json
* 2.发起的请求是post， 请求数据是json格式
* 3.服务器接收json转为对象， 需要在对象类型的形参前面加入@RequestBody
3.2.3 使用axios 配置方式 发送post请求，请求数据是json, 48
前端demo.html 48
//使用axios发送post请求，请求数据是json, 配置方式 48
function post3(){
let url="http://localhost:9000/api/user/json";
let param = {
id:2001,
name:"张向",
sex:"女",
age:22
}
axios({
url:url,
method:"post",
data:param
}).then(resp=>{
console.log("==========请求处理成功，接收数据"+resp);
//console.log(resp)
console.log("姓名："+resp.data.name+","+resp.status+","+resp.statusText)
})
}
完整配置项
{
// `url` 是用于请求的服务器 URL
url: '/user',
// `method` 是创建请求时使用的方法
method: 'get', // 默认是 get
// `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
// 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在向服务器发送前，修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `transformResponse` 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// `headers` 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象(plain object)或 URLSearchParams 对象
params: {
ID: 12345
},
// `paramsSerializer` 是一个负责 `params` 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
// `data` 是作为请求主体被发送的数据
// 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
// 在没有设置 `transformRequest` 时，必须是以下类型之一：
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 浏览器专属：FormData, File, Blob
// - Node 专属： Stream
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求话费了超过 `timeout` 的时间，请求将被中断
timeout: 1000,
// `withCredentials` 表示跨域请求时是否需要使用凭证
withCredentials: false, // 默认的
// `adapter` 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseType: 'json', // 默认的
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` 是承载 xsrf token 的值的 HTTP 头的名称
xsrfHeaderName: 'X-XSRF-TOKEN', // 默认的
// `onUploadProgress` 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `onDownloadProgress` 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// 对原生进度事件的处理
},
// `maxContentLength` 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默认的
},
// `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为0，将不会 follow 任何重定向
maxRedirects: 5, // 默认的
// `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
// `keepAlive` 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// 'proxy' 定义代理服务器的主机名称和端口
// `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: : {
username: 'mikeymike',
password: 'rapunz3l'
}
},
// `cancelToken` 指定用于取消请求的 cancel token
// （查看后面的 Cancellation 这节了解更多）
cancelToken: new CancelToken(function (cancel) {
})}3.3 请求方法的别名 48
axios.get(url[, config])
axios.delete(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
4. axios返回数据 49
响应结构，是一个json
{
// `data` 由服务器提供的响应
data: {},
// `status` 来自服务器响应的 HTTP 状态码
status: 200,
// `statusText` 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// `headers` 服务器响应的头
headers: {},
// `config` 是为请求提供的配置信息
config: {}
}demo.html 49
//使用axios发送post请求，请求数据是json, 配置方式 48
function post3(){
let url="http://localhost:9000/api/user/json";
let param = {
id:2001,
name:"张向",
sex:"女",
age:22
}
axios({
url:url,
method:"post",
data:param
}).then(resp=>{
console.log("==========请求处理成功，接收数据"+resp);
console.log(resp)
console.log("姓名："+resp.data.name+","+resp.status+","+resp.statusText)
})
}
5. 拦截器 50
分成请求拦截器和响应拦截器
请求拦截器：在发起请求之前执行，可以对请求内容做修改，比如增加参数，设置请求头等等。
应答拦截器：服务器返回结果，axios的then之前先执行。可以对应答内容对预先的处理。
5.1 请求拦截器 51
利用拦截器再url后面加上token
前端demo.html 51
//请求拦截器 51
axios.interceptors.request.use(function(config){
console.log("请求拦截器");
console.log("url="+config.url);
console.log("method="+config.method)
config.url = config.url+"?token=xxx";
return config;
},function(err){
console.log(err);
})
5.2 应答拦截器 52
前端demo.html
//应答拦截器 52
axios.interceptors.response.use(function(response){
console.log("应答拦截器，接收服务器返回的数据结构");
console.log(response);
response.data.sex="女子";
return response;
},function(err){
console.log(err);
})
5.3 全局的 axios 默认值 53
axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.timeout=50000;
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
标签：axios,name,url,介绍,user,id,请求 From： https://blog.51cto.com/u_15784725/6983306