网络请求axios

一、网络请求：

1.ajax：Ajax是 Asynchronous JavaScript and XML的缩写，基于XMLHttpRequest（XHR）。区别于传统web开发中采用的同步方式。Ajax带来的最大影响就是页面可以无刷新的请求数据。缺点是配置和调用方式太混乱，封装过程复杂，bug出现频率高。

2.jQuery-Ajax：封装更好，使用更加方便。但是vue项目中不需要jQuery，若只是网络请求使用该方式那么需要引用一个jQuery，因此没有必要引用该重量级的框架。

3.vue-resource：vue1.x版本的时候官方推出，但是在vue2.0宣布退出并且不再更新。因此许多特新不能同步新版本，功能也落后。

4.axios：vue2.0之后官方宣布使用的方式，并且当前也在更新中。Ajax i/o system的简称。axios不是一种新的技术。axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范

5.fetch：fetch是前端发展的一种新技术产物。Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。fetch代表着更先进的技术方向，但是目前兼容性不是很好，在项目中使用的时候得慎重。

jsonp是前端常用的网络请求数据传送方式，主要是为了解决跨域访问的问题。封装jsonp的核心在于监听window上的jsonp进行回调的名称。

 

二、axios的多种网络请求方式

（1）axios（config），（2）axios.request（config），（3）axios.get（url [，config]），（4）axios.delete(url [, config])，（5）axios.head(url [, config])，（6）axios.post(url [, data [, config]])，（7）axios.put(urln [, data[, config]])， （8）axios.patch(url [, data [, config]])

使用步骤：（1）安装 npm install axios --save   （2）导入框架import axios from 'axios'  (3)调用上述的网络请求方式

axios支持promise，返回的是一个promise对象，axios 依赖原生的 ES6 Promise 实现而被支持，因此可以异步操作.then。

axios支持跨域。

请求配置，config是一个对象，可以用的配置选项参考http://www.axios-js.com/zh-cn/docs/#%E8%AF%B7%E6%B1%82%E9%85%8D%E7%BD%AE

请求服务器返回的数据，即请求的响应解构可参考：http://www.axios-js.com/zh-cn/docs/#%E5%93%8D%E5%BA%94%E7%BB%93%E6%9E%84，下面是一个实例。其中服务器真正返回的数据是里面的data。

三、处理并发请求的助手函数

axios.all(iterable)和promise.all方法一样，可以并发请求。

axios.spread(callback)

四、全局配置

axios.defaults

五、网络请求接口封装

1.使用全局的axios以及对应的配置进行网络请求

import axios from 'axios'
axios.defaults.baseURL='http://123.207.32.32:8000'
axios.defaults.timeout=5000
axios.all([axios({    // 上面的两个全局设置会对下面的其效果，那么url将拼接在全局上面
url:'/home/multidata'
}),axios({
url:'/home/data',
params:{
        type: 'sell',
        page:5
}
})]).then(axios.spread((res1,res2)=>{
           console.log(res1),
           console.log(res2)
}))

2.创建axios的实例

const instance1 = axios.create({
  baseURL: 'http://123.207.32.32:8000',
  timeout: 5000
})
instance1({
url: '/home/mutidata'
).then(res=>console.log(res))

instance1({
url: '/home/data',
params:{type: 'pop',
        page: 1
        }
).then(res=>consloe.log(res))

const instance2 = axios.create({  // 实例化之后，每个实例都有独立的配置
  baseURL: 'http://222.111.33.33:8000'),  
  timeout: 10000
//  headers: {}
})
instance2({
url: '/categories',
params:{type: 'sell',
        page: 6
        }
).then(res=>consloe.log(res))

3.网络请求封装

将网络请求相关的代码单独创建文件夹（比如说创建networks或者api文件夹），然后再里面创建一个request.js的文件封装网络请求，通过export命令导出。

// request.js
import axios from 'axios'

//方式一
export function request(config,success,failure){
// 创建实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
// 发送真正的网络请求
  instance(config)
  .then(res=>success(res))
  .catch(err=>failure(err))

// 方式二,将方式一中的方法也写进config对象中，原来的config变成baseconfig，也就是变成一个整体
export function request(config){
// 创建实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
// 发送真正的网络请求
  instance(config.baseconfig)
  .then(res=>config.success(res))
  .catch(err=>config.failure(err))
}

// 方式三，使用Promise对象进行网络请求，更加广泛。如果不是axios对象而是其他比如Android，只需要替换就行
export function request(config){
   return new Promise(resove,reject){
// 创建实例
      const instance = axios.create({
        baseURL: 'http://123.207.32.32:80000',
        timeout: 5000
       })
// 发送真正的网络请求
      instance(config)
      .then(res=>resove(res))
      .catch(err=>reject(err))
}

// 方式四，axios.create()返回的就是一个Promise对象，利用这个特性所以可以直接返回。
export function request(config){
// 创建实例
   const instance = axios.create({
      baseURL: 'http://123.207.32.32:80000',
      timeout: 5000
   })
// 发送真正的网络请求
   return instance(config)
}

// main.js
// 封装request模块
import {request} from './networks/request';

// 方式一的使用
request(
     {url: '/home/mutidata'},
     res=>console.log(res),
     err=>console.log(err)
)

// 方式二的使用
request({
     baseconfig：{url: '/home/mutidata'},
     success：res=>console.log(res),
     failure：err=>console.log(err)
})

// 方式三的使用
request({
     baseconfig：{url: '/home/mutidata'},
     }).then(res=>console.log(res))
       .catch(err=>console.log(err))

// 方式四的使用
request({
     baseconfig：{url: '/home/mutidata'},
     }).then(res=>console.log(res))
       .catch(err=>console.log(err))

4.拦截器