本文是我在学习过程中记录学习的点点滴滴，目的是为了学完之后巩固一下顺便也和大家分享一下，日后忘记了也可以方便快速的复习。

使用 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;
结果：在这里插入图片描述

# http # javascript # 前端
Logo
华为开发者空间

华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。

更多推荐

cover

优化大宽表查询性能，揭秘GaussDB(DWS) 谓词列analyze

avatar 华为开发者空间
cover

数据库高安全—openGauss安全整体架构&安全认证

avatar 华为开发者空间
cover

混合云网络过于复杂？ENS给你全局一张网的极致体验

avatar 华为开发者空间