Vue 使用axios发送请求

Posted 2021-08-16 白瑕

Axios发送请求

文章目录

• Axios发送请求
• 关于Axios
• 一、请求数据
• • 1.请求方法
  • 2.config对象的配置方法
  • 3.发送并发请求
• 二、数据的使用
• 总结

---

关于Axios

Axios是基于Promise的HTTP库,其支持:

1. 从 node.js 创建 http 请求
2. Promise API(Promise相关用法)
3. 拦截请求(axios拦截器)和响应
4. 转换请求数据和响应数据
5. 取消请求
   Vue.js官方推荐使用 axios完成请求

---

一、请求数据

可以在methods里写上请求函数,然后用生命周期函数在不同时期调用:

我们该尽量避免在每个组件中单独请求这个组件需要的数据, 这不仅会造成项目对某一框架依赖性过大,框架改动时需要改动大量代码,各个组件分开进行的多次请求还会增大对服务器的压力;
必然是要想办法减少请求次数的,就像宿舍里吃饭,每次总要出个打工人去买全宿舍的饭, 在Vue项目这个"大宿舍"里,这个"打工人"就是 request.js 了,它要一次买来全宿舍的饭(啊呸,请求来全部的数据),然后分给这个宿舍里的每个人(组件), axios进行的是网络请求,这里用来盛放 request.js 的文件夹就姑且叫做"network"吧 .
接下来我会在request.js里完成整个项目的数据请求;

1.请求方法

请求方法	说明
axios({config})	最原始的axios请求方式,axios(配置对象)
axios.get(url , {config})	需要传入URL和配置对象
axios.delete(url , {config})	需要传入URL和配置对象
axios.head(url , {config})	需要传入URL和配置对象
axios.post(url , {data}, {config})	需要传入URL和作为请求主体的data对象,和配置对象
axios.put(url , {data}, {config})	需要传入URL和作为请求主体的data对象,和配置对象
axios.patch(url , {data}, {config})	需要传入URL和作为请求主体的data对象,和配置对象

关于config配置对象的配置方法,我会在下文说到;

2.config对象的配置方法

配置项	作用
url	字符串,指明请求的目标,向何处发送请求
method	字符串,设置请求的方法,默认get
baseurl	字符串,设置url的基础结构,该项设置后,baseurl会自动与url进行拼接,形成完整的url,这个baseurl最好是设置为多个请求url相同的前段部分,如此可以共用baseurl
transformRequest	数组型值,只能用在put, post,patch方法中,在向服务器发送数据前在此处进行再处理,你可以在这个数组里写处理数据的函数,但别忘了return.
transformResponse	数组型值,可以对服务器返回的东西先做一些处理，这个操作允许在响应之前完成,你同样可以在这个数组里写函数,同样别忘记return.
headers	对象型值,有验证作用, 在某些项目中需要进行身份校验,要求在请求头信息中加入特殊的标识，以此检验是否满足请求条件
params	简化传递url参数的流程,添加到url的请求字符串中无法传递json格式的数据,主要用于get中
data	对象型(会被转换为字符串) / 字符串型, 添加到请求体（body）中,支持json格式的数据,主要用于post中
paramsSerializer	函数型值,对请求的参数序列化, 它可以处理用于传递的数据, 比如您可以用这个属性来把params里的数组转化为字符串,因为函数中需要使用qs.stringify(), 使用前需要引入序列化库qs(即import qs from ‘qs’)
timeout	设置等待时长,请求超时会取消请求
withCredentials	布尔值, 设置跨域请求时coockie的携带,默认false
adapter	设置对请求的识别，是发送ajax请求还是在js里发送http请求
auth	对象, 设置对请求的基础信息验证
responseType	对响应器结果的格式做设置,默认json
responseEncoding	响应结果编码格式,默认utf8
xsrfCookieName	跨域请求标识，对coockie名字做设置
xsrfHeaderName	对头信息做安全设置，保证请求来自正确的客户端
onUploadProgress	上传回调,值可以为自定义函数
onDownloadProgress	下载回调,值可以为自定义函数
maxContentLength	设置http响应体的最大尺寸，单位bit
maxBodyLength	请求体的最大尺寸，单位bit
validateStatus	对响应结果的成功码做相关设置
maxRedirects	最大跳转次数
socketPath	设定socketPath位置，作用：数据转发
proxy	设置代理
cancelToken	对ajax的请求做取消设置
decompress	解压响应结果

