咸鱼

咸鱼是以盐腌渍后，晒干的鱼

0%

Vue2-Axios异步加载数据

发表于 更新于 分类于

一开始使用 then(function (response){}) 的方式，一直无法调用到data的变量。
改为 then(response =>{}) 这种方式就可以了。

直接贴 TestList.vue 代码

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

<template>
  <div class="title">
    <h1>{{ msg }}</h1>

    <ul>
      <li v-for="item in metadata">
        <h3>{{ item.name }}</h3>
        <img style="width: 80px ;height: 80px" :src=item.icon />
        <h5>作者 {{ item.author }}</h5>
        <span>{{ item.description }}</span>
      </li>
    </ul>

  </div>

</template>

<script>

  import axios from "axios";

  export default {
    name: 'TestList',
    data () {
      return {
        msg: '这是列表',
        metadata: [],
      }
    },
    methods:{
      
      getMetadata(){

        console.log('getMetadata...');
        axios
          .get('http://localhost:6868/story/metadata')
          .then(response =>{
            console.log("getMetadata Response ok")
            this.metadata = response.data.data.works;

            console.log("----------------")
          }).catch(error=>{
            console.log("getMetadata Response Error")
            console.log(error)
        })
      }
    },
    mounted () {
      //渲染之后执行
      this.getMetadata();
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

AXios的常用方法

定义一个 api.js 文件

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
import axios from 'axios'
const api = axios.create();
api.defaults.baseURL = 'http://api.com';
api.defaults.timeout = 5000;
//可以设置头信息
api.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';
api.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

//请求拦截
api.interceptors.request.use(function (config) {
    //在发送请求之前做些什么，比如给header设置 AccessToken
    config.headers.common['access-token'] = 'xxxxx';
}, function (error) {
    // 对请求错误做些什么
    console.log(error);
    return Promise.reject(error);
});

// 添加响应拦截器
api.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    // 加到时器主要是为了 展示Loading效果 项目中应去除
    return response;
  }, function (error) {
    // 对响应错误做点什么
    
    if(error.response) {
      if(error.response.status== 401) {
          // 如果返回401 即没有权限，跳到登录页重新登录
        alert('请重新登录');
        router.replace({
          path: '/login',
          query: {redirect: router.currentRoute.fullPath}
        })
      }
    }
    return Promise.reject(error);
  });
export default api

在使用api的 .vue 文件内 import api.js 就可以发起请求了。

1. GET 带参数

1
2
3
4
5
6
7
8
9
10
11
12
this.$api({
    method: 'get',
    url: '/product',
    params:{
        q:"老虎",
        page:this.page,
    }
    }).then((response) => {
        console.log(response.data.data.products)
    }).catch(function(error) {
    console.log(error)
})

GET的请求 params 最终是 ?q=%E8%80%81%E8%99%8E&page=0 的形式。

2. POST FormData

1
2
3
4
5
6
7
8
9
10
11
var sendData = new FormData();
sendData.append('q',"老虎");
sendData.append('page',this.page);
this.$api({
    method: 'post',
    url: '/product',
    }).then((response) => {
        console.log(response.data.data.products)
    }).catch(function(error) {
    console.log(error)
})

3. POST JSON

1
2
3
4
5
6
7
8
9
10
11
12
this.$api({
    method: 'post',
    url: '/product',
    data:{
        q:"老虎"，
        page: this.page
    }
    }).then((response) => {
        console.log(response.data.data.products)
    }).catch(function(error) {
    console.log(error)
})