Vue发起请求后端数据

最新推荐文章于 2024-07-04 14:44:51 发布
最新推荐文章于 2024-07-04 14:44:51 发布
阅读量1.6k 收藏 10
点赞数 14
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_57319760/article/details/139236472
版权

一. 请求方式

  1. Fetch
  2. Axios

(一). Fetch介绍

        Fetch API 提供了一个 JavaScript 接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它也提供了一个全局fetch()方法，该方法提供了一种简单、合乎逻辑的方式来跨网络异步获取资源。相对于XMLHttpRequest（Ajax，Axios底层），Fetch API拥有以下的特点：       

  • 基于 Promise 的接口：Fetch 返回的是 Promise 对象，使得异步操作更加方便。
  • 更加灵活和功能强大：支持 Service Workers, Request/Response 对象等。
  • 清晰的 API 设计：比起 XMLHttpRequest 复杂的事件处理，Fetch 的 API 设计更为简洁和直观。
  • 原生的，无需任何第三方包：相比于目前基于XMLHttpRequest封装的Ajax和Axios等，Fetch API无需下载任何第三方npm包即可使用，更加轻量化。

(二). Axios介绍

        Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios的本质是在Ajax的基础上再进行了一层封装，所以本质上Axios是利用XMLHttpRequest发起请求。Axios拥有以下的特点：

  • 从浏览器中创建 XMLHttpRequests
  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换 JSON 数据
  • 客户端支持防御 XSRF

(三). Axios和Fetch的对比

Axios/FetchAxiosFetch
使用技术基于 promise 实现对 ajax 技术的一种封装，而 ajax 是基于 JS 的 XMLHttpRequest 对象封装的基于 promise，但不是对 ajax 的封装， 和 XMLHttpRequest 对象也没有太多的关系，fetch 是 JS 的原生API，相较于 axios 对浏览器的性能有不错提升
请求方式发送Post请求时将参数用对象的方式放入data中发送Post请求时需要指定请求请求数据格式为JSON并且需要使用JSON.stringify转化为JSON
拦截器可以使用
axios.interceptors.request和
axios.interceptors.response为其添加请求拦截器和相应拦截器

没有自带的拦截器，需要重写Fetch方法（麻烦）

超时响应直接设置timeout属性没有自带属性，可以使用但是很麻烦
数据转化自动转化需要手动转化
兼容性好差

                从上面可以看到，Fetch API的优势仅仅只是JS自带的API不需要安装第三包，更多人还是更喜欢用Axios。

二.使用方法 

(一). 演示环境

  • Vue3
  • Ts
  • Vite

接口结构类型：

 

(二).Axios 

1.安装

npm install axios

2.封装请求工具

(1).方法封装（新手推荐使用）

        在src目录下创建utils文件夹，新建request文件

        利用axios.create方法进行直接封装

import axios  from "axios";

const request = axios.create({
    baseURL: 'http://localhost:8080',  //你的后端请求地址
    timeout: 5000     //请求超时时间
})


//请求拦截器，可以设置header等
request.interceptors.request.use(config => {
    //可以设置header
    return config
}, err => {
    //请求错误中断
    return Promise.reject(err)
})

//响应拦截器，可以针对不同code时进行的操作
request.interceptors.response.use(response => {

    //这个地方可以后端设置的code进行再次过滤或者操作，比如401直接跳转登录
    return response.data
},error => {
    //响应错误中断
    return Promise.reject(error)
})

export default request
(2).类封装（熟悉后使用）
import axios, {AxiosInstance, AxiosRequestConfig, AxiosResponse} from "axios";

class HttpRequest {
    private instance: AxiosInstance;