3.发送并发请求

axios.all(): 用于同时发送多个请求;
axios.spread(): 用于分离数组中得到的数据;

//发送两个axios请求,就用最原始的axios()吧;
axios.all([axios({
    url: 'http://123.207.32.32:8000/home/data?type=sell&page=3'
}), axios({
    url: 'http://123.207.32.32:8000/home/data',
    params: {
        type: 'paper',
        page: 4
    }
})])

axios.all([axios({
    url: 'http://123.207.32.32:6000/home/data?type=sell&page=3'
}), axios({
    url: 'http://123.207.32.32:6000/home/data',
    params: {
        type: 'paper',
        page: 4
    }
})]).then(axios.spread((response1, response2) => {
    //axios.spread将返回的数组展开,不加的话会返回一个包含两个对象的数组;
    console.log(response1);
    console.log(response2);
}))

您可以不把all()与请求函数写在一起, 如果多个请求函数需要加入一次并发请求,您只需要在同一个axios.all()内调用他们即可;
如果不写在request.js里,您可以把请求写在methods里,然后利用生命周期函数在不同时刻调用;

//在mounted生命周期执行axiosRequest1请求和axiosRequest2请求;
 mounted:function(){
    axios.all([axiosRequest1(), axiosRequest2()])
    .then()
 }

二、数据的使用

上表的语句书写正确仅能完成数据的请求,数据还是会在方法执行完后被连同方法一起销毁,如果想要应用这些数据,也就是分发数据给各个组件,需要先把数据稳定的保存下来,这里作为示例,就先保存到变量"response"里吧:

//保存get请求的数据;
axios.get("url", {
    params: {
        type: 'sell',
        page: 4
    }
}
).then(response => {
    console.log(response);
}).catch(error => {
    console.log(error);
})

//保存post请求的数据;
axios.post("url",{
    id:356,
    name:"bx",
},{
    timeout:2000
}
).then(response => {
    console.log(response);
}).catch(error => {
    console.log(error);
})

我觉得你也看出来了吧…与前面表中部分并没有差别,唯一多出来的是利用then()把请求结果拿出来;
Pending等待状态: 正进行网络请求或定时器未到时等,正在请求;
Fulfill满足状态: 调用resolve()进行请求完毕后的链式程序,调用then(),返回的数据接收到then()里;
reject失败/拒绝状态: 未请求到数据,主动回调reject(),执行catch();

为何使用该种模式来拿取数据 :
普通方法进行的异步网络请求,看着时常是杂乱无章,可读性差不是它的唯一缺点,在请求非常复杂是,特容易出现回调地狱;
Promise异步编程解决方案:
请求方法(即axios系列方法)请求到数据后会把数据传到自身内部进行处理,
这是代码量大时可读性差的原因之一,而且如果中途某次请求的完成需要上次请求的结果,比较复杂的情况下会出现回调地狱 .

依照Promise的思想,它是不希望我们这么干的,其希望把拿回的数据在专门的地方被处理,也就是在then()中,而不是拿到后夹在各个请求之间直接原地处理.
Promise中的resolve()会接收传入请求方法中的请求结果传给then(),然后立即执行then(data),在then()中进行数据处理.

//每次setTimeout是一次请求吧,您当它是"请求()"也行;
new Promise((resolve, reject) => {
//第一次请求
    setTimeout(() => {
      resolve() 
//一旦调用了resolve(),本次Promise的最后会立即调用then()
   }, 1000)
}).then(() => {
//处理第一次请求结果,输出一下,就当是处理结果吧...
         console.log(HelloWorld);
 return new Promise((resolve, reject) => {
//第二次请求;
         setTimeout(() => { 
              resolve()
         }, 1000)
     })
}).then(() => {
//处理第二次请求结果;
         console.log(HelloVue);
         console.log(HelloVue);
})

---

总结

感觉还是有很多没有整理完全的地方…
如果您发现了不足或错误,欢迎您在评论区指出,我都会回复哒 : )