axios的安装与使用

地址：http://www.axios-js.com
含义：易用、简洁且高效的（基于promise）http库 （一个封装好的http插件）
特点：
支持node端和浏览器端
支持promise
丰富的配置项

全局安装axios
npm/cnpm install axios -S

import axios from axios //每个组件里单独引入
常用的方法
get方法：

<template>
    <div>
       <li v-for="item in arr" :key="item.id">{{item.title}}</li>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
           arr:[]
        }
    },
    created(){
        // console.log(axios);
    //    axios.get('http://localhost:4000/arr')
    //    .then(res=>{
    //        console.log(res.data);
    //    })
    //      axios.get('http://localhost:4000/arr?id=2')
    //    .then(res=>{
    //        console.log(res.data);
    //    }) 
        axios.get('http://localhost:4000/arr',{
            params:{
                id:2
            }
        })
        .then(res=>{
            console.log(res.data);
            this.arr=res.data;
         })  
             }
}
</script>

post方法

<template>
    <div>
       <li v-for="item in arr" :key="item.id">{{item.title}}</li>


       <button @click="get">get请求</button>
       <button  @click="post">post请求</button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
           arr:[],
           tit:"成都"
        }
    },
    methods:{
        post(){  //post请求

            // axios.post(url[,数据[,配置项]])
            // axios.post('http://localhost:4000/arr')
            // .then(res=>{
            //     console.log(res.data);
            // })
            // .catch(err=>{
            //     console.log(err);
            // })

             axios.post('http://localhost:4000/arr',{
                 title:this.tit
             })
            .then(res=>{
                console.log(res.data);
            })
            .catch(err=>{
                console.log(err);
            })

        }
    }
}
</script>

all方法
可以实现发送多次请求，请求成功之后再做处理
在项目开发中，一个页面的数据需要请求多个接口地址，那我们就执行多并发请求
语法：

<template>
    <div>
       <li v-for="item in arr" :key="item.id">{{item.title}}</li>
       <button @click="get">get请求</button>
       <button  @click="post">post请求</button>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return {
           arr:[],
           tit:"成都it"
        }
    },
    methods:{
        getuser(){
            return axios.get('http://localhost:4000/user')
        },
        getarr(){
            return axios.get('http://localhost:4000/arr') 
        }
    },
    created(){
    //    执行多并发请求
    // axios.all([函数1(),函数2(),函数3()]) 一个函数返回一个结果，多个函数返回多个结果
    // axios.spread((结果1,结果2,结果3)=>{}) 去获取每个函数返回的结果
    // 语法：
    // axios.all([函数1(),函数2(),函数3()])
    // .then(
    //     axios.spread((结果1,结果2,结果3)=>{
    //     })
    // )

    axios.all([this.getuser(),this.getarr()])
    .then(axios.spread((users,arrs)=>{
        console.log(users);
        console.log(arrs);
    }))

    }
}
</script>

axios Api
可以通过向 axios 传递相关配置来创建请求

axios({配置对象})
axios({
   url:"地址",
   method: 'post',   //请求方式
   data: {      //传递的参数
    参数1: 值,
    参数2: 值
  }
})
.then(res=>{   //res是axios返回的请求对象  res.data才是后端返回的数据

})
.catch(err=>{
  console.log(err)
})

axios的create方法
create方法不是用来请求数据的，而是用来创建一个axios实例对象，定义一些初始化配置

let $axios=axios.create({
    baseURL:'http://xxxx.com/aaa',
    timeout:3000  //请求时长
})

axios的封装
src目录下面新建http目录，目录下新建index.js文件

import axios from 'axios'

//初始化配置
const $axios=axios.create({
    baseURL:'http://localhost:4000',
    timeout:3000
})


// 请求拦截器   修改请求头 【在请求头上加token】
$axios.interceptors.request.use(function (config) {
   
    // 请求发送之前做一些事情
    return config;  //一定要return config 请求无法发送
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 响应拦截器   返回数据的校验  状态是否正确  信息的提取
$axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
  }, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  });



export default $axios;