Axios学习一
一、基本使用
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios就是一个能够发起HTTP请求的js库。官网地址
由于Axios是基于ES6的Promise的，所以axios必须在支持ES6 Promise的环境下运行。
1.get请求示例
采用
axios.get("http://localhost:8888/empno")
.then(function (response) {
console.info(response);
})
.catch(function (error) {
console.info(error);
})
.finally(function () {
console.info("不管前面执行的如何，这里都会执行到!");
});
运行结果如下：
可以看到 ，响应的结果包含以下几个部分：
{
config:{},
//data就是服务端响应返回的数据
data:{},
//服务端所有的响应头信息
headers:{},
request:...
//来自于服务端的HTTP响应状态码
status:200,
statusText:""
}
get请求参数也可以写成这样
axios.get("http://localhost:8888/empNo", {
params: {
empno: '7369'
}
})
.then(function (response) {
console.info(response.data);
})
.catch(function (error) {
console.info(error);
})
.finally(function () {
console.info("不管前面执行的如何，这里都会执行到!");
});
//结果为：
{empno: 7369, ename: "SMITH", job: "CLERK", mgr: 7902, hiredate: "1980-12-17 00:00:00", …}
不管前面执行的如何，这里都会执行到!
2.post请求示例
axios.post("http://localhost:8888/", {
empno: '0591',
ename: 'Tom',
job: '程序员'
})
.then(function (response) {
console.info(response.data);
})
.catch(function (error) {
console.info(error);
})
.finally(function () {
console.info("不管前面执行的如何，这里都会执行到!");
});
/**
* AJAX Post请求中常用的两种传参数的形式分别是Form Data 和 Request Payload
* Request Payload 请求头为: Content-Type: application/json;charset=UTF-8，并且请求正文是一个 json 格式的字符串
* Form Data 请求头部为: Content-Type: application/x-www-form-urlencoded，并且请求正文是类似 get 请求 url 的请求参数
* 其他情况如使用原生AJAX的POST请求如果不指定请求头Request Header，默认请求头尾:Content-Type:text/plain;charset=UTF-8，参数出现在Request payload块。
*
* 后端采用 Spring MVC框架开发的话
* 对于 Request Payload 请求， 方法必须加 @RequestBody 注解才能将请求正文解析到对应的 bean 中，且只能通过 request.getReader() 来获取请求正文内容
* 对于 Form Data 请求，无需任何注解，Spring MVC会自动使用 MessageConverter(消息转换器) 将请求参数解析到对应的 bean，且通过 request.getParameter(...) 能获取请求参数
* axios的Post请求默认是Request Payload 请求
*/
后端代码如下：
/**
* 保存员工信息
*
* @param request
* @return
*/
@PostMapping("/")
public Map saveEmp(HttpServletRequest request, @RequestBody Emp emp) {
Map result = new HashMap<>(8);
empService.saveEmp(emp);
result.put("status", "0");
result.put("message", "保存成功");
return result;
}
执行结果如下:
默认情况下，axios将JavaScript对象序列化为JSON。如果要以application/x-www-form-urlencoded格式发送数据，可以使用以下几个方法(直接设置请求头的Content-Type无效)：
方法一:
axios({
method: 'post',
url: 'http://localhost:8888/',
data: "empno=0593&ename=kaili&job=Teacher"
}).then(function (response) {
console.info(response.data);
})
这样请求头 为：Content-Type: application/x-www-form-urlencoded 如下图所示：
方法二：在特定浏览器中，你可以使用URLSearchParams API
var searchParam = new URLSearchParams();
searchParam.append("empno","0595");
searchParam.append("ename","LILi");
searchParam.append("job","程序媛");
axios({
method: 'post',
url: 'http://localhost:8888/emp',
data: searchParam
}).then(function (response) {
console.info(response.data);
})
方法三:使用qs库对数据进行序列化
方法四：在NodeJs环境中 你可以使用querystring模块
后端代码如下：
@PostMapping("/emp")
public Map saveEmp(HttpServletRequest request) {
String empno = request.getParameter("empno");
String ename = request.getParameter("ename");
String job = request.getParameter("job");
Emp emp = new Emp();
emp.setJob(job);
emp.setEname(ename);
emp.setEmpno(Integer.valueOf(empno));
empService.saveEmp(emp);
Map result = new HashMap<>(8);
result.put("status", "0");
result.put("message", "保存成功");
return result;
}
二、axios常用API
1.可以通过将相关配置参数传递给axios来发出请求
基本调用方式为: axios(config),例如发送一个Post请求如下：
axios({
method: 'post',
url: 'http://localhost:8888/',
data: {
empno: '0592',
ename: 'Cat',
job: '测试人员'
}
}).then(function (response) {
console.info(response.data);
})
.catch(function (error) {
console.info(error);
})
.finally(function () {
console.info("不管前面执行的如何，这里都会执行到!");
});
默认发送Get请求,如下:
axios("http://localhost:8888/empno");
2.为了方便起见，axios为所有受支持的HTTP请求方法提供了别名。
- axios.request(config)
- axios.get(url[, config])
- axios.delete(url[, config])
- axios.head(url[, config])
- axios.options(url[, config])
- axios.post(url[, data[, config]])
- axios.put(url[, data[, config]])
- axios.patch(url[, data[, config]])
三、请求配置属性
这些是用于发出请求的可用配置选项。只需要url。如果没有指定方法，请求将默认为GET
{
url:'xxx',
//指定 在发出请求时使用的请求方法
method: 'get', // 默认get请求
//可以方便地为axios的实例设置' baseURL '来传递相对url
baseURL: 'https://some-domain.com/api/',
//“transformRequest”允许在请求数据发送到服务器之前对其进行更改
//这只适用于“PUT”、“POST”、“PATCH”和“DELETE”请求方法
//数组中的最后一个函数必须返回一个字符串或Buffer的实例ArrayBuffer，FormData或流
//您也可以修改headers对象。
transformRequest: [function (data, headers) {
// Do whatever you want to transform the data
return data;
}],
//“transformResponse”允许更改之前的响应数据
//它将被传递给then/catch绑定的函数
transformResponse: [function (data) {
// Do whatever you want to transform the data
return data;
}],
// “headers”是要发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
//“params”是与请求一起发送的URL参数
//必须是普通对象或者是URLSearchParams对象
params: {
ID: 12345
},
paramsSerializer: function (params) {
return Qs.stringify(params, {arrayFormat: 'brackets'})
},
//“data”是作为请求体发送的数据
//只适用于“PUT”、“POST”和“PATCH”请求方法
//当没有设置“transformRequest”时，必须是以下类型之一:
//- string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
//浏览器中仅为：FormData, File, Blob对象
//NodeJs环境中仅为：Stream, Buffer对象
data: {
firstName: 'Fred'
},
//“timeout”指定请求超时之前的毫秒数。
//如果请求花费的时间超过“tiemout”值，请求将被中止。
timeout: 1000, //默认值为' 0 '(没有超时)
//指示是否跨站点访问控制请求
//应该使用凭证
withCredentials: false, // default,
adapter: function (config) {
/* ... */
},
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
//'表示服务器将响应的数据类型
//可选值为：'arraybuffer', 'document', 'json', 'text', 'stream'
responseType: 'json', // default
//指示用于解码响应的编码
responseEncoding: 'utf8', // default
xsrfCookieName: 'XSRF-TOKEN', // default
xsrfHeaderName: 'X-XSRF-TOKEN', // default
//允许处理上传的进度事件
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
//允许处理下载的进度事件
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
//定义允许的http响应内容的最大大小(以字节为单位)
maxContentLength: 2000,
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
//定义在node.js中要遵循的最大重定向数。
maxRedirects: 5, // default
socketPath: null, // default
//“httpAgent”和“httpsAgent”定义了一个执行http时使用的自定义代理
//和https请求，分别在node.js中。这允许像这样添加选项
//默认情况下未启用的“keepAlive”。
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
//“proxy”定义代理服务器的主机名和端口。
//您还可以使用传统的“http_proxy”和“https_proxy”环境变量。
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz3l'
}
},
//指定可用于取消请求的取消令牌
cancelToken: new CancelToken(function (cancel) {
})
}
四、配置全局默认值
您可以指定将应用于每个请求的配置缺省值。
axios.defaults.baseURI = "";
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.timeout=3000;
五：拦截器
您可以在处理请求或响应之前拦截它们。
(1)添加一个请求拦截器
axios.interceptors.request.use(function (config) {
//在发送请求之前做些什么
//TODO
return config;
}, function (error) {
//处理请求错误
return Promise.reject(error);
//alert("请求超时")
});
(2)添加一个响应拦截器
axios.interceptors.response.use(function(response){
//处理响应数据
return response;
},function(error){
//处理响应错误
return Promise.reject(error);
});
(3)如果以后需要删除拦截器，可以这样做。
const myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);
六、处理错误
axios.get('/user/12345')
.catch(function (error) {
if (error.response) {
// 发出请求后，服务器用状态代码进行响应
//错误的状态代码不在2xx的范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 已提出请求，但未收到答复
// `error.request` 是浏览器中XMLHttpRequest的一个实例，也是
// NodeJS中的http.ClientRequest
console.log(error.request);
} else {
// 在设置引发错误的请求时发生了一些事情
console.log('Error', error.message);
}
console.log(error.config);
});