十五、与服务端通信——axios(1)
● 安装● 基本用法● axios API● 请求配置● 并发请求
本章概要
- 安装
- 基本用法
- axios API
- 请求配置
- 并发请求
在实际项目中,页面中所需要的数据通常是从服务端获取的,这必然牵涉与服务端的通信, Vue 官方推荐使用 axios 完成 Ajax 请求。
axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 Node.js 中。
15.1 安装
可以使用 CDN 方式安装 axios 。如下:
<!-- 引用最新版 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
如果采用模块化开发,则使用 npm 安装方式,执行以下命令来安装 axios。
npm install axios --save
或者使用 yarn 安装,执行以下命令:
yarn add axios --save
在 Vue 的脚手架项目中使用,可以将 axios 结合 vue-axios 插件一起使用,该插件只是将 axios 集成到 Vue.js 的轻度封装,本身不能独立使用。可以使用以下命令一起安装 axios 和 vue-axios。
npm install axios vue-axios
安装 vue-axios 插件后,使用形式如下:
import { createApp } from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App)
app.use(VueAxios,axios) //安装插件
app.mount('#app')
之后在组件内就可以通过 this.axios 调用 axios 的方法发送请求。
15.2 基本用法
HTTP 最基本的请求就是 get 请求 和 post 请求。使用 axios 发送 get 请求调用形式如下:
axios.get('/book?id=1').then(function(response){
console.log(response)
}).catch(function (error){
console.log(error)
})
get() 方法就收一个 URL 作为参数,如果有要发送的数据,则以查询字符串的形式附加在 URL 后面。当服务端返回成功响应(状态码是2XX)时调用 then() 方法中的回调,可以在该回调函数中对服务端的响应进行处理;如果出现错误,则会调用 catch() 方法中的回调,可以在该回调函数中对错误信息进行处理,并向用户提示错误。
如果不喜欢 URL 后附加查询参数的写法,可以为 get() 方法传递一个配置对象作为参数,在配置对象中使用 params 字段指定要发送的数据。如下:
axios.get('/book',{
params:{ id:1 }
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
可以使用 ES2017 的 async/await 执行异步请求。如下:
async function getBook(){
try {
const res = await axios.get('/book?id=1');
console.log(res)
}catch(err){
console.log(err)
}
}
post 请求是在请求体中发送数据,因此,axios 的 post() 方法多一个参数,该参数是一个对象,对象的属性就是要发送的数据。如下:
axios.post('/login',{
username:'lisi',
password:'1234'
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
})
get() 和 post() 方法的原型如下:
get(url[,config])
post(url[,data[,config]])
接收到服务端的响应信息后,需要对响应信息进行处理。例如,设置用于组件渲染或更新所需要的数据。回调函数中的 response 是一个对象,该对象常用的属性是 data 和 status ,前者用于获取服务端返回的响应数据,后者是服务端发送的 HTTP 状态代码。response 对象的完整属性如下:
{
// data 是服务器返回的响应数据
data:{},
// status 是 服务器响应的 HTTP 状态码
status:200,
// statusText 是服务器响应的 HTTP 状态描述
statusText:'OK',
// headers 是服务器响应的消息报头
// 所有报头的名字都是小写的,可以使用方括号来访问
// 例如:response.headers['content-type']
headers:{},
// config 是为请求提供的配置信息
config:{},
// request 是生成此响应的请求
request:{}
}
成功响应后,获取数据的一般处理形式如下:
axios.get('/book?id=1').then(function(res){
if(res.status === 200){
this.book = res.data;
}
}).catch(function(err){
console.log(err)
})
如果出现错误,则会调用 catch() 方法中的回调,并向该回调函数传递一个错误对象。错误处理的一般形式如下:
axios.get('/book?id=1').catch(function(err){
if(err.res){
// 请求已发送并接收到服务端响应,但响应的状态码不是 2XX
console.log(err.res.data);
console.log(err.res.status);
console.log(err.res.headers);
}else if(err.req){
// 请求已发送,但未接收到响应
console.log(err.req)
}else{
// 在设置请求是出现问题而引发错误
console.log('Error',err.message)
}
console.log(err.config)
})
15.3 axios API
可以通过想 axios 传递相关配置来创建请求。axios 原型如下:
axios(config)
axios(url[,config])
get 请求和 post 请求的调用形式如下:
// 发送 get 请求(默认的方法)
axios('/book?id=1')
// get 请求,获取远端的图片
axios({
method:'get',
url:'/image/logo.png',
responseType:'stream'
}).then(function(res){
res.data.pipe(fs.createWriteStream('logo.png'))
})
// 发送 post 请求
axios({
method:'post',
url:'/login',
data:{
username:'lisi',
password:'1234'
}
})
为了方便使用,axios 库为所有支持的请求方法提供了别名。如下:
- axios.request(config)
- axios.get(url[,config])
- axios.delete(url[,config])
- axios.head(url[,config])
- axios.options(rul[,config])
- axios.post(url[,config])
- axios.put(url[,data[,config]])
- axios.patch(url[,data[,config]])
在使用别名方法时,url、method 和 data 这些属性都不必在配置对象中指定。
15.4 请求配置
axios 库为请求提供了配置对象,在该对象中可以设置很多选项,常用的是 url、method、headers 和 params。完整的选项如下:
{
// url 是用于请求的服务器 URL
url:'/book',
// method 是发起请求时使用的请求方法
method:'get', // 默认的
// baseURL 将自动加载 url 前面,除非 url 是一个绝对 URL
// 为 axios 实例设置一个 baseURL,就可以将相对 URL 传递给该实例方法
baseURL:'https://some-domain.com/api/',
// transformRequest 允许在将请求数据发送到服务器前对其进行修改
// 只能用于 put、post、patch 和 delete 这几个请求方法
// 数组中的最后一个函数必须返回一个字符串、Buffer 的实例、ArrayBuffer、FromData 或 Stream
// 也可以修改 headers 对象
transformRequest:[function(data,headers){
// 对 data 进行任意转换处理
return data;
}],
// transformResponse 允许在将响应数据传递给 then/catch 之前对其进行更改
transformResponse:[function(data){
// 对 data 进行任意转换处理
return data;
}],
// headers 是要发送的自定义请求头
headers:{'X-Request-With':'XMLHttpRequest'},
// params 是与请求一起发送的 URL 参数
// 必须是一个普通对象(plain object)或 URLSearchParams 对象
params:{
ID:1
},
// paramsSerializer 是一个负责 params 序列化的可选函数
// (e.g. https://www.npmjs.com/package/qs,http://api.jquery.com/jquery.param)
paramsSerializer : function(params){
return Qs.stringify(params,{arrayFormat:'brackets'})
},
// data 是作为请求体被发送的数据
// 只适用于请求方法 put 、post、delete、patch
// 在没有设置 transformRequest 时,必须是以下类型之一
// -string、plain object、ArrayBuffer、ArrayBufferView、URLSearchParams
// -浏览器专属:FromData、File、Blob
// -Node 专属:Stream、Buffer
data:{
firstName:'Fred'
},
// 将数据发送到请求体的替代语法
// 只适用于 Post 方法
// 只发送值,而不发送键
data:'Country=Brasil&City=Belo Horizonte',
// timeout 指定请求超时的毫秒数,默认是 0 ,表示无超时时间
// 如果请求耗时超过了 timeout,则请求被终止
timeout:1000,
// withCredentials 表示跨域请求时是否需要使用凭证
withCredentials:false, //默认的
//adapter 允许自定义处理请求,以使测试更加容易
// 返回一个 promise 并提供一个有效的响应
adapter:function(config){
// ...
},
// auth 表示应该使用 HTTP 基础验证,并提供凭证
// 这将设置一个 Authorization 报头,覆盖使用 headers 设置的现有的 Authorization 自定义报头
auth:{
username:'zhangsan',
password:'123'
},
// responseType 表示服务器响应的数据类型
// 可以是'arraybuffer'、'document'、'json'、'text'、'stream'
// 浏览器专属:blob
responseType:'json', //默认的
// responseEncoding 表示用于解码响应数据的编码
// 注意:对于 stream 响应类型,将被忽略
responseEncoding:'utf8', //默认的
// xsrfCookieName 是用作 xsrf token 值的 cookie 的名称
xsrfCookieName:'XSRF-TOKEN', //默认的
// onUploadProgress 允许为上传处理进度事件
// 浏览器专属
onUploadProgress:function(progressEvent){
// 对原生进度事件的处理
},
// onDownloadProgress 允许为下载处理进度事件
// 浏览器专属
onUploadProgress:function(progressEvent){
// 对原生进度事件的处理
},
// maxContentLength 定义 Node.js 中允许的响应内容的最大大小(以字节为单位)
maxContentLength:2000,
// maxBodyLength (只适用于 Node 的选项)定义允许的 HTTP 请求内容的最大大小(以字节为单位)
maxBodyLength:2000,
// validateStatus 定义对于给定的 HTTP 响应状态码是解析(resolve)还是拒绝(reject)这个
// promise
// 如果 validateStatus 返回 true (或者设置为 null 或 undefined)
// promise 将被解析(resolve),否则,promise 将被拒绝(reject)
validateStatus:function(status){
return status >= 200 && status < 300; //默认的
},
// maxRedirects 定义在 Node.js 中 follow 的最大重定向数目
// 如果设置为 0 ,那么将不会 follow 任何重定向
maxRedirects:5, //默认的
// socketPath 定义要在 Node.js 中使用的 UNIX 套接字
// 例如:'/var/run/docker.sock' 向docker 守护进程发送请求
// 只能指定 socketPath 或 proxy ,如果两者都指定,则使用 socketPath
socketPath:null, //默认的
// httpAgent 和 httpsAgent 用于定义在 Node.js 中执行 HTTP 和 HTTPS 时要使用的自定义代理
// 允许配置类似 keepAlive 的选项,keepAlive 默认没有启用
httpAgent:new http.Agent({keepAlive:true}),
httpsAgent:new https.Agent({keepAlive:true}),
// proxy 定义代理服务器的主机名和端口
// auth 表示 HTTP 基础验证应当用于连接代理,并提供凭证
// 这将会设置一个 Proxy-Authorization 报头
// 覆盖使用 headers 设置的任何现有的自定义 Proxy-Authorization 报头
proxy:{
host:'127.0.0.1',
port:9000,
auth:{
username:'aa',
password:'bb'
}
},
// cancelToken 指定用于取消请求的 cancel token
cancelToken:new CancelToken(function(cancel){
// ...
})
// decompress 表示是否应该自动解压响应正文
// 如果设置为 true ,则还将从所有解压缩响应的 responses 对象中删除 content-encoding 报头
// - Node 专属(浏览器的 XMLHttpRequest 无法关闭解压缩)
decompress:true //默认的
}
15.5 并发请求
有时需要向服务器发起多个请求,这可以用 Promise.all 实现。
例如:
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions(){
return axios.get('/user/12345/permissioins');
}
Promise.all([getUserAccount(),getUserPermissions()]).then(function (results)){
// 两个请求现在都执行完成
const acct = results[0];
const perm = results[1];
// acct 是 getUserAccount() 方法请求的响应结果
// perm 是 getUserPermissions() 方法请求的响应结果
}
更多推荐
所有评论(0)