    constructor() {
        this.instance = axios.create({
            baseURL: 'http://localhost:8080',  //你的后端请求地址
            timeout: 5000     //请求超时时间
          });


        
        // 添加请求拦截器
    this.instance.interceptors.request.use(
        config => {
          // 可以在这里添加例如token等请求头
          // if (store.getters.token) {
          //   config.headers['Authorization'] = `Bearer ${store.getters.token}`;
          // }
          return config;
        },
        error => {
          // 请求错误处理
          return Promise.reject(error);
        }
      );

    // 添加响应拦截器
    this.instance.interceptors.response.use(
        response => {
          // 对响应数据做处理，例如只返回data部分
          return response.data;
        },
        error => {
          // 响应错误处理
          return Promise.reject(error);
        }
      );
    }


    public request<T>(config: AxiosRequestConfig): Promise<AxiosResponse<T, any>> {
        return this.instance.request<T>(config);
      }
}

export default new HttpRequest();

3.封装请求方法

在src里面新建api目录，这个目录就专门用来存放封装的请求方法，比如我这里涉及到用户的请求，就新建user.ts

写请求方法：

import request from "../utils/request"
import http from "../utils/http"
import { User } from "../model/user"

//这个是使用方法封装的axios进行请求
export const listUser = () => request({url: '/user/list', method: 'get'})


//这个是使用类封装的axios进行请求
export const addUser = (data: User) => http.request({url: '/user/add', method: 'post', data})

那么这个request中的url，method，还有post方法里面的data是怎么来的

可以从AxiosRequestConfig中定义的参数来看

export interface AxiosRequestConfig<D = any> {
  url?: string;
  method?: Method | string;
  baseURL?: string;
  transformRequest?: AxiosRequestTransformer | AxiosRequestTransformer[];
  transformResponse?: AxiosResponseTransformer | AxiosResponseTransformer[];
  headers?: (RawAxiosRequestHeaders & MethodsHeaders) | AxiosHeaders;
  params?: any;
  paramsSerializer?: ParamsSerializerOptions | CustomParamsSerializer;
  data?: D;
  timeout?: Milliseconds;
  timeoutErrorMessage?: string;
  withCredentials?: boolean;
  adapter?: AxiosAdapterConfig | AxiosAdapterConfig[];
  auth?: AxiosBasicCredentials;
  responseType?: ResponseType;
  responseEncoding?: responseEncoding | string;
  xsrfCookieName?: string;
  xsrfHeaderName?: string;
  onUploadProgress?: (progressEvent: AxiosProgressEvent) => void;
  onDownloadProgress?: (progressEvent: AxiosProgressEvent) => void;
  maxContentLength?: number;
  validateStatus?: ((status: number) => boolean) | null;
  maxBodyLength?: number;
  maxRedirects?: number;
  maxRate?: number | [MaxUploadRate, MaxDownloadRate];
  beforeRedirect?: (options: Record<string, any>, responseDetails: {headers: Record<string, string>, statusCode: HttpStatusCode}) => void;
  socketPath?: string | null;
  transport?: any;
  httpAgent?: any;
  httpsAgent?: any;
  proxy?: AxiosProxyConfig | false;
  cancelToken?: CancelToken;
  decompress?: boolean;
  transitional?: TransitionalOptions;
  signal?: GenericAbortSignal;
  insecureHTTPParser?: boolean;
  env?: {
    FormData?: new (...args: any[]) => object;
  };
  formSerializer?: FormSerializerOptions;
  family?: AddressFamily;
  lookup?: ((hostname: string, options: object, cb: (err: Error | null, address: LookupAddress | LookupAddress[], family?: AddressFamily) => void) => void) |
      ((hostname: string, options: object) => Promise<[address: LookupAddressEntry | LookupAddressEntry[], family?: AddressFamily] | LookupAddress>);
  withXSRFToken?: boolean | ((config: InternalAxiosRequestConfig) => boolean | undefined);
  fetchOptions?: Record<string, any>;
}

是不是让人眼花缭乱，对于这些参数，Axios中文官网有具体的讲解，这里我也全部放上来

 

