什么是Axios ?

目录

          一. 什么是Axios？

                1.axios的特性

                2.axios 的使用

          二. Axios 的实际应用

              1.axios请求的方式

              2.axios的适用场景

         三.Axios 和 ajax 的区别 

             1. axios 和ajax 的区别

             2.两者各自的优缺点

一，什么是Axios？

      Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。

1.axios的特性

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

2.axios 的使用

 首先要安装模块：

npm install axios

在cmd或者终端都可以 运行代码，引入模块后可以直接使用。

二.Axios 的实际应用

例如：

// 发起一个post请求
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

1.axios请求的方式

axios.request(config)

axios.get(url[, config])

axios.delete(url[, config])

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

.......

注：axios的请求方式有很多，我们常用的get ,post 请求，其他的并不常用。想要了解更多可以去axios官网。

// 第一种方式  将参数直接写在url中axios.get('/getMainInfo?id=123')

.then((res) => {

  console.log(res)

})

.catch((err) => {

  console.log(err)

})// 第二种方式  将参数直接写在params中axios.get('/getMainInfo', {  params: {

    id: 123

  }

})

.then((res) => {

  console.log(res)

})

.catch((err) => {

  console.log(err)

})

  2.axios的适用场景

在特性里面已经有提到，浏览器发送请求，或者Node.js发送请求都可以用到Axios。像Vue、React、Node等项目就可以使用Axios，如果你的项目里面用了Jquery，此时就不需要多此一举了，jquery里面本身就可以发送请求。

三. Axios 和 ajax 的区别 

1.两者各自的优缺点

axios的优点：

• 从浏览器中创建 XMLHttpRequest                          
• 支持 Promise API
• 从 node.js 创建 http 请求
• 转换请求和响应数据
• 自动转换JSON数据

axios的缺点：

ajax的优点：

               无刷新更新数据

　　　　异步与服务器通信

　　　　前端和后端负载平衡

　　　　基于标准被广泛支持

　　　　界面与应用分离

ajax的缺点：

          对搜索引擎不友好
         要实现Ajax下的前后退功能成本较大
         跨域问题限制

2..Axios 和 ajax 的区别 

axios是通过Promise实现对ajax技术的一种封装，就像jquery对ajax的封装一样，简单来说就是ajax技术实现了局部数据的刷新，axios实现了对ajax的封装，axios有的ajax都有，ajax有的axios不一定有，总结一句话就是axios是ajax，ajax不止axios。

注： 传统Ajax 指的是 XMLHttpRequest（XHR），
　　axios和jQuer ajax都是对Ajax的封装、

自定义实例默认值

// 创建实例时配置默认值
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 创建实例后修改默认值
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 在请求或响应被 then 或 catch 处理前拦截它们。

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    return Promise.reject(error);
  });