一、axios的定义:
Axios 是一个基于 Promise 的 HTTP 状态库,是封装的ajax,可以用在浏览器和 node.js 中。
二、安装方法
安装命令: npm install axios
在页面中引入:import axios from “axios”;
三、GET请求
<template>
<div id="app">
{{ info }}
</div>
</template>
<script>
import axios from "axios";
export default {
data () {
return {
info: null
}
},
mounted () {
axios.get('https://www.runoob.com/try/ajax/json_demo.json')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
</script>
四、POST请求
axios.post 默认请求头:application/json url 请求参数 对象
<template>
<div id="app">
{{ info }}
</div>
</template>
<script>
import axios from "axios";
export default {
data () {
return {
info: null
}
},
mounted () {
axios.post('https://www.runoob.com/try/ajax/demo_axios_post.php')
.then(response => (this.info = response))
.catch(function (error) { // 请求失败处理
console.log(error);
});
}
}
</script>
五、axios的封装
// 对http请求进行封装
import axios from 'axios'
// 使用自定义的配置文件发送请求
const instance = axios.create({
baseURL: '',
timeout: 5000,
headers: {
}
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
return config;
}, function (error) {
return Promise.reject(error);
});
// 添加响应拦截器
instance.interceptors.response.use(function (response) {
if(response.status === 200){
return response.data;
}else{
console.error("请求错误")
console.error(response)
}
return response;
}, function (error) {
return Promise.reject(error);
});
export default instance