关于javascript:axios常用api速查表

对于 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))

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年50元

阿里云限时活动-2核2G-5M带宽-60G SSD-1000G月流量 ,特惠价99元/年(原价1234.2元/年,可以直接买3年),速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据