Axios基本使用 _ 重蔚自留地

同步请求和异步请求

同步: 指单线程依次做几件事 异步: 指多线程同时做几件事 同步请求: 指客户端浏览器只有一个主线程, 此线程负责页面的渲染和发出请求等操作, 如果此主线程发出请求的话则停止渲染而且会清空页面显示的内容直到服务器响应了数据后才能再次显示, 由于主线程清空了原有显示的内容所以只能实现页面的整体刷新(整体改变) 异步请求: 指客户端的主线程只负责页面渲染相关操作,发请求的事由新的子线程操作, 这样子线程发出请求时页面不需要清空,而且可以将查询回来的数据展示在原有页面基础之上, 这样实现的效果就叫做页面的局部刷新

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

通过浏览器的地址栏中发出请求 同步请求通过html页面中的超链接发出请求 同步请求通过html页面中的form表单发出请求 同步请求通过前端框架发出请求 异步请求

Get请求和Post请求

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

Get: 请求参数写在请求地址的后面(可见),请求参数有大小限制只能穿几k的数据(不能处理文件上传) 应用场景: 查询请求一般都会使用get, 删除也会使用get请求 Post:请求参数放在请求体里面(不可见),参数没有大小限制应用场景: 文件上传, 带有敏感信息的请求(比如注册登录时有密码)

axios是什么

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特点

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

使用axios

Using npm:  //第一种
	$ npm install axios
Using bower:  //第二种
	$ bower install axios
Using yarn:  //第三种
	$ yarn add axios
Using jsDelivr CDN:  //第四种  -----推荐使用
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
Using unpkg CDN:  //第五种
	<script src="https://unpkg/axios/dist/axios.min.js"></script>

使用axios发起get方式请求

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

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

    }
  })
</script>

使用axios发起post方式请求

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

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

axios的其他方式发送请求

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])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的配置介绍

baseURL：设置url的基本结构（请求根地址），域名和协议，再结合属性url某个请求路径，axios会自动将baseURL 和 url 进行拼接，从而得出正确的请求路径。method：请求方式 get/posttimeout：延时时间（超过多少时间就取消请求）【单位是毫秒】params： 请求参数（查询的对象）transformRequest、transformResponse 对请求结果进行预处理、对响应结果进行预处理headers：请求头（在身份验证时，可以在头信息加入一个标识）data：请求体（数据形式有json对象和字符串形式）responseType：响应的数据格式 json/text/document/stream等withCredentials：跨域亲戚是否携带cookiesauth：请求基础验证（验证用户名和密码）adapter：自定义请求处理xsrfCookieName和xsrfHeaderName 设置cookie的名字，设置头信息名字（安全设置，保证请求来自自己的客户端，避免跨站(域)攻击【标识保护作用---标识：返回请求的返回结果带有服务端的sessionID，保护：某些网站会通过超链接向在哪服务器发送请求，由于没有拿到服务器的sessionID，请求失败】）socketPath：设置socket文件位置，向docker的守护进行发送请求，与代理proxy有优先级关系，两者同时设定，优先选sockethttpAgent、httpsAgent 设置客户端信息proxy 代理：axios的代理是在服务端node.js 中【代理作用：抓取数据（爬虫），使用一个ip向某个目标服务器发送请求以抓取数据时，可能会被禁掉ip------解决：借助多个中间代理进行切换，发送请求从而获取到目标服务器的数据。】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)
  })
};
//发送get
document.getElementById("btn1").onclick = function(){
  axios({
    method:"GET",
    url:"http://localhost:3000/posts/1"
  }).then(response=>{
    console.log(response);
  })
};
//发送post
document.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)理论区别：axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样。（ajax技术实现了局部数据的刷新，axios实现了对ajax的封装。）；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的编程