失眠网 > 使用 axios 发送 http 请求

使用 axios 发送 http 请求

时间：2018-11-27 01:42:26

相关推荐

使用 axios 发送 http 请求

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

使用 axios 发送 http 请求实战

前言一、axios 简介与安装及 promise 对象1.1、axios 介绍1.2、认识 Promise 对象1.3、安装 axios 并引入二、使用 axios 发送 ajax 请求详解2.1、ajax 请求与 http 请求区别2.2、axios 基本语法2.3、使用 axios 发送 ajax 请求示2.4、通过 axios.get 发送 ajax 请求2.5、通过 axios.post 发送 ajax 请求三、跨域请求——本身已允许跨域访问的接口3.1、什么是跨域3.2、实例演示(跨域请求个人 github 账户姓名)

前言

今天学习的主要是关于利用 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（/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
下载后打开下载的位置，如下:
当然也可以直接到 /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 格式数据文件。假设数据如下:

结果：

说明：
当然上面是请求成功结果。这里的 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个人账户信息的服务接口地址：/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(`/users/${uid}`)//这种写法用的是单引号axios.get('/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;
结果：

如果觉得《使用 axios 发送 http 请求》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。