小橙子

前端

47
文章
37
分类
19
标签

vue请求数据

axios发起请求

axios

  • axios可以使用在浏览器端，也可以使用在nodejs端
  • 前端框架: vue react中使用
  • https://segmentfault.com/a/1190000008470355?utm_source=tuicool&utm_medium=referral
  • get
  • post 如果data是对象，默认头就是application/json
    • 如果data是字符串 默认头就是application/x-www-form-urlencoded
  • 在做交互的时候，application/json传输数据，你得保证，头和数据一致
  • 还要顾及服务端是否支持json数据

不是vue插件要挂载原型中

1
Vue.prototype.$ajax = Axios; //所有组件都通过this.$aixos获取对象

post

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
this.$axios.post('http://182.254.146.100:8899/api/postcomment/400',
          //{content:'xxx'} 传递的是对象 转换是对象字符串做key
          'content=上海9期，谦虚的登场'  //需要字符串
          ,{
            //对于本次请求的个性化设置   
            // headers:{
            //     'content-type':'application/x-www-form-urlencoded'
            // }
          })
          .then(res=>{
            console.log(res.data);
          })
          .catch(err=>{
            console.log(err);
          })
        }

get

1
2
3
4
5
6
7
this.$axios.get('http://182.254.146.100:8899/api/getlunbo')
            .then(res=>{
                console.log(res.data); //整个数据对象
            })
            .catch(err=>{
               console.log(err);
           })

合并请求

  • 发起一个获取省数据的请求 + 发起一个获取市数据的请求
  • 一次失败，就算失败，全部成功才算成功
  • 发起合并请求 this.$axios.all([请求1,请求2...])
  • 广播响应,在then参数内 this.$axios.spread((res1,res2)=>{ //处理响应内容})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
this.$axios.all([
             this.$axios.get('http://182.254.146.100:8899/api/getnewslist'),
             this.$axios.get('http://182.254.146.100:8899/api/getlunbo2')
          ])
          .then(  //需要广播
             this.$axios.spread((newsListRes,lunboRes)=>{
                console.log('成功');
                console.log(newsListRes);
                console.log(lunboRes);
             })
          )
          .catch(err=>{
            console.log('失败')
            //一个出异常，就进入了
            console.log(err);
          })
1
2
3
4
5
//默认设置一些公共行为this.$axios.defaults是一个对象
//影响范围大、能力不强
this.$axios.defaults.headers = {
           accept:'get request1'
         }  //覆盖

axios_interceptor拦截器

在 main.js全局中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//拦截器操作放在全局性的地方
Axios.interceptors.request.use(function(config){
    //在发起请求之前做一些事
    console.log(config);
    config.headers.accept = 'interceptors';
    //禁止
    return {};  //最终告知插件要干嘛，method、url
});
//响应拦截器
Axios.interceptors.response.use(function(response){
    //在响应回来以后
    console.log(response);
    //禁止
    return response;
})

拦截器应用场景

  • loading图标 在请求发起前，显示
  • 在响应回来后，隐藏
1
2
3
4
5
6
7
8
9
10
11
12
Axios.interceptors.request.use(function(config){
    MintUi.Indicator.open({  //发起请求前显示
      text: '加载中...',
      spinnerType: 'fading-circle'
    });
    return config;  //最终告知插件要干嘛，method、url
});
//响应拦截器
Axios.interceptors.response.use(function(response){
    MintUi.Indicator.close();//响应回来后关闭
    return response;
});

OPTIONS请求(扩展)

  • 1:跨域 2:发起请求的时候由于数据是对象,插件默认加上的content-type:application/json
  • application/json 新的，且流行的
  • 浏览器会自动发起OPTIONS作为预检请求，去问一下，服务器是否搞定了content-type的相关配置
  • 避免浏览器发起预检请求
    • 如果一定要application/json,需要服务器配合
    • 一般来讲服务器都支持application/x-www-form-urlencoded

vue-rerource

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
<script>
    export default {
        data(){
            return {
            }
        },
        created(){
            //短方法，简便 $http.get(url,options) ->  $http({ method:'get'})
            // this.$http.get('http://182.254.146.100:8899/api/getlunbo')
            // .then(res=>{
            //     console.log(res);
            // })
            // .catch(err=>{
            //     console.log('出错了')
            //     console.log(err);
            // });
            //短方法，简便 $http.get(url,data,options)
            this.$http.post('http://182.254.146.100:8899/api/postcomment/400',{
                content:'牛逼的！'
            },{
                //配置
                emulateJSON:true, //给请求加上application/x-www-form-urlencoded并且数据以键值对方式发送
            })
            .then(res=>{
                console.log(res.body)
            })
            .catch(err=>{
                console.log(err);
            })
        }
    }
</script>