- xhr
- jQuery
- $.get
- $.post
- $.ajax
- $.getJSON
- fetch,语法:fetch(url,{})
1、基础语法
如上一节所说,在Vue组件中如果需要发送网络请求正常需要写在created
生命周期函数中。而之前发送网络请求我们采用的是xhr
或$.ajax()
等较早的技术,Vue的作者推荐开发者在Vue中使用axios
作为网络请求库。axios
具备:
- 支持Promise
- 良好的兼容性
- 支持拦截器
- 对json格式的数据处理十分友好
- 能够根据请求体格式自动设置请求头
- 当请求体是普通js对象格式时,
axios
自动设置请求头为application/json
- 当请求体是查询字符串时,
axios
自动设置请求头为application/x-www-form-urlencoded
- 支持对请求进行取消
- 支持restful规范中涉及到的请求动词
axios
是一个第三方库,如果需要在项目中使用则需要先安装:
npm i axios
安装好后即可在项目中的组件里进行使用,例如我们可以按照下面的语法发送一个get请求:
import axios from "axios"
export default {
created(){
axios.get(可带问号参数的请求地址).then(res => {})
// axios的get参数支持与请求地址分离,因此下面的语法也是可以的
// axios.get(不带问号参数的地址,{params: {参数名:值,...}}).then(res => {})
}
}
如果需要使用axios来发送一个post请求,则:
import axios from "axios"
export default {
created(){
// 请求参数支持:
// - 查询字符串,如:id=1&age=22&name=zhangsan
// - 普通js对象,如:{id: 1,age: 22,name: 'zhangsan'}
// 请求头Content-Type会被根据参数类型自动设置
axios.post(请求地址,参数).then(res => {})
}
}
除了通过axios.*这种方式进行请求,axios还支持:
import axios from "axios"
export default {
created(){
axios({
baseURL: 基础地址
url: 请求路径,
method: 请求动词,
data: 参数,
timeout: 超时时间,
headers: {}
// ...
})
}
}
请求的then回调中我们可以获取到结果对象:
{
config:axios请求配置信息
data:响应体
headers:响应头信息
request:xhr请求对象
status:HTTP响应码
statusText: 状态文本信息
}
案例:请使用axios库在组件中访问https://api.i-lynn.cn/college
,并传入参数page
来获取指定页码的数据,随后展示在视图上
2、拦截器
拦截器主要的作用就是拦截,用于拦截请求和响应:
- 请求拦截器
- 用于拦截请求,在请求发出去之前拦截。
- 响应拦截器
- 用于拦截响应,在收到响应之后、then之前拦截。
不管是请求拦截器还是响应拦截器,主要的好处体现在后续项目的封装中,到时候我们会对axios进行封装,这样一来,拦截器就成了全局的拦截器了。
在全局的环境下,我们可以通过拦截器做很多有用的操作,例如:
- 通过请求拦截器去设置统一的请求头
- 通过响应拦截器中去,可以在这里做错误提示
// 请求拦截器
axios.interceptors.request.use(cfg => {
// 设置请求头
cfg.headers.Abc = "abcdefg"
return cfg
})
// 响应拦截器
axios.interceptors.response.use(res => {
return res.data
})
3、取消网络请求
在开发中还是经常容易遇到的,一般在离开组件的时候可能需要做网络请求的取消操作。在axios中取消网络请求通过cancelToken这个方式进行取消。
- 获取到source对象,该对象中有俩个成员属性
- cancelToken配置项要的值:token
- 后续取消请求的方法:cancel()
- 需要将source.token给到后续可能需要取消的网络请求的cancelToken这个配置项
- 在合适的时机去执行取消网络请求方法source.cancel()
综合案例:通过axios发送一个网络请求https://api.iynn.cn/ip,判断本地是否有缓存数据,如果有直接使用缓存并且取消网络请求;如果本地没有这个数据的缓存,则发起请求去获取,请求到后缓存数据。要求使用拦截器