axios请求与响应配置参数（koa项目+引入axios）

请求配置参数

axios常见发起的请求无非两种,get请求和post请求，如下方代码，但这样写虽然方便，但都没有额外进行对各种参数配置，实际开发中标准需求，更多见的是一种参数配置的写法（如下图1）。

        <script type="text/javascript">
            axios.post('/list2',{
                    userName:'qfb',
                    age:22,
                    gender:'女'
            })
            .then((res)=>{
                console.log(res)
            })
            .catch((err)=>{
                console.log(err)
            })
--------------------------------------------------------------
            axios.get('list/',{
                params:{
                    userName:'qfb',
                    age:21,
                    gender:'男'
                }
            })
            .then((res)=>{
                console.log(res)
            })
            .catch((err)=>{
                console.log(err)
            })
        </script>

图1

---

axios配置参数写法：单独一个axios()
发送get请求

        <script type="text/javascript">
            axios({
                url:'/list',
                method:"GET",
                params:{ userName:'Lily' }, //以查询字符串形式携带参数
                headers:{
                    'Content-Type':"application/json"
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

后端代码：

router.get('/list', async (ctx, next) => {
    console.log(ctx.request.query)
    ctx.body = {
        errCode:0,
        errMsg:"ok",
        list:[
            {"userName":"覃放","age":22}
        ]
    }
})
router.post('/list2', async (ctx, next) => {
    console.log(ctx.request.body)
    ctx.body = 'list2'
})

发送post请求

        <script type="text/javascript">
            axios({
                url:'/list2',
                method:"POST",
                headers:{
                    'Content-Type':'application/json'
                },
                data:{ //以"名称值"对的形式携带参数
                    userName:'Jelly', 
                    age:23
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

---

发送post请求既携带查询字符串参数，又携带“名称值”对形式的参数

        <script type="text/javascript">
            axios({
                url:'/list2',
                method:"POST",
                params:{ userName:'Lily' },
                headers:{
                    'Content-Type':'application/json'
                },
                data:{ //以"名称值"对的形式携带参数
                    userName:'Jelly', 
                    age:23
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

---

axios.get()配置参数写法：

        <script type="text/javascript">
            axios.get('/list',{
                headers:{
                    'Content-Type':'appliction/json'
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

axios.post()配置参数写法：

        <script type="text/javascript">
            axios.post('/list2',{userName:'Jam'},headers:{'Content-Type':'appliction/json'})
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

axios.defaults全局配置写法，无论你发起的是get请求还是发起post请求，默认都会携带全局配置过的参数。

        <script type="text/javascript">
            axios.defaults.params = {name:"qfb"}
            axios.get('/list',{})
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
            
            axios.post('/list2',{})
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

---

局部优先级高于全局优先级

        <script type="text/javascript">
            axios.defaults.params = {name:"qfb"}
            axios.get('/list',{
                params:{
                    name:'Bom'
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
            
            axios.post('/list2',{},{
                params:{
                    name:'cookie'
                }
            })
            .then((res) => {
                console.log(res)
            })
            .catch((err) => {
                console.log(err)
            })
        </script>

---

响应配置参数