Vue中网络请求

最新推荐文章于 2024-05-21 14:15:14 发布

ᝰꪶꪮડꫀ²⁰.525

最新推荐文章于 2024-05-21 14:15:14 发布

阅读量283

点赞数 1

文章标签： javascript vue.js 开发语言

本文链接：https://blog.csdn.net/weixin_59127121/article/details/126760219

版权

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
})