axios是一个基于promise的HTTP库，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持
目录
1.API
2.config配置对象
3.方法别名
4.配置默认值
5.全局配置
6.实例配置
7.请求配置
8.并发
9.拦截器
1）请求拦截器
2）响应拦截器
3）移除拦截器
4）为axios实例添加拦截器
10.取消请求
11.错误处理
12.axios预检
1.API
- axios(config)
- axios(url,[config])
2.config配置对象
axios({
method:'get', //post、get、put……
baseURL:'', //请求的域名，基本地址
url: '', //请求的路径
params:{}, //会将请求的参数拼接在url上
data:{}, //会将请求的参数放在请求体中
header:{}, //设置请求头，例如设置token等
timeout:1000, //设置请求超时时长，单位：ms
})3.方法别名
为方便起见，为所有支持的请求方法提供了别名
- axios.request(config)
- axios.get(url,[config])
- axios.post(url,[data],[config])
- axios.delete(url,[config])
- axios.head(url,[config])
- axios.put(url,[data],[config])
- axios.patch(url,[data],[config])
- axios.options(url,[config])
【例】下面用post和put方法发送ajax请求
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
<script src="./vue.js"></script>
<script src="./axios.js"></script>
</head>
<body>
<div id="app">
<div class="username">
<input type="text" placeholder="用户名" v-model='name'>
</div>
<div class="mail">
<input type="text" placeholder="邮箱" v-model='mail'>
</div>
<div class="upload-btn" @click='upload'>上传</div>
<div class="show-btn" @click='show'>显示人物信息</div>
<ul class="person-list" v-for='person in personList'>
<li class="person">
<span>
{{ person.name }}
</span>
<span>
{{ person.mail }}
</span>
</li>
</ul>
</div>
</body>
<script>
const vm = new Vue({
el: '#app',
data: {
name: '',
mail: '',
personList: []
},
methods: {
upload() {
const { name, mail } = this
axios.post('/setUserInfo', { name, mail }, {
baseURL: 'https://developer.duyiedu.com/vue'
}).then(res => {
console.log(res)
alert(res.data.msg)
}).catch(error => {
alert(error.data.msg)
})
},
show() {
axios.get('/getUserInfo', {
baseURL: 'https://developer.duyiedu.com/vue'
}).then(res => {
this.personList = res.data.data.slice(0, 10)
})
}
}
})
</script>
</html>4.配置默认值
可以指定将被用在各个请求的配置默认值
5.全局配置
在实际项目中，很少用到全局配置
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue';
axios.defaults.timeout = 1000;6.实例配置
可以使用自定义配置新建一个axios实例
const instance = axios.create({
baseURL: 'https://developer.duyiedu.com/vue',
timeout: 1000,
})
instance.get('/getUserInfo').then(res => {
// ...
})7.请求配置
const instance = axios.create();
instance.get('/getUserInfo', {
timeout: 5000
})【注】配置的优先顺序：全局<实例<请求
8.并发
同时进行多个请求，并统一处理返回值
- axios.all(iterable)
- axios.spread(callback)
axios.all([
axios.get('/a'),
axios.get('/b')
]).then(axios.spread((aRes, bRes) => {
console.log(aRes, bRes);
}))9.拦截器
interceptors，在发起请求之前做一些处理，或者在响应回来之后做一些处理
1）请求拦截器
axios.interceptors.request.use(config=>{
//在发送请求之前做些什么
return config
})2）响应拦截器
axios.interceptors.response.use(response => {
//对响应数据做点什么
return response
})3）移除拦截器
const interceptor = axios.interceptors.response.use(response => {
return response
})
axios.interceptors.response.eject(interceptor)4）为axios实例添加拦截器
const instance = axios.create();
instance.interceptors.request.use(config => {
})10.取消请求
const source = axios.CancelToken;
const source = CancelToken.source();
axios.get('/getUserInfo', {
cancelToken: source.token
}).then(res => {
console.log(res);
}).catch(error => {
if(axios.isCancel(error)) {
// 取消请求
console.log(error.message);
} else {
// 处理错误
}
})
// 取消请求 参数 可选
source.cancel('取消请求');11.错误处理
request / response 是 error 的上下文，标志着请求发送 / 得到响应。在错误中，如果响应有值，则说明是响应时出现了错误；如果响应没值，则说明是请求时出现了错误；在错误中，如果请求无值，则说明请求未发送出去，如取消请求。
在实际开发过程中，一般在拦截器中统一添加错误处理。请求拦截器中的错误，会当请求未成功发出时执行，但是要注意的是：取消请求后，请求拦截器的错误函数也不会执行，因为取消请求不会抛出异常，axios对其进行了单独的处理。在更多的情况下，我们会在响应拦截器中处理错误。
12.axios预检
当axios的请求为非简单请求时，浏览器会进行预检，及发送OPTIONS请求。请求到服务器，询问是否允许跨域。如果响应中允许预检中请求的跨域行为，则浏览器会进行真正的请求，否则会报405错误
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
