1 axios的基本使用

1.1 使用默認(rèn)方式發(fā)送無參請求

<script>
axios({url:'http://...../xxx'}).then(res=>{})
</script>

1.2. 使用get方式請求

<script>
    //無參
axios({url:'http://...../xxx'}).then(res=>{})
    //有參
axios({url:'http://...../xxx?id=1'}).then(res=>{})   
    //傳對象
axios({url:'http://...../xxx?id=1',params:{id:'1',name:'xxx'}}).then(res=>{})       
</script>

1.3 使用post方式請求

axios({
    url:'http://...../xxx?id=1',
    method:'post',
    params:{id:'1',name:'xxx'
}}).then(res=>{}) 

后臺控制器接收到的name 為null

原因是：axios使用post攜帶參數(shù)請求默認(rèn)使用application/json

解決方式一：params屬性進(jìn)行數(shù)據(jù)的傳遞
解決方式二：直接寫"name=張三"
解決方式三：服務(wù)器段給接收到的參數(shù)加上@requestBody

2 axios請求方式

2.1 使用axios.get方式

無參

axios.get('http://...../xxx').then(res=>{
}).catch(err=>{    
})

有參

axios.get('http://...../xxx',{params:{id:1,name:xxx}}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

2.2 使用axios.post方式

無參

axios.post('http://...../xxx').then(res=>{
     console.log(res)
}).catch(err=>{
    console.log(err)
})

有參

axios.post('http://...../xxx',"name=張三&age=10").then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

使用data傳遞數(shù)據(jù)，后臺需要將axios 自動轉(zhuǎn)換的 json數(shù)據(jù) 轉(zhuǎn)換為java對象

要修改后臺代碼（接收參數(shù)添加@requestBody注解）

axios.post('http://...../xxx',{id:1,name:xxx}).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)
})

3 axios發(fā)送并發(fā)請求

axios.all().then().catch()

axios.all(
    [
        axios.get('http:/xxxxxx/xxxx'),
        axios.get('http:/xxxxxx/xxxx',{params:{id:1}}),
    ]).then(res=>{//請求成功返回的是一個(gè)數(shù)組
        console.log(res)
        console.log(res[0])
        console.log(res[1])
    }
    ).catch(err=>{
        console.log(err)
    })

將響應(yīng)數(shù)據(jù)自動分離

axios.spread((res1,res2)=>{
    console.log(res1);
    console.log(res2);
})

4 axios全局配置

<script>
    axios.default.baseURL = 'http:/xxxx:8080';//基礎(chǔ)路徑
    axios.default.timeout = 5000;//超時(shí)時(shí)間
    //自動拼接baseURL
   
</script>

5 axios的實(shí)例

請求攔截器(成功、失敗)。use兩個(gè)函數(shù)作為參數(shù)

<script>
    //創(chuàng)建axios的實(shí)例
    let service = axios.create({
        baseURL:'http://xxxx:9999',
        temout:5000
    })
    let service2 = axios.create({
        baseURL:'http://xxxx:9999',
        temout:5000
    })
        

    service({
        url:'getxxx'
    }).then(res=>{
        console.log(res);
    })

</script>

6 axios攔截器

axios.interceptors.request.use(config=>{
    console.log("進(jìn)入請求攔截器")
    return config;//放行請求 *
    //config包含data、headers、request、status、statusText
},err=>{
    console.log("請求失敗")
})

響應(yīng)攔截器(成功、失敗)

axios.interceptors.response.use(config=>{
    console.log("響應(yīng)攔截器")
    
    return config;//放行
},err=>{
    console.log("響應(yīng)失敗")
})