雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

Vue 网络请求模块封装 (axios)

2024-09-21 20

1. vue 中如何发送网络请求 ?2. 在 vue 脚手架中使用 axios3. 请求配置4. 配置默认值5. 网络请求模块封装

1. vue 中如何发送网络请求 ?


选择一: XMLHttpRequest (XHR)

这种方式配置和调用方式都非常混乱,编码也很复杂,所以真实开发中都不会使用 XHR 这种方式

选择二: jQuery-Ajax

如果项目中使用了的 jquery,那么我们一般都会使用 jquery 自带的 ajax 封装,也就是 $.ajax({})

但是,要明确一点,在 vue 整个开发中都是不需要使用 jQuery 了,如果在 vue 中还要使用 $.ajax 则使用引入 jquery。jquery 的代码达到 1w+ 行,vue 代码才 1w+ 行,完全没有必要为了网络请求引用这个重量级框架

选择三: axios

在 Vue1.x 的时候,Vue 官方推出了 vue-resource,它的体积相对于 jquery 小了很多,在 Vue2.x 推出后,去掉了 vue-resource,并且 vue 作者尤雨溪推荐使用 axios

2. 在 vue 脚手架中使用 axios


axios 中文文档: http://www.axios-js.com

安装 axios 包

npm install axios

在 main.js 中导入 axios

import axios from 'axios';

3. 请求配置


当 url 不是一个绝对 URL 时,baseURL 才会自动加在 url 前面

序号 参数 描述
1 url 接口地址
2 baseURL 接口根路径
3 method 请求类型,不区分大小写
4 params URL 查询对象
5 data 请求体数据,存放 POST 数据的地方
6 headers 请求头
7 timeout 超时时间,单位: 毫秒,请求超过时间时请求将被中断 (0 代表 不超时)

常用请求配置参数

axios({    url: "/goods/getLists",    method: "post",    baseURL: "http://shop.cy",    params: {        id: 10    },    data: {        name: 'liang'    },    headers: {        token: "abcdef"    },    timeout: 5000})

4. 配置默认值


全局的 axios 默认值

axios.defaults.baseURL = 'https://api.example.com';axios.defaults.timeout = 5000;

自定义实例默认值

当前接口地址是多个域名时,定义全局配置默认值显然是不合适的,因为接口前缀不同,此时可以定义多个 axios 实例

// 创建 axios 实例const instance = axios.create({    baseURL: "http://shop.cy",    timeout: 500})// 发送网络请求instance(config).then(res => {    console.log('res', res)})

5. 网络请求模块封装


创建文件: src/network/request.js

import axios from 'axios';export default (config) => {    // 创建 axios 实例    const instance = axios.create({        baseURL: "http://shop.cy",        timeout: 1    })    // 响应拦截器    instance.interceptors.response.use(response => {        // 响应成功        return response.data; // 返回接口数据    }, error => {        // 响应错误        return Promise.reject(error);    });    return instance(config)};

使用示例

request({    url: '/test/req',    params: {        id: 200    }}).then(res => {    console.log('res', res)}).catch(err => {    console.log('err', err)})
更新于:18天前
赞一波!

文章评论

评论问答