axios -- axios常用配置对象说明 & axios的默认配置 & axios创建实例对象发送ajax请求
Posted Z && Y
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了axios -- axios常用配置对象说明 & axios的默认配置 & axios创建实例对象发送ajax请求相关的知识，希望对你有一定的参考价值。
1. 常用配置对象说明
{
// `url` 是将用于请求的服务器 URL
url: '/user',
// `method` 是发出请求时要使用的请求方法
method: 'get', // default
// `baseURL` 将被添加到 `url` 前，除非 `url` 是绝对的。
// 可以方便地为 axios 实例设置 `baseURL` 来传递相对 URL 到该实例的方法。
baseURL: 'https://some-domain.com/api/',
// `transformRequest` 允许在将请求数据发送到服务器之前对其进行更改
// 这仅适用于请求方法“PUT”、“POST”、“PATCH”和“DELETE”
//数组中的最后一个函数必须返回一个字符串或一个 Buffer 的实例，ArrayBuffer，表单数据或流
// 您可以修改 headers 对象。
transformRequest: [function (data, headers) {
//做任何你想转换数据的事情
return data;
}],
// `transformResponse` 允许在响应数据之前进行更改
transformResponse: [function (data) {
// 做任何你想转换数据的事情
return data;
}],
// `headers` 自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// `params` 是与请求一起发送的 URL 参数
// 必须是普通对象或 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”、“DELETE”和“PATCH”
data: {
firstName: 'Fred'
},
// `timeout` 指定请求超时前的毫秒数.
// 如果请求时间超过`timeout`，请求将被中止。
timeout: 1000, // default is `0` (no timeout)
// `withCredentials` 指示是否是跨站点访问控制请求
withCredentials: false, // default
}
}
2. axios的默认配置
可以把重复的设置配置在默认设置里面来简化代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios基本使用</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<button class="btn btn-success"> 发送 PUT 请求 </button>
<button class="btn btn-danger"> 发送 DELETE 请求 </button>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//默认配置
axios.defaults.method = 'GET';//设置默认的请求类型为 GET
axios.defaults.baseURL = 'http://localhost:3000';//设置基础 URL
axios.defaults.params = {id:100};// 设置默认的请求参数
axios.defaults.timeout = 3000;// 设置默认的等待超时时间
btns[0].onclick = function(){
axios({
url: '/posts'
}).then(response => {
console.log(response);
})
}
</script>
</body>
</html>
设置默认的请求参数效果:
3. axios创建实例对象发送ajax请求
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios实例对象对象</title>
<link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h2 class="page-header">基本使用</h2>
<button class="btn btn-primary"> 发送GET请求 </button>
<button class="btn btn-warning" > 发送POST请求 </button>
<br>
</div>
<script>
//获取按钮
const btns = document.querySelectorAll('button');
//创建实例对象 /getJoke
const duanzi = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 2000
});
const onather = axios.create({
baseURL: 'https://b.com',
timeout: 2000
});
//这里 duanzi 与 axios 对象的功能几近是一样的
// duanzi({
// url: '/getJoke',
// }).then(response => {
// console.log(response);
// });
duanzi.get('/getJoke').then(response => {
console.log(response.data)
})
</script>
</body>
</html>
以上是关于axios -- axios常用配置对象说明 & axios的默认配置 & axios创建实例对象发送ajax请求的主要内容，如果未能解决你的问题，请参考以下文章