jQuery中的axios

axios请求的使用

Axios 是一个基于 promise (Promise 是异步编程的一种解决方案)的 HTTP 库，可以用在浏览器和 node.js 中

axios与ajax的区别：

axios是通过promise实现对ajax技术的一种封装，就像JQuery实现ajax封装一样。简单来说就是：ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。也就是说，jQuery 将请求技术进行了封装 变成了 ajax , 而通过 promise 又把 ajax 进行封装就成了 axios。axios是ajax,ajax不止axios。

有了ajax,为什么还要使用axios？
　在现在的前端 mvvm 模式下 axios 更适合于数据请求。

它本身具有以下特征：

从浏览器中创建 XMLHttpRequest
从 node.js 发出 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防止CSRF/XSRF
jQuery ajax：

本身是针对MVC的编程,不符合现在前端MVVM
基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案
JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）
axios的原生使用：

axios({
      url:'http://47.93.206.13:8002/user/login',
      // baseURL:'http://47.93.206.13:8002',
      method:'post',
      // params:    用于get请求
      data:{    //用于post请求
        username:'admin1',
        password:'123321'   
      }
    }).then((res) => {
      console.log(res);
    })

 axios快捷方法：

/ 引入
let axios=require('axios')//到当前node_modules找，找不到再往上找
// 封装写法
axios.get('http://47.107.65.238:8888/index/article/pageQuery?page=1&pageSize=10')
  .then(function (response) {
    console.log(response);
  })
//axios#get(url[, config])
axios.get('/index/article/pageQuery',{
    baseURL:'http://47.107.65.238:8888',
    params:{
      page:1,pageSize:10,
    }
  })
  .then(function (response) {
    console.log(response);
  })
  // axios.defaults.baseURL = 'http://47.107.65.238:8888';  baseURL也可以在外部默认全局定义

 使用注意点：axios 会自动将对象转换为json字符串，请求头默认格式为：contentType=“application/json”，而$.ajax()  会自动将对象转换为查询字符串,对jquery的ajax来说 请求头默认为 contentType='application/x-www-form-urlencoded' 。

axios与ajax代码区别及字符格式转化：

 // ajax与axios区别
  // ajax默认为查询字符串
  $.ajax({
     method: "get",
     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
    data: {
        info: "邯郸天气"
     },
    // 如果为JSON格式要有以下操作
    // data: JSON.stringify({
    //         info: "邯郸天气"
    // }),
    // contentType='application/json'
    success:function(res){
          console.log(res)  //直接获取JSON里面data里面的数据（以查询字符串查到的）
    },
  });
// axios请求默认json格式字符串
  axios({
     method: "get",
     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",
    params: {
        info: "邯郸天气"
       },
     }).then((res)=>{
       console.log(res.data)//通过点data才与上面的ajax打印结果一样(以JSON查到的)
  });

  // post请求 如果要求是查询字符串形式

//   axios({
//      method: "post",
//      url: "",
//     obj={
//         info: "邯郸天气"
//      },
//       data:Qs.stringify(obj)//转换为查询字符串
//      }).then((res)=>{
//        console.log(res.data)
//   });

axios请求类型params和data的区别

params是添加到url的请求字符串中的，用于get请求。

data是添加到请求体（body）中的， 用于post请求。

 比如对于下面的get请求：

axios({
     method: "get",

     url: "http://www.tuling123.com/openapi/api?key=20ff1803ff65429b809a310653c9daac",

    params: {
        info: "邯郸天气"},

     }).then((res)=>{
       console.log(res.data)

  });

如果我们将params修改为data，显然是不能请求成功的，因为get请求中不存在data这个选项。