1.1.安装与引入

(1)在HTML文件中引入

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

(2)在脚手架中使用
安装axios

npm install axios -S

引入（哪个组件使用它就要在哪个组件中引入进来）

import axios from 'axios'

2.GET 方法

语法：axios.get(url,config)

methods:{
    getMsg(){
        //拼接url传递参数
       var url = this.baseUrl + '?q=vue&sort=stars'
       axios.get(url).then(function(res){
            console.log(res)
        })
    },
    getMsg2(){
        //使用params传递参数
        var data = {q:'vue',sort:"stars"}
        axios.get(this.baseUrl,{params:data}).then(function(res){
            console.log(res)
        })
    },
}

3.POST 方法

语法：axios.post(url,data,config)

postMsg(){
    var data = {q:'vue',sort:"stars"}
    axios.post(this.baseUrl2,data).then(function(res){
        console.log(res)
    })
},

4.请求配置项

url:是用于请求的服务器 URL
method:创建请求时使用的方法,默认是 get
baseURL:它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
headers:对象类型，是即将被发送的自定义请求头
params:即将与请求一起发送的 URL 参数
data:作为请求主体被发送的数据，适用于post方法
timeout:指定请求超时的毫秒数
responseType:表示服务器响应的数据类型。默认json

在请求头添加token

<script>
import axios from 'axios'

export default {
    data(){
        return{
            baseUrl:"https://api.github.com/search/repositories",
            baseUrl2:"api/process_post",
        }
    },
    mounted(){
        window.localStorage.setItem("token","abcdefghijk")
    },
    methods:{
        getMsg(){
            //拼接url传递参数
            var url = this.baseUrl + '?q=vue&sort=stars'
            //将token添加到请求头中
            axios.get(url,{headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        getMsg2(){
            //使用params传递参数
            var data = {q:'vue',sort:"stars"}
            //将token添加到请求头中
            axios.get(this.baseUrl,{params:data,headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
        postMsg(){
            var data = {q:'vue',sort:"stars"}
            //将token添加到请求头中
            axios.post(this.baseUrl2,data,{headers:{"Authorization":window.localStorage.getItem("token")}}).then(function(res){
                console.log(res)
            })
        },
    }
}
</script>

5.响应结构

axios请求的响应包含以下信息：
data: 由服务器提供的响应
status: HTTP 状态码 例如200,
statusText:来自服务器响应的 HTTP 状态信息 例如 "OK",
headers: 服务器响应的头,
config: 是为请求提供的配置信息

6.配置的默认值

你可以指定将被用在各个请求的配置默认值。
全局的 axios 默认值：

//入口文件
import Vue from 'vue'
import axios from 'axios'

axios.defaults.baseURL = 'https://api.example.com';
//添加token
axios.defaults.headers.common['Authorization'] = window.localStorage.getItem("token");
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

7.拦截器

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

//入口文件
import Vue from 'vue'
import axios from 'axios'

axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers.common['Authorization'] = window.localStorage.getItem("token")
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

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

Vue.js axios