共计 3304 个字符,预计需要花费 9 分钟才能阅读完成。
对于 axios api 我想大家曾经用过很屡次了。在本文中,我列出了一些罕用的 axios api 申请的语法,在你可能遗记 api 的时候能够翻出来查看,而不是在旧的我的项目中寻找之前应用过的申请语法。
1. 装置援用
装置:npm install axios
引入:import axios from 'axios'
2. 应用 axios 发送简略 get 申请
// 如果没有指明申请形式,则默认的是 GET
axios('/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))
正文完
发表至: javascript
2021-01-21