23~vue中http请求_vue http

vue中http请求

fetch请求

默认执行get请求
fetch 原生js, 不是ajax的封装,是ajax的一种替代方案, 是一种http数据请求的方式,es6中的语法

直接当前组件中展示数据

<template>
  <div>{{ store.state.msg }}</div>
  <p><button @click="updateMsg()">改变数据</button></p>
  <p>姓名:   {{ userDtail.name }}</p>
  <p>年龄:   {{ userDtail.age }}</p>
  <p>职业:   {{ userDtail.job }}</p>
</template>
<script>
export default{
  inject:['store'],
  data(){
    return {
      userDtail:{}
    }
  },
  /**
   * axios 也是http数据请求的方式, 但它是第三方库, 需要引入、安装
   */
   created(){
    /**
     * fetch会返回promise对象     
     * 
     */
    let url = '/path/api/tests'
    fetch(url).then((res)=>{
      // fetch这个函数会返回一个promise对象, 通过then可以去获取这个对象
      // 通过json()方法,将响应回来的body, 解析成json的promise对象
      // console.log(res.json())
      // 这里返回出去, 可以再次通过then进行链式调用, 获取到返回的数据
      return res.json() 
    }).then((res)=>{
      // console.log(res)
      this.userDtail = res.data
    })
  },

  methods:{
    updateMsg:function(){
      this.store.updateMsg()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

进行数据管理后,展示数据

请求到数据后, 把数据进行状态管理, 然后供自己或者其他组件使用

src/store/index.js 定义一个属性, 管理用户信息, 定义一个方法, 更新用户信息

import { reactive } from 'vue'

const store = { 
  state: reactive({ //定义我的状态  
    userDetail: {}
  }),
  // 定义一个方法, 管理userDtail
  updateUserDetail: function (value) {
    this.state.userDetail = value
  } 
}
//如果在App组件中, 通过provide提供数据

//导出仓库, 供外部使用
export default store
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

组件中请求和注入到数据管理

<template>
  <p>利用状态管理里面的数据进行展示</p>
  <p>姓名:   {{ store.state.userDetail.name }}</p>
  <p>年龄:   {{ store.state.userDetail.age }}</p>
  <p>职业:   {{ store.state.userDetail.job }}</p>
</template>
<script>
export default{
  inject:['store'], 
   created(){  
    let url = '/path/api/tests'
    fetch(url).then((res)=>{
      // fetch这个函数会返回一个promise对象, 通过then可以去获取这个对象
      // 通过json()方法,将响应回来的body, 解析成json的promise对象
      // console.log(res.json())
      return res.json() // 这里返回出去, 可以再次通过then进行链式调用, 获取到返回的数据
    }).then((res)=>{
      // console.log(res)    
      // 如果其他组件要使用, 需要注入到数据管理中,进行修改
      this.store.updateUserDetail(res.data)
    })   
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

Axios请求(项目中一般都用这个,而且还要再次封装)

Axios 是一个基于promise的HTTP库, 可以用在浏览器和node.js中。本质是对原生XHR的一个封装。项目中一般都是使用Axios取获取数据。Axios是Ajax; 但Ajax不止于Axios。

Axios 是第三方库, 需要安装和引入

安装

npm install axios
1

简单使用

<template>
  <div>{{ store.state.msg }}</div>
  <p><button @click="updateMsg()">改变数据</button></p>
  <p>利用状态管理里面的数据进行展示</p>
  <p>姓名:   {{ userDetail.name }}</p>
  <p>年龄:   {{ userDetail.age }}</p>
  <p>职业:   {{ userDetail.job }}</p>
</template>
<script>
// 导入axios 
import axios from 'axios'
export default{
  inject:['store'],
  data(){
    return {
      userDetail:{}
    }
  },
  /**
   * axios 也是http数据请求的方式, 但它是第三方库, 需要引入、安装
   */
   created(){
    /**
     * axios是基于promise的https库
     * 利用axios发送http请求
     */
    let url = '/path/api/tests'
    axios.get(url).then((res)=>{
      console.log('res',res)
      this.userDetail = res.data.data
    })
  },
  methods:{
    updateMsg:function(){
      this.store.updateMsg()
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39