Ajax是对原生XHR的封装，而Axios又对原生Ajax进行了封装。

介绍

Axios是一个基于Promise的网络请求库，主要实现Ajax异步通信功能，用于向后端发起请求，是一种可以发HTTP请求的JS库。

Axios官网：https://www.axios-http.cn/

使用

Document

携带参数

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后的请求参数，类型为简单对象或URLSearchParamsdata请求体，类型有简单对象、FormData、URLSearchParams、File等withCredentials跨域时是否携带Cookie等凭证，默认为falseresponseType响应类型，默认为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)

} )