细谈axios 和 ajax

万物皆可抛,唯有学习高

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

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。
axios是ajax ajax不止axios。

使用 npm:

$ 1. npm install axios


$ 2. 在main.js 挂载到vue原型上起的名字叫$axios,程序员的默认吧 随你起也行 
     import axios from "axios";
    Vue.prototype.$axios = axios;

使用 cdn:外链方式

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

// 为给定 ID 的 user 创建请求  1.get  方法   拼接参数字符串
axios.get('/user?ID=12345')
  .then(res {
    console.log(res);
  })
  .catch(err) {
    console.log(err);
  });

// 多个请求可以这样做   2. 用params对象形式传多个
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(res {
    console.log(res);
  })
  .catch(err) {
    console.log(err);
  });


//post 请求      3.post 类似  ajax 去掉里面的params:{} ,直接在{}对象里写
axios.post('/user', {
    firstName: 'feng',
    lastName: 'lang'
  })
  .then(res {
    console.log(res);
  })
  .catch(err) {
    console.log(err);
  });



//创建实例可以使用自定义配置新建一个 axios 实例
 axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});


//某个请求的响应包含以下信息

{
  // `data` 由服务器提供的响应
  data: {},

  // `status` 来自服务器响应的 HTTP 状态码
  status: 200,

  // `statusText` 来自服务器响应的 HTTP 状态信息
  statusText: 'OK',

  // `headers` 服务器响应的头
  headers: {},

  // `config` 是为请求提供的配置信息
  config: {}
}

//使用 then 时，你将接收下面这样的响应：

axios.get('/user/12345')
  .then(function(response) {
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
  });

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

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

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });


// cnpm i axios 
//在main.js 挂载到vue原型上起的名字叫$axios,程序员的默认吧 随你起也行 
//import axios from "axios";
//Vue.prototype.$axios = axios;



  // 勇于 尝试  新的事物   ！！

// .Vue 生命周期11个  钩子函数  常用8个  

beforeCreate  --  创建前  
created  ----   创建后 
beforeMount  --  实例 挂载到DOM 前 
mounted  --- 挂载到DOM 之后  
beforeUpdate  ---  虚拟DOM更新前 
updated --- 虚拟 DOM更新后  
beforeDestory  ---  实例销毁前
destoyed  -- 销毁后 
  
//补充 个小知识 技巧
//前++ 和 后++的区别
1 . 先看到是运算符还是值
2 . 如果是运算符就先运算在赋值
3 . 如果先看到的是值那么就先赋值在运算

//splice(会修改原数组,可以对指定的数组进行增删)  slice(0,3)// 0 1 2 不会修改原数组