axios基本使用(axios是什么)

同步请求和异步请求

• 同步: 指单线程依次做几件事

• 异步: 指多线程同时做几件事

1. 同步请求: 指客户端浏览器只有一个主线程, 此线程负责页面的渲染和发出请求等操作, 如果此主线程发出请求的话则停止渲染而且会清空页面显示的内容 直到服务器响应了数据后才能再次显示, 由于主线程清空了原有显示的内容所以只能实现页面的整体刷新(整体改变)

2. 异步请求: 指客户端的主线程只负责页面渲染相关操作,发请求的事由新的子线程操作, 这样子线程发出请求时页面不需要清空,而且可以将查询回来的数据展示在原有页面基础之上, 这样实现的效果就叫做页面的局部刷新

客户端发出请求的几种方式

1. 通过浏览器的地址栏中发出请求 同步请求

2. 通过html页面中的超链接发出请求 同步请求

3. 通过html页面中的form表单发出请求 同步请求

4. 通过前端框架发出请求 异步请求

Get请求和Post请求

从字面理解:Get是跟服务器要数据, Post是给服务器传数据

1. Get: 请求参数写在请求地址的后面(可见),请求参数有大小限制只能穿几k的数据(不能处理文件上传) 应用场景: 查询请求一般都会使用get, 删除也会使用get请求

2. Post:请求参数放在请求体里面(不可见),参数没有大小限制 应用场景: 文件上传, 带有敏感信息的请求(比如注册登录时有密码)

axios是什么?

Axios是一个基于promise用于浏览器和node.js的简单HTTP客户端。Axios在一个具有可扩展接口的很小体积的JS包中提供了一个易于使用的库。它是同构的(它可以用相同的代码库在浏览器和nodejs中运行)。在服务器端，它使用服务器端上的node.js http模块，而在客户端(浏览器)上，它使用XMLHttpRequests。

特点

1. 从浏览器中创建 XMLHttpRequests

2. 从 node.js 创建 http 请求

3. 支持 Promise API

4. 拦截请求和响应

5. 转换请求数据和响应数据

6. 取消请求

7. 自动转换 JSON 数据

8. 客户端支持防御 XSRF

使用axios

1、使用npm：

npm install axios

2、使用bower：

bower install axios

3、使用yarn：

yarn add axios

4、使用jsDelivr CDN：

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> 

5、使用unpkg CDN：

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

使用axios发起get方式请求

//get无参
axios.get(地址)
.then(请求成功的回调)
.catch(请求失败的回调)
//拼接参数
axios.get(地址?参数=值&参数=值...)
.then(请求成功的回调)
.catch(请求失败的回调)
//parmas传参
axios.get(地址,{params:{参数}})
.then(请求成功的回调)
.catch(请求失败的回调)

<!-- deno案例 -->
<div id="app"></div>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: "#app",
    data: {
      isLogin: false,
      user: {
        nick: "军"
      }
    },
    created() {
      //vue-自动加载的方法
      //axios get 请求
      axios.get("/currentUser")
      .then(response => { 
         v.user = response.data;
         v.isLogin = v.user !== "";
      })
      .catch(err => {
        console.log(err)
      })
    }, 
    methods:{},
  })
</script>

使用axios发起post方式请求

//post 参数为对象
axios.post(地址,{参数})
.then(请求成功的回调)
.catch(请求失败的回调)

<!-- demo案例 -->
<div id="app"></div>
<script src="js/axios.min.js"></script>
<script>
  let v = new Vue({
    el: "#app",
    data: {
      user: {
        username: "",
        password: ""
      }
    },
    methods: {
      login() {
        //axios post 请求
        axios.post("login", v.user)
        .then(response => {
          if (response.data == 1) {
            alert("登录成功") location.href = "/";
          } else if (response.data == 2) {
            alert("用户不存在")
          } else {
            alert("密码错误")
          }
        })
        .catch(err => {
          console.log(err)
        })
      }
    }
  })
</script>

axios的其他方式发送请求

1. axios.request(config)

2. axios.get(url[, config])

3. axios.delete(url[, config])

4. axios.head(url[, config])

5. axios.options(url[, config])

6. axios.post(url[, data[, config]])

7. axios.put(url[, data[, config]])

