在实际项目中，也没中所需要的数据通常是从服务端获取的，这必然牵涉与服务端的通信，Vue官方推荐使用axios完成Ajax请求。
axios是一个基于Promise的HTTP库，可以用在浏览器和Node.js中。
1：安装
1.1:可以使用CDN方式安装axios。代码如下所示：
<script src="https://unpkg.com/axios/dist/axios.min.js></scri>
1.2:如果使用模块化开发，则使用npm安装方式，执行一下命令来安装axios。
npm install axios --save
或者使用yarn安装，执行一下命令。
yarn add axios --save
1.3:在Vue的脚手架项目中使用，可以将axios结合vue-axios插件一起使用，该插件只是将axios集成到Vue.js的轻度封装，本身不能独立使用。可以使用以下命令一起安装axios和vue-axios。
npm install axios vue-axios
安装vue-axios插件后，使用形式如下：
import{creareApp} 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的方法发送请求。
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后附加查询参数的写法，可以为()方法传递一个配置对象作为参数，在配置对象中使用params字段指定要发送的数据。代码如下：
axios.get('/book',{
params:{
id:1
}
.then(function (response){
console.log(response);
})
.catch(function (error){
consloe.log(error);
});
可以使用ES2017的async/await执行异步请求，代码如下所示：
async function getBook() {
try{
const response = await axios.get('/book?id=1');
console.log(response);
}catch(error){
console.error(error);
}
post请求是在请求题中发送数据，因此，axios的post方法比get()方法多一个参数，该参数是一个对象，对象的属性就是要发送的数据，代码如下所示：
axios.post('/login',{
username:'lisi';
password:'1234';
})
.then(function (response){
console.log(response);
})
.catch(function (error)){
console.log(error);
}
get()和post()方法的原型如下：
get(url[,config])
post(url[,data[,config]])
关于config对象，请参看4点请求配置 接收到服务端的响应信息后，需要对响应信息进行处理。例如，设置用于组件渲染或更新所需要的数据。回调函数中的resposnse是一个对象，该对象常用的属性是data和status,前者用于获取服务端发回的响应数据，后者是服务端发送HTTP状态代码。response对象的完整属性如下所示：
{
//datas是服务器发出的响应数据
data:{},
//status是服务器响应的HTTP状态码
status:200,
//statusText是服务器响应的HTTP状态描述
statusText：'ok',
//header是服务器响应的消息报头
//所有报头的名字都是小写的，可以使用方括号来访问
//例如：response.header['content-type']
headers:{},
//config 是为提供的配置信息
config:{},
//request是生成此响应的请求
resquest:{}
}
成功响应后，获取数据的一般处理形式如下:
axios.get('/book?id=1')
.then(function (response)){
if（response.status === 200）{
this.book = response.data;
}
})
.catch(function(error) {
console.log(error);
});
如果出现错误，则会调用catch()方法中的回调，并向该回调函数传递一个错误对象。错误处理的一般形式如下：
axios.get('/book?id=1)
.catch(function (error) {
if(error.response) {
//请求已发送并接收到服务端响应，但响应的状态码不是2xx
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request){
//请求已发送，但未接收到响应
console.log(error.request);
}else{
//在设置请求时出现问题而引发的错误
console.log('Error',error.message);
}
console.log(error.config);
});
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 (response) {
response.data.pipe(fs.createWriteStream('logo.png'))
});
//发送post请求
axios({
method：'post',
url:'/login',
data:{
username:'lisi',
password:'1234'
}
});
为了方便使用,axios库为所有支持的请求提供了别名。代码如下所示 1: axios.resquest(config) 2: axios.get(url[,config]) 3: axios.dalete(url[,config]) 4: axios.head(url[,config]) 5: axios.options(url[,config]) 6: axios.post(url[,data[,config]]) 7: axios.put(url[,data[,config]]) 8: axios.patch(url[,data[,config]])
在使用别名方法时，url、method和data这些属性都不必配置对象中指定。
4:请求配置
axios库为请求提供了配置对象，在该对象中很多选项，常用的是url、method、header和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、formData或Stream
//也可以修改headers对象
transformRequest:[function (data,headers){
//对data进行任意转换处理
return data;
}],
//transformResponse允许在将响应数据传递给then/catch之前对其进行更改
transformResponse: [function {data}{
//对data进行任意转换处理
return data;
}]
//headers是要发送的自定义请求头
headers:{'X-Resquested-With':'XMLHttpRequest'},
//params是与请求一起发送的URL参数
//必须是一个普通对象(plain object) 或URLSearchParams对象
params:{
ID：1
}，
//paramsSerializer 是一个负责params序列化的可选函数
//（e.g, https:www.npms.com/package/qs,https://api.jquery.com/jquery.param/）
paramSerializer: function(params) {
return Qs.stringify(params.{arrayFormat:'brackets'})
},
//data是作为请求体被发送的数据
//只使用与请求方法put、post、delete和patch
//在没有设置tranformRquest时，必须是一下类型质疑
//- string、plain、object、ArrayBuffer、ArrayBufferView、URLSearchParams
//- 浏览器专属： FormData、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: 'janedoe',
password: 's00pers3cret'
},
//responseType 表示服务器响应的数据类型
//可以是'arrayBuffer'、'document'、'json'、'text'和'stream'
//浏览器专属：blob
responsType:'json',//默认的
//responseEncoding 表示用于解码响应数据的编码
//注意：对于stream响应类型，将忽略
responseEncoding:'utf8',//默认的
//xsrfCookieName是携带xsrf token值的cookie的名称
xsrfCookieName:'XSRF-TOKEN',//默认的
// xsrfHeaderName是携带 xsrf token 值的HTTP报头的名字
XsrfHeaderName: 'X-XSRF-TOKEN',//默认的
//onUploadProgress 允许为上传处理进度事件
//浏览器专属
onUploadProgress:function (progressEvent){
//对原生进度事件的处理
}
//onDownloadProgresss 允许为下载处理进度事件
//浏览器专属
onDownLoadProgress: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 && stastus < 300；//默认的
},
//maxRedirects 定义Node.js 中follow的最大定向数目
//如果设置为0,那么蒋不会follow任何重定向
maxRedirects:5,//默认的
//scoketPath 定义要在Node.js中使用的UNTX套接字
//例如：'/var/run/docker.sock'向docker守护进行发送请求
//只能指定socketPath或proxy，如果两者都指定，则使用socketPath
scoketAgent和hrrpsAgent用于定义Node.js中执行HTTP和HTTPS时要使用的自定义代理
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',
post:9000,
auth:{
username:'mikeymike'；
password:'rapunz31'
}
},
//cancelToken指定用于取消请求的 cancel token
cancelToken: new CancelToken (function (cancel)){
})
//decompress表示是否应该自动解压缩响应正文
//如果设置为true,则还将从所有解压缩响应的responses对象中删除content-encoding报头
//- Node 专属（浏览器的XMLHttpRequest无法关闭解压缩）
decompress:true //默认的
}
5：并发请求
有时需要同时想服务端发起多个请求，这可以用Promise.all实现。 例如：
function getUserAccount(){
return axios.get('/user/12345');
}
function getUserPermissions() {
return axios.get('/user/12345/permissions');
}
Peomise.all ([getuserAccount(), getUserPermissions()])
.then(function (results) {
//两个请求在都执行完成
const acct = resulets[0];
const perm = resulet[1];
//acct是getUserAccount() 方法请求的响应结果
//perms是getUserPermissions()方法请求的响应结果
});
6:创建实例
可以使用自定义配置调用axios.create([config])方法创建一个axios实例，之后使用该实例向服务端发起请求，就不用每次请求时重复设置配置选项了。代码如下所示
const instance = axios.create({
baseURL：'https://some-domain.com/api/'
timeout:1000,
headers:{'X-Custom-Header':'footbar'}
});
7:配置默认值 对于每次请求相同的配置选项，可以通过为配置选项设置默认值来简化代码的编写。项目中使用的全局axios默认值可以在项目的入口文件main.js中按照一下形式进行设置。
axios.defaults.baseURL= 'https://api.example.com;
axios.defaulets.headers.commom['Authorization']=AUTH_TOKEN;
axios.defaulets.header.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaulets.withCredentials = true
也可以在定义实例中设置配置默认值，这些配置选项只有在使用该实例发起请求时才生效。代码如下所示: //穿件实例时设置配置默认值
const instance = axios.create({
baseURL:'https://api/example.com'
});
//实例创建后更改默认值 instance.defaults.headers.commom['Authorization'] = AUTH_TOKEN; 配置将优先顺序进行合并。顺序是先在lib/defaults.js中找到的库的默认值，然后是实例的defaults属性，最后是请求的config参数。后者将优先于前者。代码如下所示：
// 使用由库提供的配置默认值来创建实例
//此时超时配置的默认值是0
var instance = axios.create();
//复写库的超时默认值
//先在。在超时前，使用实例发起的所有请求都会等待2.5s
instance.defaults.timeout = 2500;
//在发起请求时，复写超时值
instance.get('/longRequest',{
timeout:5000
});
8：拦截器
有时需要同意处理HTTP的请求，如需要登录验证，这是就可以使用axios的拦截器，分为请求拦截器和响应拦截器，他们会在请求或响应被then()或catch()方法处理拦截它们。axios的拦截使用
9：总结
此文详细介绍了与服务器通信的axios库的使用，该库的使用并不复杂，不过由于需要服务端提供数据访问接口，所以本文未给出实际的应用案例。关于axios库的使用，后续会持续更新
最后：学习vue3的伙伴们 可以搭配 github.com/cuixiaorui/… 这个库一起学习~~~
另外欢迎添加小编~~~加入草根汇邦学习圈
微信扫一扫添加
