Axios 复习笔记

Axios复习笔记

前言

最近小编在准备面试，于是想复习一下axios，顺便写一下文章当做学习笔记。有写的不对的地方，欢迎各位大佬在评论区指正。

axios简介

axios是一个基于promise的网络请求库。前端开发总是离不开网络请求,相较于传统的网络请求方式(XMLHttpRequest,ajax)，axios具有以下好处:

• API简洁,更容易维护,解决回调地狱问题
• 提供更加直观可用的方法( get( ),post( ) )
• 可以在请求和响应前做统一处理( 拦截器 )
• 自动转化格式，不用通过JSON方法

现在我们来简单看一下axios的使用方法

基本使用

首先安装axios

 npm install axios

axios的基本请求示例:

axios('url').then((res)=>{
    console.log(res)
})

除了then方法以外，axios也支持async/await形式:

const getData = async ()=>{
    const res = await axios('url')
    console.log(res)
}

如果没有指明请求方法，axios默认使用get(), 如果你想用post发送请求，你可以这样子做:

axios.post('url').then((res)=>{
    console.log(res)
})

如果你的post想添加params参数，你可以往axios中传递一个对象：

axios.post('url',{
    key:value
})

你也可以直接给axios传递一个对象，里面的参数可以配置axios:

axios({
    methods: 'post',
    url:'url',
    data:{
        key:value
    },
    ...
})

axios进阶

你可以创建一个axios实例，然后先写好统一的配置，后面发送请求时，就不需要重复书写。对于变化的参数，只需要传递对应的参数即可。

export const server =  axios.careate({
    //设置基地址，超时时间，请求头等
    baseURL:'http://localhost/',
    timeout:1000,
    headers: {'X-Custom-Header': 'foobar'},
    ...
})

还可以在这个实例上设置拦截器，允许你在请求发出前或响应返回后对其进行拦截处理。拦截器分为请求拦截器和响应拦截器两种。

请求拦截器

请求拦截器会在网络请求发送之前执行，适用于:

• 在请求头添加信息( token )
• 修改请求数据
• 设置login状态

在axios中，通过axios.interceptros.request.use设置请求拦截器 :

    axios.interceptors.request.use((config)=>{
        // 请求成功做什么...
        config.headers.token = useUserStore().token
        return config
    },(err)=>{
        //请求错误做什么
        Promise.reject(err)
    })

响应拦截器

响应拦截器会在响应后执行，适用于:

• 统一处理错误码信息
• 转化数据格式
• 结束login状态

在axios中，可以通过axios.interceptros.response.use设置响应拦截器 :

    axios.interceptros.response.use((res)=>{
        if(res.data&&res.data.code == 200){
            return res.data
        }
        return Promise.reject(res.data)
    },(err)=>{
        if(err.response && err.response.status === 401){
            // 用户未登录或者登录过期
            router.push('/login')
        }else if(err.response){
            alert('服务异常')
        }else{
            alert('网络异常')
        }
        
        return  Promise.reject(err)
    })

取消请求

axios中也支持取消发送的网络请求,这是非常实用的功能，常用于:

• 用户频繁操作时取消上一个请求(搜索框查询)
• 组件卸载时，取消已发送的请求

axios支持两种取消请求的方式，分别是AbortControll (中止控制器) 和 CancelToken (取消令牌)。CancelToken是较旧的方法，虽然仍可使用。但官方更加推荐的是AbortControll的方法，我们来看一下AbortControl如何使用:

const controll = new  AbortController()
axios.get('/api/get'，{
    //传递signal参数来指定取消器
    signal: controll.signal
}).then((res)=>/*处理响应*/ )
.catch(err=>{
    if(axios.isCancel(err)){
         console.log('请求已取消')
    }else{
        //处理其它错误
    }
})

//取消方法:
controll.abort()

结语

axios作为基于 Promise 的现代化 HTTP 客户端，它凭借简洁的 API 和强大的扩展性成为前端开发标配。

最后，感谢阅读本文！如果对 Axios 的某个功能点或面试准备有进一步疑问，欢迎在评论区留言交流。期待与大家共同成长，在前端技术的道路上不断探索～

创作不易 礼貌集赞