2024年Web前端最全Vue进阶（二十）： 请求方式详解_vue 请求(2)，科学技术协会面试问题及回答技巧

前端面试题汇总

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

性能

linux

前端资料汇总

• • 一、resource请求
    • 二、axios 请求
    • 三、axios 请求（原型方式）
    • 四、fetch请求
    • • 4.1 get 方式
        • 4.2 POST方式
        • 4.3 在vue中的应用
        • • 4.3.1 组件中发送请求
            • 4.3.2 表单通过 fetch 发送 ajax 请求
            • 4.3.3 通过 vuex 请求数据
    • 五、拓展阅读

---

一、resource请求

npm install vue-resource --save 
import VueResource from 'vue-resource'
Vue.use(VueResource)
this.$http.get("")

二、axios 请求

npm install axios --save 
axios.defaults.baseURL = "根地址"
//vue页面引入import axios from 'axios'
axios.get(请求的地址)

三、axios 请求（原型方式）

cnpm install axios --save 
Vue.prototype.http = axios //配置Vue原型
this.http.get("")

四、fetch请求

fetch是es6新一代XMLHttpRequest的请求方式。无需安装其他库。可以在浏览器中直接应用其提供的api轻松与后台进行数据交互。

基本用法：

fetch（url，{parmas}）
	.then(res=>
	      return res.json()  //返回promise对象
	 )
	.then(data=>{
	  return data     //返回真正数据
	})
	.catch(err=>{
	 throw new Error(err)
	})

4.1 get 方式

<script type="text/javascript">

   window.onload=function(){

     var url="http://www.baidu.com"  //填写自己的域名地址
     var btn=document.getElementById("btn");

     var data={
        verified:1, 
        warningLevel:0,
        sessionID:"3ecf8905a98cb752b127302bf08f08e5"
     }

	btn.onclick=function(){

		fetch(url+"/stats/getUserList?sessionID=3ecf8905a98cb752b127302bf08f08e5&verified=1&warningLevel=0").then(res=>		{
             return res.json();     //返回promise对象

             }).then(data=>{

                  console.log("返回值：",data)

              }).catch(err=>{

                   console.log(err)

              })

}

4.2 POST方式

btn.onclick=function(){             
    fetch(url+"/stats/getUserList",{
         method:"POST",
         headers:{
           'Content-Type': 'application/x-www-form-urlencoded'
         },
         body:Qs.stringify(data)
       }).then(res=>{

           console.log(res)
            return res.json();

       }).then(data=>{

           console.log("返回值：",data)

       }).catch(err=>{

           console.log(err)

       })
}

注意：

1. fetch返回的是promise对象。所以fetch().then()第一个then里返回的并不是真正的数据。而是一个promise，所以我们需要通过链式操作第二个then()来获取真正的数据。
2. fetch发送参数是通过body字段来实现的。body是fetch第二个参数的必选参数之一。params的参数如下

• method(String): HTTP请求方法，默认为GET;
• body(String): HTTP的请求参数;
• headers(Object): HTTP的请求头，默认为{};
• credentials(String): 默认为omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie。

3. body带的参数是一个序列化以后的字符串。类似 name="coc"&age=30.所以这里我们通过qs库进行序列化。注意通过cdn引入qs后qs函数应该是Qs,Qs.stringify(data)。

4.3 在vue中的应用

fetch支持在vue中使用。这样通过ajax请求就无需通过安装axios依赖库来实现。

具体使用：

4.3.1 组件中发送请求

<div style="margin-top:20px">
   <button @click="getLevelData" >获取用户信息</button>
</div>

export default{
  name:"users",
  data(){
      return{
         arr:[]
      }
  },

methods:{
  getLevelData(){
    async function getInfo(){
       return  await fetch(api+"/stats/getUserList",{
          method:"post",
          headers:{
              'Content-Type':"application/x-www-form-urlencoded"
           },
           body:qs.stringify(data)
         }).then(res=>res.json())
      }
      
     getInfo().then(res=>{
          this.arr=res.data.data
       })
       .catch(err=>{


### 更多面试题

**《350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![](https://img-blog.csdnimg.cn/img_convert/cde4ef579c20e890ff41b683955e4c0d.webp?x-oss-process=image/format,png)



350页前端校招面试题精编解析大全》**内容大纲主要包括 **HTML，CSS，前端基础，前端核心，前端进阶，移动端开发，计算机基础，算法与数据结构，项目，职业发展等等**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-imSwWBbo-1715385253170)]