对于 axios api 我想大家曾经用过很屡次了。在本文中，我列出了一些罕用的 axios api 申请的语法，在你可能遗记 api 的时候能够翻出来查看，而不是在旧的我的项目中寻找之前应用过的申请语法。
1. 装置援用
装置：npm install axios
引入：import axios from 'axios'
2. 应用axios发送简略get申请
// 如果没有指明申请形式，则默认的是 GETaxios('/user/12345').then(res => console.log(res))3. 在get申请中应用查问字符串数据
axios .get('/user?ID=12345') .then(res => console.log(res)) .catch(err => console.log(err))4. 应用可配置的形式发送get申请
axios .get('/user', { // params 是作为与申请一起发送的 URL 参数，罕用于 get 申请， // 在 params 中的属性都会以 key=value 的格局 pin 在 url 中 params: { ID: 12345 } }) .then(res => console.log(res)) .catch(err => console.log(err))5. 应用async/await形式发送get申请
async function getUser() { try { const res = await axios.get('/user?ID=12345'); console.log(res); } catch (err) { console.error(err); }}6. 应用axios发送简略post申请
axios .post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(res => console.log(res))7. 应用axios传递配置来发送post申请
axios({ method: 'post', url: '/user/12', // data是作为申请主体被发送的数据，只实用于put/post/patch这些申请形式 data: { firstName: 'Fred', lastName: 'Flintstone' }});8. 应用axios同时发送多个申请（并发申请）
function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}Promise .all([getUserAccount(), getUserPermissions()]) .then( axios.spread((res1, res2) => { // 两个申请都执行实现 console.log(res1, res2) }) )9. axios的全局默认设置
如设置baseURL，超时工夫，增加token等，该设置会在之后的每次申请中失效
axios.defaults.baseURL = 'https://api.example.com';axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;axios.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded'; // 这个格局下，发送数据的格局是FormData格局10. 设置axios申请拦截器
axios.interceptors.request.use( config => { // 在申请发送之前做一些解决，比方参数序列化 if(config.method === 'post') { // axios默认提交应用的是application/json格局， // 这就须要咱们传递的参数是序列化之后的json字符串 config.data = JSON.stringify(config.data) // 如果content-type是application/x-www-form-urlencoded格局，则： // config.data = qs.stringify(config.data) } return config // 有且仅有一个config对象被返回 }, error => { // 在申请呈现谬误时做一些解决 return Promise.reject(error) })11. 移除申请拦截器
let myInterceptor = axios.interceptors.request.use(/*...*/)axios.interceptors.request.eject(myInterceptor)12. 设置axios申请响应拦截器
axios.interceptors.response.use( response => { // 对响应的数据进行一些解决，比方返回状态码的判断 const { status, statusText } = response if(status === 200) return Promise.resolve(response) return response; // 有且仅有一个response对象被返回 }, error => { // 对返回的谬误进行一些解决 return Promise.reject(error); });13. 在响应拦截器中增加超时后的解决
axios.interceptors.response.use( res => { return res; }, error => { const { code, message, response } = error if(code === 'ECONNABORTED'|| message === 'Network Error' || message.includes('timeout') > -1) { // 超时的异样解决 console.log('超时') } if (response) { const { status } = response switch (status) { case 500: ..... break; case 404: ..... break; } } return Promise.reject(error); });也能够在超时后从新申请，并设置申请次数和申请间隔时间，具体能够参看：
https://github.com/axios/axios/issues/164#issuecomment-327837467
14. 自定义设置并创立一个axios实例
let config = { baseURL: 'http://xxxx.com', // 如果url不是相对地址，baseURL会pin在url后面 timeout: 6 * 1000, // 超时工夫，如果申请超过该工夫，申请将会中断 headers: { // 要发送的申请头 'X-Requested-with':'XMLHttpRequest', 'Content-Type': 'application/json; charset=UTF-8', 'Access-Control-Allow-Origin': '*', token: '....' }};const _axios = axios.create(config);// 在实例中应用拦截器_axios.interceptors.request.use(/*...*/);15. 解决axios的响应后果
一个申请的响应个别蕴含如下信息：
{ config: {}, // 获取以后申请提供的配置信息 data: {}, // 服务返回的响应数据 headers: {}, // 服务器端的响应头 request: {}, // 获取以后响应的申请信息 status: 200, // 服务器返回的http状态码，比方常见的200/OK statusText: 'OK'// 服务器返回的http状态信息 }axios .get('/user?ID=12345') .then(res => { // 对响应后果res进行一些解决 console.log(res) }) .catch(err => console.log(err))