Vue发送网络请求

1.发送网络请求的方式

1.1传统的Ajax是基于XMLHttpRequest(XHR)

为什么要用它呢？
.非常好解释，配置和调用方式等非常混乱
.编码起来看起来就非常不好
.所以真实开发中很少直接使用，而是使用jQuery-Ajax

1.2JQuery-Ajax

相对于传统的Ajax非常好用
为什么不选择它呢？
.首先，我们先明确一点：在vue的整个开发中都是不需要使用jQuery了
.那么，就意味着为了方便我们进行网络请求，特意引用一个jQuery，你觉得合理吗？
.jQuery的代码1w+行
.Vue的代码才1w+行
.完全没有必要为了用网络请求就引入重量级的框架

1.3Vue-resource

.Vue-resource的体积相对于jQuery小很多
.另外Vue-resource是官方推出的
为什么不选择它呢？
.在Vue2.0退出后，Vue作者就在GitHub的Issues中说明了去掉vue-resource,并且以后也不在更新
.那么意味着以后vue-resource不再支持新的版本时，也不会再继续更新和维护
.对以后的项目开发和维护都存在很大的隐患

1.4axios（当前推荐的）

为什么选择它呢？
.axios有非常多的优点，并且用起来也非常方便

功能特点：
.在浏览器中发送XMLHttpRequest请求
.在node.js中发送http请求
.支持Promise API
.拦截请求和响应
.转换请求和响应数据

2.axios相关使用

1.安装相关的插件

npm install axios  --save

2.axios简单使用

import axios from "axios";

axios({
  url:'http://123.207.32.32:8000/home/multidata',
  method:'get'
}).then(res=>{
  console.log(res);
})

axios({
  url:'http://123.207.32.32:8000/home/data',
  method:'get',
  params:{
    type:'sell',
    page:3
  }
}).then(res=>{
  console.log(res);
})

//设置默认连接前缀
axios.defaults.baseURL='http://123.207.32.32:8000'
//设置默认的超时时间
axios.defaults.timeout=5000
axios.all([axios({
  url:'http://123.207.32.32:8000/home/multidata',
}),axios({
  url:'http://123.207.32.32:8000/home/data',
  params:{
    type:'sell',
    page:3
  }
})]).then(results=>{
  console.log(results);
})

3.axios设置多个默认的地址

const  instance1=axios.create({
  baseURL:"http://123.207.32.32:8000",
  timeout:5000
})

const  instance2=axios.create({
  baseURL:"http://123.207.32.32:8000",
  timeout:6000
})

instance1({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
})

instance2({
  url:"/home/data",
  params:{
    type:'sell',
    page:3
  }
}).then(results=>{
  console.log(results);
})

4.axios对网络请求的封装

4.1 在src里面创建network的文件夹，在里面创建一个request.js的文件

4.2 在request.js创建网络请求的代码

import axios from "axios";

//方法一
export function request(config,success,failure) {
  //1.创建axios的实例
  const instance=axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  })

  //发送真正的网络请求
  instance(config)
    .then(res=>{
     /// console.log(res);
      success(res)
    }).catch(err=>{
    //console.log(err);
    failure(err)
  })

}

//方法二
/*export function request(config) {
  return new Promise((resolve,reject)=>{
      //1.创建axios的实例
  const instance=axios.create({
    baseURL:"http://123.207.32.32:8000",
    timeout:5000
  })

  //发送真正的网络请求
  instance(config)
    .then(res=>{
       resolve(res)
    }).catch(err=>{
        reject(err)
  })

  })
}*/

export function request(config) {
    //1.创建axios的实例
    const instance=axios.create({
      baseURL:"http://123.207.32.32:8000",
      timeout:5000
    })

    //发送真正的网络请求
    return instance(config)

}

43 在外部进行调用创建网络请求的方法

//方法一(4.2方法1)
//5.封装request模块
import {request} from "./network/request";
request({
  url:'/home/multidata'
},res=>{
  console.log(res);
},err=>{
  console.log(err);
})

//方法二(4.2方法2)
//5.封装request模块
import {request} from "./network/request";
request({
  url:'/home/multidata'
}).then(res=>{
  console.log(res);
}).catch(err=>{
  console.log(err);
})