使用 axios 发送网络请求------前后端交互基础

axios

声明：这里只涉及基础用法，并且以代码形式呈现。其他更多技术细节详见 https://github.com/axios/axios

基本语法

axios ({
  method: '请求的类型', //get、post
  url:'请求的url地址'
}).then((result)=> {
   //.then用来指定请求成功之后的回调函数
   //形参中的result是请求成功之后的结果
})

axios返回拓展图解

1. axios基本使用

1、 红色方框 console.log(result) 输出的是一个promise对象，即调用 axios 方法得到的返回值是 Promise 对象。
拓展：只要是调用某个方法的返回值是 Promise 实例，则前面可以添加 await，这是ES8新增的语法。

2、 params: { } , //不指定id，输出全部数据，数组长度83

• 绿色方框 console.log(result)
  输出的是套了一层壳，也就是图解左边网页，包含6个属性（config、data、headers、request、status、statusText），不是真正的data；
• 绿色方框 console.log(result.data)
  输出的才是真实数据（是6个属性之一的.data属性），也就是图解右边接口服务器；

3、 params: { id: 1 }, //请求id=1的图书，数组长度1

• 绿色方框 console.log(result)
  输出的是套了一层壳，也就是图解左边网页，包含6个属性（config、data、headers、request、status、statusText），不是真正的data；
• 绿色方框 console.log(result.data)
  输出的才是真实数据（是6个属性之一的.data属性），也就是图解右边接口服务器；

2. 发起 POST / GET 请求

• 如果调用某个方法的返回值是 Promise 实例，则前面可以添加 await
  不加 await 则返回Promise对象，加了 await 就返回真实数据结果
• await 只能用在被 async “修饰”的方法中，只要方法内有await，那方法必须用async修饰
• 知道解构赋值才能看得懂下面代码

POST

POST 打印结果

• 第32行代码打印出 result 包含6个属性，其中 .data 是我们关心的数据；
• 39行代码利用了解构赋值，第47行代码打印所关心的 .data 属性数据
  
  下面是展开的返回结果，看的更加直观：
  

GET

GET 打印结果

3. 简化 axios.get( ) axios.post( )

 axios.get('url地址', {
        params: {}  // GET 参数
      }) 

axios.post('url地址', {
       {}  // POST 参数，不需要data对象
      }) 

axios.get/post 返回的是Promise对象

以后在项目里就直接使用 axios.get( ) axios.post( ) 发送请求即可。