axios常用api速查表

Posted 2021-10-15 sugar_coffee

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