AXIOS_安装和入门_安装axios.js网站

一、技术说明

1.  axios.js 是一个基于promise 的 http 库，支持浏览器和Node环境；
2. 传统的 ajax 技术无法满足前后端分离时代的新需求，而 axios 则在实现 ajax 功能的基础上得到了技术增强
3. 一般使用 axios 来发送get/post请求，然后返回 json 格式数据

二、安装测试

1. 安装方式：一种是node下运行，另一种是在浏览器下运行
2. node下运行，需要安装node环境，安装完毕，在项目下命令安装：npm install axios
3. 如果在浏览器使用，可以先用cdn地址代替入门：

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

4.如果有本地服务器的话，可以本地测试，没有的，下面提供一个网站：https://cdn.liyanhui.com/data.json

5.我们先用简单方式在Node环境下实现远程获取 json 数据

const axios = require('axios');
 
//使用 get 请求获取数据
axios.get('https://cdn.liyanhui.com/data.json')
    .then(res => {
        console.log(res.data)
    })
    .catch(err => {
 
        console.log('错误：'+err)
    })

6. 浏览器执行远程 ajax 请求会有跨域问题，我们保存到本地执行即可；

7. 本地 IDE 具有内置服务器功能，可以直接套用运行：

https://cdn.liyanhui.com/data.json (可跨域，设置过)

https://cdn.ycku.com/data.json(未跨域，默认)

【注：】如果你是node环境发送，那倒是无所谓，不受跨域影响

8.

（1）有时，我们需要在url地址配置参数进行数据筛选（这里单纯是json，为了理解）

axios.get('https://cdn.liyanhui.com/data.json',{
    params:{
        id:19,
        status:1,
    }
}).then(res => {
    console.log(res.data);
});

（2）我也可以将所有的配置，比如 get , url 都以配置的方式实现

axios({
    method: 'get',
    url: 'https://cdn.liyanhui.com/data.json',
    params: {
    id: 19,
    status: 1,
    }
}).then(res => {
    console.log(res.data)
})

三、并发操作

1. 如果项目中可能会产生多个异步请求，他们会根据耗时长短来执行
2. 我们如果想让所有异步请求以后，按照指定顺序执行的话，使用all()方法

   axios({
       method: 'get',
       url: 'https://cdn.liyanhui.com/data.json',
       params: {
           id:1,
           status :5
       }
   }).then(res =>{
       console.log(res);
   })
    
   axios({
       method: 'get',
       url: 'https://cdn.liyanhui.com/data.json',
       params: {
           id:1,
           status :5
       }
   }).then(res =>{
       console.log(res);
   })
    
   //上面的两个一定是多线程执行，谁先完成先发送，而all()方法则是把多个axios请求都完成，然后进入队
   //列，再一个一个按序发送
    
   axios.all([
       axios({
           url: 'https://cdn.liyanhui.com/data.json?id=3'
       }),
       axios({
           url: 'https://cdn.liyanhui.com/data.json?id=2'
       }),
       axios({
           url: 'https://cdn.liyanhui.com/data.json?id=1'
       }),
   ]).then(res => {
       for(let i = 0 ; i < res.length;i++){
           // console.log(res[i].config.data);
           console.log(res[i]);
       }
   });
   

    

 四、实例化和拦截

1. 全局属性配置，即将属性中的大量重复内容抽离出来单独设置；

//全局默认值设置，baseUrl 会自动再url前面添加

axios.defaults.baseURL = 'https;//cdn.liyanhui.com';

ps: 其它更多属性可以参考手册，一般来说baseURL,timeout和headers 比较常用；

2. 实例化，顾名思义就是new一个对象，这样这个对象具有独立性不会被干扰；

//实例化
 
const myAxios = axios.create();
 
myAxios.defaults.baseURL = 'https://cdn.liyanhui.com';
 
//或者
 
const myAxios = axios.create({
 
baseURL: 'https://cdn.liyanhui.com',
 
});
 
//request 通用
 
myAxios.request({
 
method: 'get',
 
url: '/data.json'
 
}).then(res => {
 
console.log(res.data);
 
});

3. 拦截器

（1）就是在 Ajax 获取数据之前先拦截处理一些事务操作；

（2）这些操作包括：修改axios配置信息 、loading  、判断验证跳转等；

（3）拦截处理完毕以后，再通过return 返回继续处理即可

myAxios.request({
 
method: 'get',
 
url: '/data.json',
 
}).then(res => {
 
console.log(res.data);
 
});
 
//添加请求拦截
 
myAxios.interceptors.request.use(config => {
 
//仅仅会执行此作用域下额内容
 
console.log('loading');
 
//如果删除下面内容，那么请求将直接报错，因为拦截该axios对象后，拦截器仅会执行该代码块中的内容
 
return config;
 
});
 
//添加响应拦截
 
myAxios.interceptors.response.use(response => {
 
console.log('loading');
 
return response;
 
});