由ajax到axios(koa项目)

什么是axios？

• 其实axios是ajax的升级版，axios库是一个改进ajax底层的库，它可以把原生的ajax库加入更多实用的功能，以及提供更多方便的操作。
• axios是一个基于promise的HTTP库，他可以用在浏览器和Node.js环境中。从浏览器中创建XMLHttpRequest,从Node.js中创建http请求。
• axios对原生的ajax作出了进一步的封装，提供了更多的实用功能以及简化了原生底层的操作，对于发起请求非常方便。

axios官网：http://www.axios-js.com/zh-cn/docs/index.html

axios的优势

• 无论在前端还是后端，axios都可以发起请求，只要是同一个API接口。
• 同样的API,node和浏览器都支持，平台切换没有任何的压力。
• 可以使用的Promise管理异步和并发，告别传统的callback回调函数的方式，避免回调地狱。
• 可以实现一些例如：拦截器、取消请求、自动转换JSON数据等（如果是原生的ajax，不仅需要设置请求头的信息，告诉浏览器这是一个application/json类型，而且需要使用JSON.parse()和JSON.stringfy()方法进行转义的。）

---

原生ajax是这样转换JSON数据的。

JSON.parse(xhr.responseText)

xhr.setRequestHeader('Content-Type', 'application/json') //设置请求头信息
    xhr.send(JSON.stringify({
        "page": 0,
        "count": 10
        })) //转义json数据

axios.get()发起请求

首先使用脚本引入

<script src="./javascripts/axios.min.js" type="text/javascript" charset="utf-8"></script>

axios.get()发起请求方式1：

        <script type="text/javascript">
            axios.get('/list?userName=qfb&age=21')
            .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}
        ]
    }
})

控制台：

后端接收

---

axios.get()发起请求方式2：使用get方法的第二个参数params进行参数携带

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

后端代码不变。

控制台效果预览：

后端查看：

---

axios.post()发送请求

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

后端代码：

router.post('/list2', async (ctx, next) => {
    console.log(ctx.request.body)
    ctx.body = 'list2'
})

post请求会自动转化为json数据

后端接收查看：

---

axios.post()请求，如果它的第二个参数，写成字符串的形式，会自动转化成“名称值对”的形式。

        <script type="text/javascript">
            axios.post('/list2','userName=西奥&age=23&gender=男')
            .then((res)=>{
                console.log(res)
            })
            .catch((err)=>{
                console.log(err)
            })      
        </script>

控制台效果:

后端接收查看：