{
   // `url` 是用于请求的服务器 URL
  url: '/user',

  // `method` 是创建请求时使用的方法
  method: 'get', // default

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
  // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允许在向服务器发送前，修改请求数据
  // 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
  transformRequest: [function (data, headers) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
  transformResponse: [function (data) {
    // 对 data 进行任意转换处理
    return data;
  }],

  // `headers` 是即将被发送的自定义请求头
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是即将与请求一起发送的 URL 参数
  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象
  params: {
    ID: 12345
  },

   // `paramsSerializer` 是一个负责 `params` 序列化的函数
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function(params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时，必须是以下类型之一：
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属：FormData, File, Blob
  // - Node 专属： Stream
  data: {
    firstName: 'Fred'
  },

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)
  // 如果请求话费了超过 `timeout` 的时间，请求将被中断
  timeout: 1000,

   // `withCredentials` 表示跨域请求时是否需要使用凭证
  withCredentials: false, // default

  // `adapter` 允许自定义处理请求，以使测试更轻松
  // 返回一个 promise 并应用一个有效的响应 (查阅 [response docs](#response-api)).
  adapter: function (config) {
    /* ... */
  },

 // `auth` 表示应该使用 HTTP 基础验证，并提供凭据
  // 这将设置一个 `Authorization` 头，覆写掉现有的任意使用 `headers` 设置的自定义 `Authorization`头
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

   // `responseType` 表示服务器响应的数据类型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
  responseType: 'json', // default

  // `responseEncoding` indicates encoding to use for decoding responses
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // default

   // `xsrfCookieName` 是用作 xsrf token 的值的cookie的名称
  xsrfCookieName: 'XSRF-TOKEN', // default

  // `xsrfHeaderName` is the name of the http header that carries the xsrf token value
  xsrfHeaderName: 'X-XSRF-TOKEN', // default

   // `onUploadProgress` 允许为上传处理进度事件
  onUploadProgress: function (progressEvent) {
    // Do whatever you want with the native progress event
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  onDownloadProgress: function (progressEvent) {
    // 对原生进度事件的处理
  },

   // `maxContentLength` 定义允许的响应内容的最大尺寸
  maxContentLength: 2000,

  // `validateStatus` 定义对于给定的HTTP 响应状态码是 resolve 或 reject  promise 。如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，promise 将被 resolve; 否则，promise 将被 rejecte
  validateStatus: function (status) {
    return status >= 200 && status < 300; // default
  },

  // `maxRedirects` 定义在 node.js 中 follow 的最大重定向数目
  // 如果设置为0，将不会 follow 任何重定向
  maxRedirects: 5, // default

  // `socketPath` defines a UNIX Socket to be used in node.js.
  // e.g. '/var/run/docker.sock' to send requests to the docker daemon.
  // Only either `socketPath` or `proxy` can be specified.
  // If both are specified, `socketPath` is used.
  socketPath: null, // default

  // `httpAgent` 和 `httpsAgent` 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。允许像这样配置选项：
  // `keepAlive` 默认没有启用
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // 'proxy' 定义代理服务器的主机名称和端口
  // `auth` 表示 HTTP 基础验证应当用于连接代理，并提供凭据
  // 这将会设置一个 `Proxy-Authorization` 头，覆写掉已有的通过使用 `header` 设置的自定义 `Proxy-Authorization` 头。
  proxy: {
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // `cancelToken` 指定用于取消请求的 cancel token
  // （查看后面的 Cancellation 这节了解更多）
  cancelToken: new CancelToken(function (cancel) {
  })
}

 其实对于普通的需求来说，最常用的就是以下参数，只需要认识它们即可：

参数名作用
url拼接在baseUrl后面的url，比如/user
method请求方法
params常用于get等请求中携带的params
data常用于post等请求中携带的body，会自动转为Json

4.使用请求方法 

封装好请求方法后就可以直接使用了，比如我想请求所有用户的数据：

<script setup lang="ts">
import { listUser } from './api/user';
import HelloWorld from './components/HelloWorld.vue'

const fetchUserList = async () => {
 const res =  await listUser()

 console.log(res);
 
}

fetchUserList()
</script>

 

可以看到数据成功地请求出来了

再使用Vue渲染一下这些数据：

<script setup lang="ts">
import { listUser } from './api/user';
import HelloWorld from './components/HelloWorld.vue'
import { ref } from 'vue';
import { User } from './model/user';

const userList = ref<User[]>([])

const fetchUserList = async () => {
 const res =  await listUser()

 if(res.code === 200) {
  userList.value = res.data
 }
 
}

fetchUserList()
</script>

<template>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
    <ul>
      <li v-for="item in userList" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
  <HelloWorld msg="Vite + Vue" />
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>

 

成功展示

剩下的那个Post请求自己试试吧 

 

whitedove@doge
关注
  • 14
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue项目中前端请求后端数据的两种方式
Kisushotto的博客
02-27 1万+
1、JS方式，使用fetch函数，较底层 //JS方式请求分页数据 fetch("http://localhost:9090/user/page?pageNum=" + this.pageNum + "&pageSize=" + this.pageSize + "&username=" + this.username + "&email=" + this.email + "&address=" + this.address).then(res => re
vue如何发送请求给后端（包括前后端跨域）
m0_49936845的博客
04-27 1220
changeOrigin可能还是不明白：他就是欺骗服务器的，打开时，代理服务器向后端服务器发送请求时，就骗后端服务器，我也是后端服务器地址（上面例子就是5000端口），关闭就是8080端口。跨域问题来自前端：前端向后端发送请求获取到回复后，发现后端和自己的域（三要素）有不一致的，不将数据返回给我们（用户）。代理服务器位于前端，同样是8080端口，所以没有跨域问题，而服务器之间的通信不存在跨域这个问题，所以问题解决了。在vue中常见的有3.**axios**和5.**vue-resource**
Vue3项目中axios请求后端接口
最新发布
gaotlantis的博客
07-04 651
在Vue3项目中，我们可以使用axios库来发送HTTP请求。
vue 请求后台数据的实例代码
08-30
本篇文章主要介绍了vue 请求后台数据的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧、
vue如何请求后端数据
热门推荐
friggly的博客
07-04 3万+
在vue中，我们如何通过请求接口来访问后端的数据呢？在这里简单总结了一个小示例： 主要问题：如果不封装的话，在每次请求的时候都要书写一遍下面的代码，造成代码冗余。
在vue.js框架给后端发送请求
明月朗，潇水寒
05-21 1万+
  在一篇文章中，我们说了如果在后端接收POST请求(JSON类型和x-www-form-urlencoded类型)，不过使用的是Postman来模拟前端发送请求的。 这篇文章将展示使用在vue.js框架中如何发送请求。   Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios官方说明文档 var map...
Yii2 ActiveController 支持的所有url类型
易水寒
05-12 602
1. 列表 get wx.request({ url: 'http://localhost:8080/articles', header: { 'Content-Type':'application/json' }, method: 'GET', success:function(res) { consol...
Vue使用axios请求后端数据
千里之行，始于足下
06-02 453
【代码】Vue使用axios请求后端数据。
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
总结来说，Vue中处理后端返回的Excel数据流，主要是通过axios发起请求，将返回的Blob数据转化为可下载的URL，然后创建一个隐藏的a标签进行下载操作。这种方式灵活且高效，适合大多数现代浏览器环境。在实际开发中，...
Vue请求java服务端并返回数据代码实例
10-15
本文将详细讲解如何使用Vue.js通过axios库向Java服务端发起请求并处理返回的数据。 首先，Vue.js是一个轻量级的前端框架，它允许开发者构建用户界面并实现组件化。axios则是一个基于Promise的HTTP库，可以在浏览器...
详解vue-Resource（与后端数据交互）
08-31
在 Vue 实例中，我们通常在 `created` 或 `ready` 生命周期钩子中发起请求，以便在组件加载时获取或更新数据。例如： ```javascript data() { return { toplist: [], alllist: [] }; }, // 在这里，route 数据...
vuejs前后端数据交互之从后端请求数据的实例
10-18
今天小编就为大家分享一篇vuejs前后端数据交互之从后端请求数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
详解vue与后端数据交互(ajax)：vue-resource
08-31
本篇文章主要介绍了详解vue与后端数据交互(ajax)：vue-resource，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
Vue2学习笔记之请求数据交互vue-resource
08-31
全局使用时，可以通过`Vue.http`发起请求；而在Vue实例内部，则可以使用`this.$http`。 以下是一些基本的请求示例： ```javascript // 全局使用 Vue.http.get('/someUrl').then(successCallback, errorCallback); ...
vue在开发过程中向后台请求数据的几种主要方式
weixin_45090657的博客
03-15 1102
第二种是jquery-ajax,这种在开发中也是十分常见的,但是仅仅局限于我们的开发框架是jquery,因为我们所使用的是vue框架,他就1万行代码,,它是是一个基于promise的http库,简单来说,就是在axios上加了点promise的代码,而jquery也是一万行代码,我们如果要使用。为什么使用它,它有几种优点。第三种就是我们常用的。
Vue 请求后台数据
xiaoma19941027的博客
09-28 398
1.（配置代理）新建文件：vue.config.js 2.vue.js官网 > vue-cli 配置参考 > devServer.proxy 复制 module.exports = { devServer: { proxy: { '/api': { target: '<url>', ...
Vue 利用axios请求后台数据
weixin_41987908的博客
11-06 3446
axios请求后台数据
Vue使用ajax(axios)请求后台数据
豪先生的博客
03-17 1万+
前言：页面上那些数据，绝大部分都不是静态的数据，而是通过调用后台接口把数据渲染到页面上的效果。ajax可以帮助我们更好的去实现这一点，下面是详解在vue中如何使用它。 vue本身它是不支持直接发送ajax请求的，需要用到axios（一个基于promise的HTTP库，可以用在浏览器和node.js中）这是Axios文档的介绍，详细可查看：使用说明 · Axios 中文说明 · 看云 Axios安装 前台部分 1、npm安装 npm i axios -S //......
vue 获取后端数据
Little___Turtle的博客
07-15 1万+
vue 获取后端接口数据 通俗易懂版
vue请求后端数据axios
05-26
在Vue中使用axios请求后端数据的步骤如下： 1. 安装axios 可以使用npm或yarn安装axios，命令如下： ```bash npm install axios --save ``` 或者 ```bash yarn add axios ``` 2. 在Vue组件中引入axios 在需要使用axios的Vue组件中，通过import引入axios，并且在组件的methods中定义一个请求函数，如下所示： ```javascript import axios from 'axios' export default { name: 'MyComponent', data() { return { responseData: null } }, methods: { fetchData() { axios.get('/api/data') .then(response => { this.responseData = response.data }) .catch(error => { console.log(error) }) } } } ``` 3. 发起请求 在请求函数中，我们使用axios的get、post、put等方法发起请求。在本例中，我们使用get方法请求后端数据，并将获取到的数据赋值给组件的responseData属性。 需要注意的是，在请求时需要提供请求的URL，这里使用的是相对路径`/api/data`，具体的URL需要根据项目实际情况进行调整。 4. 处理响应 在请求完成后，我们可以通过then方法或catch方法处理响应。在本例中，我们将获取到的数据赋值给组件的responseData属性，如果请求失败，则打印出错误信息。 以上就是使用axios请求后端数据的基本步骤，需要注意的是，axios还支持设置请求头、请求参数等更多高级特性，具体使用方法可以参考axios的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值