1.axios的理解与使用
在我们日常的开发中大家都应该或多或少的涉及到用axios发送请求，尤其是vue框架，原因是vue主推发送请求用axios做交互。
1.axios的特点：
(1)基于promise的ajax请求库
(2)浏览器端/node端都能使用
(3)支持请求/响应拦截器
(4)支持取消请求
(5)请求/响应数据转换
(6)批量发送多个请求（promise.all）
2.发送请求的方法：
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]])
3.Interceptors（拦截器）
// Add a request interceptor
//请求拦截器发送请求之前执行
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
//响应拦截器在得到响应数据之后执行
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
4.axios默认配置
axios.defaults.baseURL = ‘https://api.example.com’;默认请求地址
axios.defaults.headers.common[‘Authorization’] = AUTH_TOKEN;
axios.defaults.headers.post[‘Content-Type’] = ‘application/x-www-form-urlencoded’;默认编码方式
5.axios.create()
说明：axios的2次封装，为什么是2次封装，因为axios是封装的xhr。所以axios.create是等于对xhr的2次封装，而不是对axios的2次封装。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios.create</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// axios.create(config)
// (1)根据指定的配置创建一个新的axios
// (2)新的axios没有取消请求和批量发送请求的方法，其他语法相同
// (3)创建这个语法的原因：可能在一个项目中用到2个不同的服务器
axios.default.baseURL = 'https://www.baidu.com'
axios({
url:'/get'//https://www.baidu.com/get
})
//当同一个项目用到2个不同的服务器地址的时候，不可能去修改default.baseURL
const instance = axios.create({
baseURL:'http://www.google.cn'
})
//用instance发送请求
instance({
url:'/get'//http://www.google.cn/get
})
</script>
</html>
815
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
