本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。
使用 axios 发送 http 请求实战
前言
今天学习的主要是关于利用 axios 发送 ajax 请求常见的各种方式方法和axios 发送跨域请求的处理方法知识的理解和应用。
一、axios 简介与安装及 promise 对象
1.1、axios 介绍
vue 本身不支持发送 ajax 请求，需要使用第三方插件，v1.0 推荐使用 vue-resource，但是 vue2.0 官方推荐使用 axios，并且不再对 vue-resource 进行维护。axios 就是要用来发送 ajax 请求的小插件，axios 是对 ajax 的封装，它是基于 promise 的 HTTP 库。它会从浏览器中创建XMLHttpRequest。
参考：在 github 上搜索 axios（https://github.com/axios），
查看相关 API 文档
1.2、认识 Promise 对象
所谓 promise，简单说是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果，也即是 promise 对象代表一个异步操作，有三种状态，pending（进行中）、fulfilled（已成功）、rejected（已失败）。通过 Promise 对象的 then 方法可以接受异步操作成功的回调函数，通过 catch 方法捕获异常，可以接受异步操作失败的回调函数。
resolve：在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
reject：在异步操作失败时调用，并将异步操作报出的错误，作为参 数传递出去；
Login（）
{
return new Promise(function(resolve,reject){
//doSomething;
//执行成功后执行的回调函数
resolve(val); //执行成功的回调，即是主调方调用成功把val 传给主调方
}).catch(err=>{
reject(err) //执行失败的回调，即是主调方调用失败把 err传给主调方
});
}
X.Login（） .then( val => { //promise 成功执行后执行
console.log(val） // ’success'
}, err => { //没出现错误则不会被执行
console.log(err)
})
1.3、安装 axios 并引入
打开 cmd 窗口，输入:
npm/cnpm install axios –S
下载后打开下载的位置，如下:
当 然 也 可 以 直 接 到 https://github.com/axios 下 载
axios.min.js 文件，最后把对应 axios.min.js 或 axios.js 文件拷贝到项目下。
二、使用 axios 发送 ajax 请求详解
2.1、ajax 请求与 http 请求区别
1、都是客户端向服务器发送请求的一种方式。
2、AJAX 通过 xmlHttpRequest 对象请求服务器，局部刷新页面。通常说是异步请求，不会阻塞其他代码执行。
3、普通 http 请求通过 httpRequest 对象请求服务器，更新数据时需要刷新整个页面
2.2、axios 基本语法
1、axios（[options]）既可以发送 get 请求也可以发 post
请求
2、axios.get(url[,options])，url 表示向谁发送请求
3、axos.post(url[，data[，options]]) ，url 表示向谁发送请
求。
当然除了常用的 get、post，还有 put（更新）、delete（删除）
2.3、使用 axios 发送 ajax 请求示
示例：单击按钮【发送 ajax 请求】请求本地数据
一般发出请求是去获取数据，而且数据一般是 json 格式，所以现在假设在项目下有一个 user.json 格式数据文件。假设数据如下:
<script>
var vm = new Vue({
el: "#app", data: {
}, methods: {
send: function () {
axios({
method: 'get', //请求方式类型 get/post
url: 'user.json',//user.json 与当前文件在同一路径下，如果 user.json 不存在则返回‘请求失败’。向后台谁发出请求，请求数据
responseType: 'json'//此句不能少，否则火狐下会报 xml 解析错误 格式不佳 错误。指明后台返回的数据类型
})//上述之后会返回一个 Promise 对象，然后调用该对象的 then 方法,也就是执行成功的回调方法
.then(function (resp) {
//resp 表示调用 axios 执行成功的 结果
console.log(resp);
console.log(resp.data)
}).catch(err => {
//表示请求失败调用的函数，err 表示调用 axios 执行失败的结果
console.log('请求失败');
})
}
}
})
</script>
结果：
说明：
当然上面是请求成功结果。这里的 then 方法就相当于在 Jquery 中使用 ajax 时的 success 回调方法，而 catch 方法则是 error 回调。
要请求失败，比如改下请求的 url，使之不存在。
若如果上面的代码 responseType: 'json’没有，则火狐浏览器下会报如下错误。原因：
因为 ajax 请求指定了数据类型是 json，后台返回数据如果不指定内容类型默认就是 html 类型，这样返回到前端就会自动调用 html的解析器对文件进行解析，因此报这个异常。（在 Chrome 浏览器没有这个错误）
2.4、通过 axios.get 发送 ajax 请求
这里来实现下简单的前后端的数据交互，这里先用.NET 里的一般处理程序作为后端处理程序，你可以根据自己的喜好进行选择。
下面直接创建一个空的 web 项目（.NET Framewrok），里面创建一个一般处理程序 vuehandler.ashx 作为后端处理程序。然后在该项目下新建 html 文件 1102.html 和 js 文件夹，并复制 vue.js 和axios.js 到 js 文件夹下【直接在该项目下去启动运行，避免发生跨域请求】。
前端代码：
<div id="app">
<button @click="sendGet">调用 Get 方法发送 ajax 请求
</button>
</div>
<script>
var vm = new Vue({
el: "#app", data: {
},
methods:{
sendGet() {
// get 方法传参的方式有 2 种:第 1 种直接把参数放在 url后面
// 向 vuehandeler.ashx 发出 get 请求，并传递参数 name 和 age 过去
axios.get('vueHandler.ashx?name=zs&age=23')
.then(resp => {
console.log(resp.data)
})
.catch(err => {
console.log("请求失败")
})
}
}
})
</script>
后端 vuehandler.ashx 接受前端传递过来的参数，所以主要代码如下：
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string name = context.Request["name"];
string age = context.Request["age"];
context.Response.Write("姓名：" + name + "年龄：" + age);
}
结果：
第 2 种传参方式：通过 params 选项传参，即把上面绿色底纹代码改为如下：
axios.get(‘vueHandler.ashx’, {
params: {
name: “zs”, age: 23
}
})
运行结果一样。
2.5、通过 axios.post 发送 ajax 请求
post 请求第一个参数为要请求处理的服务端程序，第二个参数为数据，第三个参数为选项，没有可以不写。
基本语法：
axos.post(url[，data[，config]])
在上面那个项目 axiosAjax 下面新建一个 html 文件
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
</head>
<body>
<div id="app">
<button @click="sendPost">调用post方法发送ajax请求</button>
</div>
<script>
var param=new URLSearchParams()
param.append('name','李四')
param.append('age',30)
var vm=new Vue({
el:"#app",
data:{
user: {
name: '张三1',
age:231
}
},
methods:{
sendPost(){
axios.post('vuehandler.ashx',param)
.then(resp=>{
console.log(resp.data)
}).catch(err=>{
console.log('请求失败')
})
}
}
})
</script>
传递参数的方式有很多种：
1、axios.post(‘vueHandler.ashx’,‘name=zs&age=23’)
2、在 vm 实例的 data 中增加以下代码：
data: {user: {
name: ‘张三’, age:23
}},
则上面 axios.post 所在行代码改为如下：
axios.post(‘vueHandler.ashx’,‘name=’+this.user.name+‘&age =’+this.user.age)
3、 用 URLSearchParams 传递参数【推荐】
<script>
var param = new URLSearchParams()
param.append(‘name’, ‘李四’)
param.append(‘age’, 30)
var vm = new Vue({
el: “#app”, data: {
user: {
name: ‘张三’, age: 23
}
},methods: {
sendPost() {
axios.post(‘vueHandler.ashx’, param)
.then(resp => {
console.log(resp.data)
})
.catch(err => {
console.log(“请求失败”)
})
}
}
})
</script>
三、跨域请求——本身已允许跨域访问的接口
3.1、什么是跨域
如果两个 URL 的协议、域名、端口相同，那么这两个 URL 就是同源。不是同源的就是跨域的，也就是说凡是发送请求 URL 的协议、域名、端口三者中任意一个与当前页面的 URL 不同即为跨域。
如果没有任何设置，存在跨域访问会报类似如下错误。
axios 本身并不支持发送跨域请求，所以只能使用第三方库，比如使用 jquery、vue-resource。但是如果你要访问的 url 本身已允许跨域访问就可以直接访问了。
3.2、实例演示(跨域请求个人 github 账户姓名)
如：github 服务器本身就是允许跨域访问的。比如：查看 github个人账户信息的服务接口地址：https://api.github.com/users/账户id
是获取信息自然使用 axios.get，使用方法与上面基本相同，就是请求的 url 变了。
<body>
<div id="app">
请输入GitHub ID:<input type="text" v-model="uid</input>
<button @click="getUserByUid(uid)">获取指定 GitHub 账户信息</button>
</div>
<script>
var vm = new Vue({
el: "#app", data: {
user: {
}, uid: ''
}, methods: {
getUserByUid(uid) {
// 这里到 GitHub 上找，不在同一个域，所以就是跨域. //注意下面注释的写法两端不是单引号哦，如果用单引号写法不一样哦
// axios.get(`https://api.github.com/users/${uid}`)
//这种写法用的是单引号
axios.get('https://api.github.com/users/' + uid)
.then(resp => {
console.log(resp.data);
})
.catch(err => {
console.log('请求失败');
})
}
}
})
</script>
</body>
结果：
下面改进下要显示出姓名及头像。
（1）在 dom 下面增加以下代码
<br>
姓名：{ {user.name}}<br>
头像：<img :src=‘user.avatar_url’ alt=“” />
（2）把上面.then里面的代码 console.log(resp.data);改为
this.user=resp.data;
结果：
