共计 2090 个字符，预计需要花费 6 分钟才能阅读完成。
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)
}
)
正文完
