Ajax是对原生XHR的封装,而Axios又对原生Ajax进行了封装。
介绍
Axios是一个基于Promise的网络请求库,主要实现Ajax异步通信功能,用于向后端发起请求,是一种可以发HTTP请求的JS库。
Axios官网:https://www.axios-http.cn/
使用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">{{ info }}</div>
</body>
<script>
const app = {
data() {
return {
info: 'Ajax 测试',
}
},
mounted() {
axios
.get('http://thapi.top/API/sjsp.php')
.then((res) => (this.info = res.data))
.catch(function (err) {
console.log(err)
})
},
}
Vue.createApp(app).mount('#app')
</script>
</html>
携带参数
axios.post(
'http://thapi.top/API/sjsp.php',
{},
{
params: {
name: '&&&',
age: 18,
},
}
)
发数据
用请求体发数据,格式为urlencoded:
const params = new URLSearchParams()
params.append('name', '张三')
params.append('age', 18)
axios.post('http://thapi.top/API/sjsp.php', params)
用请求体发数据,格式为multipart:
const params = new FormData()
params.append('name', '张三')
params.append('age', 18)
axios.post('http://thapi.top/API/sjsp.php', params)
用请求体发数据,格式为json:
axios.post('http://thapi.top/API/sjsp.php', {
name: '张三',
age: 18,
})
默认配置
Axios对象可以直接使用,但使用的是默认设置。用 axios.create 创建的对象,可以覆盖默认设置,常见的 config 项有:
名称 | 含义 |
---|---|
baseURL | 将自动加在URL前面 |
headers | 请求头,类型为简单对象 |
params | 跟在URL后的请求参数,类型为简单对象或URLSearchParams |
data | 请求体,类型有简单对象、FormData、URLSearchParams、File等 |
withCredentials | 跨域时是否携带Cookie等凭证,默认为false |
responseType | 响应类型,默认为json |
const _axios = axios.create({
baseURL: 'http://localhost:3000',
withCredentials: true,
})
_axios.post('/api/post')
请求拦截器
const _axios = axios.create({
baseURL: 'http://localhost:3000',
withCredentials: true,
})
// 请求拦截器
_axios.interceptors.request.use(
function (config) {
config.headers = {
Authorization: 'test',
}
return config
},
function (e) {
return Promise.reject(e)
}
)
_axios.post('/api/post')
_axios.post('/api/post2')
响应拦截器
// 响应拦截器
_axios.interceptors.response.use(
function (response) {
// 2xx 范围内走这里
return response
},
function (e) {
if (e.response.status === 400) {
console.log('请求参数不正确')
return Promise.resolve(400)
} else if (e.response.status === 404) {
console.log('资源未找到')
return Promise.resolve(404)
}
return Promise.reject(e)
}
)