78、通过axios实现数据请求

一、axios的使用

1.1、什么是axios

　　vue.js是没有提供ajax功能的，所以使用vue时，通常使用axios的插件来进行ajax与后端服务器的数据交互

　　　　axios本质上是JavaScript上ajax的封装

1.2、下载地址

　　下载地址：https://unpkg.com/[email protected]/dist/axios.js

　　压缩包下载地址：https://unpkg.com/[email protected]/dist/axios.min.js

　　使用文档：https://www.kancloud.cn/yunye/axios/234845

1.3、axios的增删改查

　　增：post

　　删：delete

　　改：put\patch

　　查：get

　　在created下面建立axios.get，查询网址，使用then获得请求成功的参数，catch获得请求失败的参数

	// 发送get请求
    // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
    // 参数2：可选，请求参数和请求头内容，json对象，要提供给数据接口的参数
	axios.get('服务器的资源地址',{ // http://www.baidu.com
    	params:{
    		参数名:'参数值', // id: 200,
    	},
        headers:{
            选项名:'选项值', // 请求头
        }
    
    }).then(response=>{ // 请求成功以后的回调函数
    		console.log("请求成功");
    		console.log(response.data); // 获取服务端提供的数据
    
    }).catch(error=>{   // 请求失败以后的回调函数
    		console.log("请求失败");
    		console.log(error.response);  // 获取错误信息
    });

	// 发送post请求，参数和使用和axios.get()类似。
    // 参数1: 必填，字符串，请求的数据接口的url地址
    // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
    // 参数3：可选，json对象，请求头信息
    axios.post('服务器的资源地址',{
    	username: 'xiaoming',
    	password: '123456'
    },{
        headers:{
            选项名:"选项值",
        }
    })
    .then(response=>{ // 请求成功以后的回调函数
      console.log(response);
    })
    .catch(error=>{   // 请求失败以后的回调函数
      console.log(error);
    });

1.4、功能书写的差异点

　　1.axios.delete()使用方式和参数与axios.get的相同，都是要求参数1为：URL地址，参数2为：请求参数，以及请求头内容

　　　　｛url，params：｛参数名：参数值，｝，headers：｛选项名：选项值｝｝，可以不写

　　2.axios.put（）以及axios.patch使用方式和参数与axios.post()相同，要求参数1为：URL，参数2为：json对象，即数据值，参数3为：json对象，请求头信息，可不写

　　3.HTTP协议中，不同的请求动作有不同的意义：

　　　　1.get代表：向服务器请求获取数据

　　　　2.post代表：向服务器请求助上传数据

　　　　3.put代表：向服务器请求更新全部数据

　　　　4.patch代表：向服务器请求更新部分数据

　　　　5.delete代表：向服务器去请求删除数据

二、原生js的json数据转换