Axios在vue项目中的封装

1. 什么是Axios？

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js，是一个第三方插件，第三方异步请求工具库

Axios的特点：

1. 可以运行在浏览器和node.js环境中
2. 基于promise，可以调用promiseAPI
3. 默认发送的是get请求，默认post请求发送的数据格式是JSON
4. 除了表单格式数据，对请求数据和响应数据可以自动转换JSON数据格式。
5. 可以对请求和响应做拦截

2. 回顾Ajax

Ajax的特点：

• 异步的JavaScript和XML
• 可以在浏览器中运行，但是不可以在node.js环境下运行
• 请求数据和响应数据需要手动转换格式
• 请求头也需要手动设置

Ajax创建步骤：

    // 1.创建XMLHttpRequest实例
    let xhr = new XMLHttpRequest()
    // 2.打开一个连接
    xhr.open('请求方式get/post','请求地址')
    // 3.发送请求
    // 必要时还需设置请求头格式：JSON/application/x-www-form-urlencoded
    xhr.setRequestHeader()
    // 必要时还需转换请求数据格式：JSON.stringfy(参数)/Qs.stringfy(参数)
    xhr.send(请求参数)
    // 4.接收响应
    xhr.onreadystatechange=function(){
   
      // 判断：请求是发送完成和请求是否发送成功
      if(xhr.readyState===4 && xhr.status===200){
   
        // 接收响应:必要时还要转换响应数据的格式 JSON.parse(xhr.response)
        console.log(xhr.response);
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18