vue 网络请求 axios

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

• • 安装 npm install vue-axios --save
  • 在main.js 中使用 

    import axios from 'axios'

  • 说明：

1. 1. 默认是get请求
   2. 有跨域请求
   3. 返回值是Promise对象
2. 封装

• 1. 原因：第三方框架一旦出现停止维护  项目更改网络请求方式变得很繁琐 
  2. 流程
     • 新建require.js对axios进行封装

import axios from 'axios'

 

 import Vue from 'vue

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

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

}

• • • 在组件里面使用 import {requst} from './require.js'
    • 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})