axios
1 axios概述
Axios 基于 Promise 的 http 库,可以用在浏览器和 node.js 中。
2 axios特性
(1) 从浏览器中创建 XMLHttpRequests
(2) 从 node.js 创建 http 请求
(3) 支持 Promise API
(4) 拦截请求和响应
(5) 转换请求数据和响应数据
(6) 取消请求
(7) 自动转换 JSON 数据
(8) 客户端支持防御 XSRF
(一) 默认情况下,Content-Type:application/json
默认将请求体中的参数转码成json类型数据
发送表单类型数据
axios({
url,
method,
data: qs.stringify(data)
})
发送json类型数据
axios({
url,
method,
data: {
username: 'admin1',
password: '123321'
}
})
Restful风格
常用的HTTP动词有下面五个(括号里是对应的SQL命令)
GET(SELECT):从服务器取出资源(一项或多项)。
POST(CREATE):在服务器新建一个资源。
PUT(UPDATE):在服务器更新资源(客户端提供改变后的完整资源)。
PATCH(UPDATE):在服务器更新资源(客户端提供改变的属性)。
DELETE(DELETE):从服务器删除资源。
还有两个不常用的HTTP动词。
HEAD:获取资源的源数据。
OPTIONS:获取信息,关于资源的哪些属性是客户端可以改变的。
下面是一些例子
GET /zoos:列出所有动物园
POST /zoos:新建一个动物园
GET /zoos/ID:获取某个指定动物园的信息
PUT /zoos/ID:更新某个指定动物园的信息(提供该动物园的全部信息)
PATCH /zoos/ID:更新某个指定动物园的信息(提供该动物园的部分信息)
DELETE /zoos/ID:删除某个动物园
GET /zoos/ID/animals:列出某个指定动物园的所有动物
DELETE /zoos/ID/animals/ID:删除某个指定动物园的指定动物
(二) 简写形式
参数以查询字符串格式拼接到URL
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]])
(三) 默认配置
axios.defaults.baseURL = 'http://...' // 设置默认的请求基路径
axios.defaults.headers.common['Authorization'] = token // 为所有的请求统一设置
axios.defaults.headers.get['Authorization'] = token // 为所有的get请求统一设置
axios.defaults.headers.post['Authorization'] = token // 为所有的post请求统一设置
3 拦截器
在请求或响应被 then 或 catch 处理前拦截它们。一般可以用于对登录后获得的令牌 token 进行处理。
3.1请求拦截器
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么,可以处理数据格式或者对某些请求url做特殊处理
if (config.method == 'post' && config.url !== '/user/login') {
// 表单数据
config.data = qs.stringify(config.data);
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
3.2 响应拦截器
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
let res = {
...response,
data: response.data.data,
status: response.data.status,
statusText: response.data.message,
};
// return response;
return res;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
3.3 移除拦截器
let interceptor = axios.interceptors.response.use((response) => {
// 做响应结果的拦截处理
return response
},(error) => {
return Promise.reject(error)
})
// 超时调用
setTimeout(() => {
// 移除拦截器
axios.interceptors.response.eject(interceptor)
}, 3000)
4 axios创建实例
创建多个连接实例,用于解决同一项目,请求多个服务器的业务场景。
let instance1 = axios.create({
// 创建时可以传递默认配置
baseURL: 'http://47.101.183.106:7788',
headers: {
'Authorization': 'token'
}
})
let instance2 = axios.create({
baseURL: 'http://47.101.183.106:8888',
headers: {
'Contene-Type': 'application/x-www-form-urlencoded'
}
})
调用实例
instance1({
method: 'post',
url: '/user/login',
data: loginData
}).then(res => {
console.log(res);
})
instance2({
method: 'get',
url: '/category/findAll',
}).then(res => {
console.log(res);
})
5 axios封装
5.1 axios封装
// 1.设置全局默认配置项
axios.defaults.baseURL = 'http://47.101.183.106:8888'
// 2.设置请求拦截器
axios.interceptors.request.use(config => {
// Do something before request is sent
let token = sessionStorage.getItem('token')
if (config.url != '/user/login' && token) {
config.headers['Authorization'] = token
}
return config;
}, error => {
// Do something with request error
return Promise.reject(error);
});
// 3.设置响应拦截器
axios.interceptors.response.use(response => {
// Do something before response is sent
response = {
...response,
data: response.data.data,
status: response.data.status,
statusText: response.data.message
}
return response;
}, error => {
// Do something with response error
return Promise.reject(error);
});
let qs = Qs
// 4.封装请求方法
function post_form (url, data) {
return axios({
url,
method: 'post',
data: qs.stringify(data),
headers: {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
}
})
}
5.2 axios封装的使用
<script src="../js/axios.js"></script>
<script src="../js/qs.js"></script>
<script src="./7-axios封装.js"></script>
<script>
axios.post('/user/login', {
username: 'admin1',
password: 123321
}).then(res => {
if (res.status != 200) {
console.error(res.statusText)
return false
}
sessionStorage.setItem('token', res.data.token)
}).catch(error => {
console.log('失败', error);
})
axios.get('/index/category/findAll').then(res => {
console.log(res.data);
})
post_form('/category/saveOrUpdate', {
name: '体坛赛事'
}).then(res => {
console.log(res.statusText);
})
</script>
6 ajax
6.1 原生ajax
默认情况下,Content-Type:text/plain
发送表单类型数据
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send(qs.stringify(data))
发送json类型数据
xhr.setRequestHeader('Content-Type', 'application/json')
xhr.send(JSON.stringify(data))
具体实现:
<script src="../js/qs.js"></script>
<script>
const qs = Qs
const baseUrl = 'http://47.101.183.106:8888'
const queryData = {
page: 1,
pageSize: 10
}
const loginData = {
username: 'admin1',
password: 123321
}
const applyData = {
name: 'tom',
age: 12,
telephone: 12345678987,
gender: 'male'
}
// 1.实例化http请求对象
let xhr = new XMLHttpRequest()
// 2.打开连接,设置请求的配置参数
//查询
// xhr.open('get', baseUrl + '/index/category/findAll')
// const qsData = qs.stringify(queryData)
// xhr.open('get', baseUrl + '/index/article/pageQuery' + '?' + qsData)
// xhr.open('post', baseUrl + '/user/login')
// xhr.setRequestHeader(
// 'Content-Type',
// 'application/json'
// )
//登录
xhr.open('post', baseUrl + '/user/login')
xhr.setRequestHeader(
'Content-Type',
'application/x-www-form-urlencoded'
)
// 3.发送请求并且配置请求体中的参数
// xhr.send(JSON.stringify(loginData))
xhr.send(qs.stringify(applyData))
// 4.监听http连接状态的改变,获取响应
xhr.onreadystatechange = () => {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(JSON.parse(xhr.response));
}
}
</script>
6.2 jquery的ajax
默认情况下,Content-Type:application/x-www-form-urlencoded
默认情况下,参数会被默认转换成表单格式
数据
发送表单类型数据
$.ajax({
url,
method,
data: data
})
发送json类型数据
$.ajax({
url,
method,
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(loginData)
})
具体实现:
<script src="../js/jquery.js"></script>
<script src="../js/qs.js"></script>
<script>
const qs = Qs
const baseUrl = 'http://47.94.46.113:8888'
const queryData = {
page: 1,
pageSize: 10
}
const loginData = {
username: 'admin1',
password: 123321
}
const applyData = {
name: 'tom',
age: 12,
telephone: 13455667788,
gender: 'male'
}
$.ajax({
url: baseUrl + '/index/category/findAll',
method: 'get',
success(res) {
console.log(res);
},
error(error) {
console.log(error);
}
})
$.ajax({
url: baseUrl + '/user/login',
method: 'post',
headers: {
'Content-Type': 'application/json'
},
data: JSON.stringify(loginData),
success(res) {
console.log(res);
},
error(error) {
console.log(error);
}
})
</script>