笔记：Vue中使用axios

1.axios介绍：

axios是一个基于Promise用于浏览器和node.js的HTTP客户端。

向axios传递相关配置来创建请求：

axios({
    methods:'...',   //若没有指定，默认为GET方法

    url:'...',       //请求的服务器url

    data{
        ......,      //请求主体被发送的数据
        ......,
    }

    baseURL:'...',   //自动加到url前面，除非url是一个绝对URL

    param:{
        参数名:数据,
        ......,      //即将与请求一起发送的URL参数
    }

    timeout:...,     //请求超过时间请求将被中断

    transformRequest:[function(data){
        //对data进行转换处理
        return data;   //允许在向服务器发送前，修改请求，只能用PUT,POST,PATCH请求方法请求数据
    }],

    transformResponse:[function(data){
        //对data进行转换处理
        return data;   //在传递给then,catch前，允许修改响应数据
    }],

    //还有很多，不止以上这些相关配置
})

某个请求的响应包括以下信息：

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

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

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

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

    //为请求提供的配置信息
    config:{}
}
//以上为请求的响应结构

接收响应则在then中：

axios.get("地址")
.then(function(response){
    console.log(response.data);
    console.log(response.status);
    console.log(response.statusText);
    console.log(response.headers);
    console.log(response.config);
}.catch(function(err){...});

2.axios+Vue（从本地应用变成了网络应用，一部分数据源从网络上获取）

基本语法（这里只写出了get和post方法）:

axios.get(地址?查询字符串).then(function(response){},function(err){})
//地址？查询字符串这里可以写成地址?key=value&key2=value2

axios.post(地址,参数对象).then(function(response){},function(err){})
//地址,参数对象这里可以写成地址,{key:value,key2:value2}

//也可以写成下面这样子
axios.请求方法名("...").then(function(response){
        //代码
        }).catch(function(err){...});

官网提供的axios在线地址：https://unpkg.com/axios/dist/axios.min.js

也可以在项目中通过<script>标签进行引入。

也可以通过以下命令下载进行引用：

$ npm install axios

 若需要在vue中使用axios，则在vue实例中的方法选项中添加函数：

methods:{
    函数名:function(){
        axios.get("...").then(...)
    }
}

ps：回调函数中使用this关键字取得该组件初始化的形参时，一定要用  var 变量名=this   取值，不然取得的值并不是该组件中初始化的形参，而是在回调函数中所定义的值。

也可以使用箭头函数来代替普通函数。https://blog.csdn.net/xifengxiaoma/article/details/92839226?spm=1001.2101.3001.6650.13&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-13.highlightwordscore&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-13.highlightwordscore 

相关链接点击进行查询： 

若想深入了解axios可以点击下面链接进行查看：axios基本用法_汉堡请不要欺负面条-CSDN博客_axios

若想了解axios和ajax的区别则点击下面链接进行查看：

细谈 axios和ajax区别_小白的博客-CSDN博客_axios和ajax区别

学习vue axios的封装使用可以点击下面链接进行学习：

https://blog.csdn.net/weixin_38639882/article/details/88636294?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH%7Edefault-1.no_search_link

基础入门建议直接查看axios中文文档：

使用说明 · Axios 中文说明 · 看云

 axios安装使用：

axios安装使用_languai的博客-CSDN博客_axios安装