前后端交互手段之axios

什么是axios

axios 是基于 Promise 对 XMLHttpRequest 的封装。axios 底层还是使用的 ajax。

axios 也是一个基于 npm 管理的包。
https://www.kancloud.cn/yunye/axios/234845

为什么要使用 axios ？

是基于Promise的，可以很好的解决 传统的 ajax 回调地狱。

什么是回调地狱？

回调函数嵌套回调函数。在做异步处理的时候，我们要通过回调函数才可以获取到结构，有的时候我们需要做个异步操作，但是异步操作之间是由依赖性的，如果现在有 ABC三个异步操作，但是C的状态依赖B状态，B状态依赖的A的状态，那么如果要保证C的完成，那么前提是B的完成，那么必须保证A的完成。

在开发中提出了很多思想去解决回调地狱问题？

1. Promise (比较多)
2. generator + yeild （历史产物，过渡）
3. async + await可以实现同步的方式去写异步的。async + await 是对 Promise + generator 的一个语法糖。

http://es6.ruanyifeng.com/#docs/async

async function () {
  
    // 异步的代码
    var name = 'andy';
    // 传统的写法。回调函数
   // getUserList(function(){
       // 处理 
     //  console.log(rs);
    //});
    var rs = await getUserList(); // 返回值必须是 Promise对象（Promise这里可以写异步代码）
    console.log(rs);
    
}

axios的基本使用

<script src="./node_modules/axios/dist/axios.js"></script>
<!--引入之后，全局暴露一个axios对象-->
<script>

    console.log(axios);
    // 提供一系列的方法： get post delete  put
    // 1. get（随便找一个接口）
    var url = 'http://localhost:3000/news';
    var p1 = axios.get(url); // 返回值是一个 Promise对象

    p1.then((response)=> {

        // config: 配置信息，增加当前url请求的配置项，里面包含了请求的url地址，以及一些其他的参数
        // data: 代表服务器的响应
        // headers: 响应头信息
        // request: 当前的ajax实例对象
        // status: 响应状态码
        // statusText: 响应文本描述
        if( response.status === 200 ){
            // 网络请求成功，并不意味数据请求成功（得看接口的提供方，是否正常的返回数据）
            // {error_code: 0, reason: '成功返回', result: []}
            console.log(response.data);

        }
        //
    }, (error) => {
        console.log(error);
    })

</script>

axios提供一系列的方法： get post delete put，上面的是get，下面是post

<script src="./node_modules/axios/dist/axios.js"></script>
<!--引入之后，全局暴露一个axios对象-->
<script>

    console.log(axios);
    // 提供一系列的方法： get post delete  put
    // 1. post( 下面是之前注册的接口)
    var url = 'http://localhost:3001/api/v1/member/register';

    var data = {'username': 'lixiaoming', 'password': 'admin88'};
    // post提交的数据 需要注意一下编码的格式，设置一下请求头（x-www-form-urlencoded）

    var p1 = axios.post(
        url,
        'username=lixiing&password=admin88',
        // qs.stringify() JSON.stringify();
        {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
    );

    p1.then((response)=> {

        if( response.status === 200 ){
            // 网络请求成功，并不意味数据请求成功（得看接口的提供方，是否正常的返回数据）
            // {error_code: 0, reason: '成功返回', result: []}
            console.log(response.data);

        }
        //
    }, (error) => {
        console.log(error);
    })

</script>