8. axios.patch(url[, data[, config]])

【注】在使用别名方法时， url、method、data 这些属性都不必在配置中指定。

//发送put,
document.getElementById("btn7").onclick = function(){
  //发送put,接收三个参数，url 请求体 、 config配置对象
axios.put("http://localhost:3000/posts/2",{title:"axios学习", author:"Liaoxiaoyan"}) 
.then(response=>{
  console.log(response); 
 })
};

axios的配置介绍

1. baseURL：设置url的基本结构（请求根地址），域名和协议，再结合属性url某个请求路径，axios会自动将baseURL 和 url 进行拼接，从而得出正确的请求路径。

2. method：请求方式 get/post

3. timeout：延时时间（超过多少时间就取消请求）【单位是毫秒】

4. params： 请求参数（查询的对象）

5. transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理

6. headers：请求头 （在身份验证时，可以在头信息加入一个标识）

7. data：请求体（数据形式有json对象和字符串形式）

8. responseType：响应的数据格式 json/text/document/stream等

9. withCredentials：跨域亲戚是否携带cookies

10. auth：请求基础验证（验证用户名和密码）

11. adapter：自定义请求处理

12. xsrfCookieName和xsrfHeaderName 设置cookie的名字，设置头信息名字（安全设置，保证请求来自自己的客户端，避免跨站(域)攻击【标识保护作用---标识：返回请求的返回结果带有服务端的sessionID，保护：某些网站会通过超链接向在哪服务器发送请求，由于没有拿到服务器的sessionID，请求失败】）

13. socketPath：设置socket文件位置，向docker的守护进行发送请求，与代理proxy有优先级关系，两者同时设定，优先选socket

14. httpAgent、httpsAgent 设置客户端信息

15. proxy 代理：axios的代理是在服务端node.js 中【代理作用：抓取数据（爬虫），

16. 使用一个ip向某个目标服务器发送请求以抓取数据时，可能会被禁掉ip------解决：借助多个中间代理进行切换，发送请求从而获取到目标服务器的数据。】

17. cancelToken：取消请求

<button class="btn btn-primary">Get请求</button>
//获取按钮
const btns = document.querySelectorAll('button');btns[0].onclick =function (){ 
  //调用axios对象调用request方法（方法中传入一个对象参数）
   axios.request({ //请求类型 method: 'GET', //URL
    url:'http://localhost:3000/posts/2' })
   .then(response => { console.log(response)
})};
//发送
getdocument.getElementById("btn1").onclick = function(){
  axios({ method:"GET",url:"http://localhost:3000/posts/1" })
  .then(response=>{ 
    console.log(response);
  })
};
//发送
postdocument.getElementById("btn2").onclick = function(){
  axios({ method:"POST",url:"http://localhost:3000/posts", data:{ title:"axios学习", author:"Yehaocong" } })
.then(response=>{
  console.log(response);
  })
};

axios和ajax区别

• 1)理论区别：

1. axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封 装一样。（ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。）；

2. axios是ajax，ajax不止axios；axios有的ajax都有，ajax有的axios不一 定有。

• 2)代码区别

  axios({
    url: '/getName',
    method: 'get',
    responseType: 'json',
    // 默认的
    data: {
      name: 'tom'
    }
  }).then(function(response) {
    console.log(response);
    console.log(response.data);
  }).catch(function(error) {
    console.log(error);
  });
  //=====区别=======
  $.ajax({
    url: '/getName',
    type: 'get',
    dataType: 'json',
    data: {
      name: 'tom'
    },
    success: function(response) {
      console.log(response)；
    }
  })

• 3）逻辑区别

ajax本身是针对MVC的编程

ajax

axios符合现在前端MVVM的浪潮

axios

【注】由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层。

• 4）优缺点

axios优点：

1. 从浏览器中创建 XMLHttpRequest；

2. 支持 Promise API；

3. 从 node.js 创建 http 请求；

4. 转换请求和响应数据；

5. 自动转换JSON数据。

ajax缺点:

1. 基于原生的XHR开发，XHR本身的架构不清晰；

2. JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理；

3. 不符合关注分离（Separation of Concerns）的原则；

4. 配置和调用方式非常混乱，而且基于事件的异步模型不友好。