axios(一个网络请求库)

因为 Vue 2.0 学习笔记(三) 中提及了ajax请求数据中的axois,这里做一下回顾。

axios是前端最火的,基于 promise 的专注于数据请求的HTTP库,可以用在浏览器和 node.js 中。

特性

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

主流浏览器最新版均支持,IE8+支持。

一、axios基本语法

1、导入库文件

以 当前目录下的lib文件夹中放有axios.js文件 为例

<script src="./lib/axios.js"></script>

补充:使用cdn安装

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2、基本语法使用

如果要携带请求体,比如POST请求方法,参数应该放在data:{}对象里;如果发的是GET请求,URL地址中包含参数,应该写在params:{}对象里。(这两个对象中不需要的可以不写)

(1)发起GET请求

* 顺便解释一下返回数据的原理

// 1. 调用 axios 方法得到的返回值是 Promise 对象
    axios({
      // 请求方式
      method: 'GET',
      // 请求的地址
      url: 'http://www.liulongbin.top:3006/api/getbooks', //一个接口网站
      // URL 中的查询参数
      params: {
        id: 1
      },
      // 请求体参数
      data: {}
    }).then(function (result) {
      // .then用来指定请求成功之后的回调函数
      // 形参中的result是请求成功后的结果
      console.log(result)
    })

打印请求得到的结果result:

控制台打印结果

在postman(API管理工具)里查看到服务器返回的数据:

有三个属性,和上面六个属性不一致

所以result并不是服务器返回的数据

查看data属性:

和服务器应该返回的数据一致

 所以服务器返回的数据应该是result.data

原理:

axios在请求数据外加了一层壳

(2)发起POST请求

<button id="btnPost">发起POST请求</button>

<script src="./lib/axios.js"></script>
<script>
    document.querySelector('#btnPost').addEventListener('click', async function () {
      // 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!
      // await 只能用在被 async “修饰”的方法中
      //把得到的对象解构赋值 data是服务器真正返回的对象
      const { data } = await axios({
        method: 'POST',
        url: 'http://www.liulongbin.top:3006/api/post', //一个接口网站
        data: {
          name: 'zs',
          age: 20
        }
      })

      console.log(data)
    })
  </script>

补充:如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await
await 只能用在被 async “修饰”的方法中 

GET解构也同理:

<button id="btnGet">发起GET请求</button>
...
<script src="./lib/axios.js"></script>
  <script>
document.querySelector('#btnGet').addEventListener('click', async function () {
      // 解构赋值的时候,使用 : 进行重命名
      // 1. 调用 axios 之后,使用 async/await 进行简化
      // 2. 使用解构赋值,从 axios 封装的大对象中,把 data 属性解构出来
      // 3. 把解构出来的 data 属性,使用 冒号 进行重命名,一般都重命名为 { data: res }
      const { data: res } = await axios({
        method: 'GET',
        url: 'http://www.liulongbin.top:3006/api/getbooks' //一个接口网站
      })

      console.log(res.data)
    })
 </script>

二、axios直接发起GET和POST请求 

1、发GET请求

 <button id="btnGET">GET</button>
 <script src="./lib/axios.js"></script>
  <script>
document.querySelector('#btnGET').addEventListener('click', async function () {
      /* axios.get('url地址', {
        // GET 参数
        params: {}
      }) */

      const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks',  //一个接口网站
      {
        params: { id: 1 }
      })
      console.log(res)
    })
  </script>
返回的数据

 2、发POST请求

<button id="btnPOST">POST</button>

<script src="./lib/axios.js"></script>
<script>
document.querySelector('#btnPOST').addEventListener('click', async function () {
      // axios.post('url', { /* POST 请求体数据 */ })
      const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })
      console.log(res)
    })
  </script>
返回的数据

三、vue-axios

基于Vue的轻度封装

1、安装

CommonJS:

npm install --save axios vue-axios

将下面代码加入入口文件:

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

2、Script引入

按照这个顺序分别引入这三个文件: vueaxios and vue-axios

3、使用

示例:

Vue.axios.get(api).then((response) => {
  console.log(response.data)
})

this.axios.get(api).then((response) => {
  console.log(response.data)
})

this.$http.get(api).then((response) => {
  console.log(response.data)
})

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值