学校网站建设状况,沙市做网站weisword,有了网站怎么做app吗,网架公司有哪些目录 前言一#xff0c;服务器的搭建二#xff0c;Axios的基本使用2.1 Axios的介绍及页面配置2.2 如何安装2.3 Axios的前台代码2.4 Axios的基本使用2.5 axios请求响应结果的结构2.6 带参数的axios请求2.7 axios修改默认配置 三#xff0c;axios拦截器3.1 什么是拦截器3.2 拦… 目录 前言一服务器的搭建二Axios的基本使用2.1 Axios的介绍及页面配置2.2 如何安装2.3 Axios的前台代码2.4 Axios的基本使用2.5 axios请求响应结果的结构2.6 带参数的axios请求2.7 axios修改默认配置 三axios拦截器3.1 什么是拦截器3.2 拦截器的写法3.3 直接返回data 四优雅写法之async与await五对response的解构赋值六后记 前言
Axios是前端最流行的交互工具。所以本节内容将对Axios进行详细讲解。
本节内容需要由Ajax的基础及Promise的基础。这两篇文章可以参考 前端后端交互系列之原生Ajax的使用 前后端交互系列之promise详解 如果想快速了解axios也可以查看本篇文章的深度是更高的 浅析axios原理与使用包括axios的优雅写法与res的解构赋值
一服务器的搭建
我们用nodejs中的express框架来搭建一个服务器。如果想深度学习可以去了解nodejs。本节内容只需要懂得nodejs的基本用法即可。
首先第一步创建一个写nodejs的文件并打开该文件的终端 在终端下载nodejs的包express下载完毕后左边会出现npm包管理文件
npm i express最后书写代码代码的含义可以不明白后面套用即可
const express require(express)const app new express();app.listen(8000, () {console.log(服务器在8000端口运行地址127.0.0.1)
})上面这段代码的意思是引用express包express包是通过nodejs的http模块封装的。通过express我们可以在自己的电脑上以自己的电脑创建一台服务器。
在终端运行上述代码服务器创建成功。 后面我们还需要在代码中加上接口现在以一个get接口为例子后面都是这样的形式
//引入express
const express require(express)
//创建express的实例对象app
const app new express();//接口部分设置路由规则
app.get(/server, (request, response) {//在后台解决跨域问题response.setHeader(Access-Control-Allow-Origin, *);//返回值response.send(hello axios)
})
//监听app实例对象开启服务器
app.listen(8000, () {console.log(服务器在8000端口运行地址127.0.0.1)
})在修改代码后重新启用代码。接着我们可以用软件postman发起测试测试接口接口测试成功 以上就是服务器的搭建过程后面我们可以用类似方式写接口用接口。主要是nodejs的一些知识。如果不会可以去了解下或者直接套用。
后面都会给出后台代码直接套用即可当成普通后台接口去用影响不大。
二Axios的基本使用
上面的内容讲解了后台的代码书写及运行。接下来正式进入正题——Axios。
2.1 Axios的介绍及页面配置
Axios是用于前后端交互的一种工具。
其特点发送Ajax请求、在nodejs中发送http请求、支持promise的相关操作、自动将结果转化为JSON数据、保护数据安全等等。
下面就开始正式学习。
2.2 如何安装
npm引入、CDN、或者文件引入。
项目中往往使用npm引入。学习阶段使用CDN引入。
script srchttps://unpkg.com/axios/dist/axios.min.js/script2.3 Axios的前台代码
本节内容主要讲述如何用Axios去发送请求发送get请求、post请求、put请求以及delete请求。
这是我们的页面结构 前台代码部分
bodyh2axios的基本使用/h2button classbtn1get/buttonbutton classbtn2post/buttonbutton classbtn3put/buttonbutton classbtn4delete/buttonscriptvar btn1 document.querySelector(.btn1)var btn2 document.querySelector(.btn2)var btn3 document.querySelector(.btn3)var btn4 document.querySelector(.btn4)/script
/body2.4 Axios的基本使用
首先要明确的是请求是由前端发出的。所以我们现在在前端发送get请求给刚刚已经写好的接口server 接着在前端发送get请求以下也是请求的基本格式 btn1.addEventListener(click, () {axios({method: GET, url: http://127.0.0.1:8000/server}).then(response {console.log(response)})})在上面这段代码里面method表示的是请求的类型url是请求的地址then回调函数是请求后的反馈。以上是不带参数的请求。
接着是post请求的相关格式先看后台代码
//发起post请求
app.post(/post-server, (request, response) {response.setHeader(Access-Control-Allow-Origin, *);//返回值const data {name: 巧克力小猫猿}response.send(data)
})接着是前台发送请求 btn2.addEventListener(click, () {axios({method: POST,url: http://127.0.0.1:8000/post-server}).then(response {console.log(response)})})put与delete的格式几乎也与上述一样。
2.5 axios请求响应结果的结构
本节来看axios成功后的返回值的结果。
我们这里来调用刚刚讲的get请求的结果
然后来介绍结果内部的内容。
config中记录请求类型、请求ur l等内容 data中放置响应体的内容对象自动JSON解析) headers中放置请求体 request中放置和原生xml相关的一些东西 status中放置响应状态码 statusText放置响应状态字符串。
2.6 带参数的axios请求
上述介绍了axios的基本使用与返回内容。
现在来了解下如何向服务器发送带参数的axios请求。
我们先来看看发送带参数的get请求 axios({// 请求方式method: GET,// 请求地址url: http://www.liulongbin.top:3006/api/getbooks,// url中的查询参数params: {id: 1}}).then(function(res) {console.log(res);})
在以上代码中用到了params参数是查询参数params仅用在发送get请求中。
接着来看看发送post请求 axios({method: POST,url: http://www.liulongbin.top:3006/api/post,data: {name: zs,age: 20}}).then(function(res) {console.log(res);})
这里用到了data将数据发送给服务器。data也是仅仅用于在发送post请求中。
2.7 axios修改默认配置
主要用于对url的缩写。
细心的读者应该发现我们用的url大多都是http://127.0.0.1:8000/xxxx。我们在xxxx上写上对应的信息来访问不同的接口。
所有的url都有http://127.0.0.1:8000这段共同的部分。而本节内容的目的是简化url所以我们可以把公共部分提取出来需要时直接使用。
请看如下代码 //设置基础urlaxios.defaults.baseURL http://127.0.0.1:8000/btn1.addEventListener(click, () {axios({method: GET, url: /get-server}).then(response {console.log(response)})})上述代码通过axios.defaults.baseURL设置了基本url后续则不需要写入基本url直接加上对应的接口url即可十分方便。
三axios拦截器
3.1 什么是拦截器
拦截器是什么 一些函数分别有请求拦截器和响应拦截器。
请求拦截器顾名思义用作发送请求时请求被拦截经过一定处理后才会发送给服务器
同理响应拦截器的作用在于当我们向服务器发送请求服务器给我们响应过程中被拦截响应经过处理后再发送给客户端。
本节内容快就来探索拦截器的作用与原理
3.2 拦截器的写法
我们给拦截器取名为Interceptors。
我们先来学习响应拦截器——对我们的响应进行处理。
这里就需要用到一个api
axios.interceptors.response.use()这个api目的就是给请求设置响应拦截它的格式很像Promise请看下面代码 //添加响应拦截器axios.interceptors.response.use(function(response) {console.log(响应拦截器成功)return response}, function(error) {console.log(响应拦截器失败)return Promise.reject(error)})//发送请求var btn1 document.querySelector(.btn1)axios.defaults.baseURL http://127.0.0.1:8000/btn1.addEventListener(click, () {axios({method: GET,url: /get-server}).then(response {console.log(response)})})最后结果 请求拦截器与响应拦截器的格式非常类似不同的点在于请求拦截器第一个参数是我们发送的请求config这个在文章前面有交代过config中记录了记录请求类型、请求ur l等内容而响应拦截器中的第一个参数是response。
下面我们来看请求拦截器的相关代码 //添加请求拦截器axios.interceptors.request.use(function(config) {console.log(请求拦截器 成功);return config;}, function(error) {console.log(请求拦截器 失败)return Promise.reject(error)})最后的结果 这里有一个小细节如果有多个拦截器请看下面代码 //添加请求拦截器1axios.interceptors.request.use(function (config) {console.log(请求拦截器1 成功);return config;}, function (error) {console.log(请求拦截器1 失败)return Promise.reject(error)})//添加请求拦截器2axios.interceptors.request.use(function (config) {console.log(请求拦截器2 成功);return config;}, function (error) {console.log(请求拦截器2 失败)return Promise.reject(error)})//添加响应拦截器1axios.interceptors.response.use(function (response) {console.log(响应拦截器成功1)return response}, function (error) {console.log(响应拦截器失败1)return Promise.reject(error)})//添加响应拦截器2axios.interceptors.response.use(function (response) {console.log(响应拦截器成功2)return response}, function (error) {console.log(响应拦截器失败2)return Promise.reject(error)})最后的结果 响应拦截器是按顺序来的但是请求拦截器是先使用最新的然后再往后使用。
3.3 直接返回data
大家请看客户端向服务器发起请求服务器给予响应最后响应给客户端的是一个很长的对象 在这个对象中有的时候真正有用的仅仅是我们的data。
但是这里的data并不是包含状态码状态以及一系列东西的data而是data里面的这个data因此我们可以通过拦截器来截取这个data。这就需要用到我们的响应拦截器了 那么最后的效果 同时我们也可以做些判断。后面可以根据需求来进行处理。
四优雅写法之async与await
在promise的文章中讲过async与await这里就再次对其进行简单介绍。
promise用来处理异步任务而axios发送请求就是很典型的异步任务。await可以理解成一种表达式的类型而async后面接的是一个函数。这两个是专门用来组合然后写异步任务的。并且在组合使用的时候await后面接的是一个异步函数async函数返回的是一个promise对象。
这里我们来把axios用async与await进行封装并使用。
先看一下封装前的代码
bodybutton classbtn发起get请求/buttonscript//设置baseurlaxios.defaults.baseURL http://127.0.0.1:8000 //绑定按钮var btn document.querySelector(.btn);//点击发起axios请求btn.addEventListener(click, () {axios({methods: GET,url: /get-server,}).then((response) {console.log(response.data)})})/script
/body现在我们用async与await对上面的axios进行封装 script//封装axios函数var getserver async function () {//设置baseurlaxios.defaults.baseURL http://127.0.0.1:8000const result await axios({methods: GET,url: /get-server,})console.log(result)return result;}//绑定按钮var btn document.querySelector(.btn);//点击发起axios请求btn.addEventListener(click, () {getserver()})/script效果
五对response的解构赋值
刚刚已经了解可以用拦截器处理axios的响应值。还有一种方式可以让获得的值是data那就是解构赋值。
下面代码是发送一个请求并对结果解构赋值 var getserver async function () {//设置baseurlaxios.defaults.baseURL http://127.0.0.1:8000const {data: result} await axios({methods: GET,url: /get-server,})console.log(result)return result;}上面这段代码加的内容{data: result}的作用是把data从result中解析出来拿出来。所以最后的结果
六后记
本篇文章讲述了axios的相关内容。
本系列文章还涉及到ajaxpromise以及跨域问题。欢迎关注
