vue 网络请求 axios

1. 作用：类似于jQuery的$.ajax作为网络请求的封装组件
2. 使用流程

• • 安装 npm install vue-axios --save

在main.js 中使用 

import axios from 'axios'

 

             vue.prototype.$ajax= axios

• • 说明：

1. 1. 默认是get请求
   2. 有跨域请求
   3. 返回值是Promise对象
   • 直接使用

this.$http({
        method: 'get',
        url: 'https://api.coindesk.com/v1/bpi/currentprice.json',
        data: {
          name: 'virus'
        }
     })

1. 封装

• 1. 原因：第三方框架一旦出现停止维护  项目更改网络请求方式变得很繁琐 
  2. 流程

                      1)新建require.js对axios进行封装

import axios from 'axios'

export function requst (config){
       const Axios=axios.create({//实例化
                baseURL:config.url，
               timeout:3000

       })
     return Axios(config)//返回值是Promise对象

}

2) 在组件里面引用   import {requst} from './require.js'

                       3) requst({url:''}).then(result=>{}).catch(err=>{})

3 多个网络请求

     requst([fun1,fun2]).then(result=>{}).catch(err=>{});

•  fun1 返回的是promise的对象
• result 是个数组  可用const [s1,s2]=result; 或者用axios.spread((res1,res2)=>{})

4  全局配置

• axios.defaults.baseURL='https://1239999';
• axios.defauts.timeout=6000//ms

5  拦截器：拦截每一次你的请求和响应，然后进行相应的处理。

如：一些网站过了一定的时间不进行操作，就会退出登录让你重新登陆页面，当然这不用拦截器你或许也可以完成这功能，但是会很麻烦而且代码会产生大量重复，所以我们需要用到拦截器。

• 作用

1. 方便调试
2. 登录检测未有token 可以先去登录处理
3. config中的请求信息不符合要求
4. 请求时可以出现一个loading图片

• 一共有4种  请求2种，应答2种

1. axios.interceptors.requst.use(config=>{console.log(config);return config;//必须返回 不然没有请求参数了},err=>{conosole.log(err})
2. axios.interceptors.reponse.use(result=>{console.log(result);return result;//必须返回 不然得不到没有应答了},err=>{conosole.log(err})