网络模块封装axios

选择什么网络模块?

模块的选择

• XMLHttpRequest(XHR)
• jQuery-Ajax
• Vue-resource
• axios（推荐）

选择一: 传统的Ajax是基于XMLHttpRequest(XHR)
配置和调用方式等非常混乱，真实开发中很少直接使用, 而是使用jQuery-Ajax

选择二: 在前面的学习中, 我们经常会使用jQuery-Ajax
相对于传统的Ajax非常好用.但 在Vue的整个开发中都是不需要使用jQuery了.
那么, 就意味着为了方便我们进行一个网络请求, 特意引用一个jQuery,完全没有必要为了用网络请求就引用这个重量级的框架.

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

选择四:axios
在说明不再继续更新和维护vue-resource的同时, 作者还推荐了一个框架: axios它有非常多的优点, 并且用起来也非常方便.
功能特点:
在浏览器中发送 XMLHttpRequests 请求
在 node.js 中发送 http请求
支持 Promise API
拦截请求和响应
转换请求和响应数据

jsonp

在前端开发中, 我们一种常见的网络请求方式就是JSONP
使用JSONP最主要的原因往往是为了解决跨域访问的问题.

JSONP的原理是什么呢?
JSONP的核心在于通过<script>标签的src来帮助我们请求数据.
原因是我们的项目部署在domain1.com服务器上时, 是不能直接访问domain2.com服务器上的资料的.
这个时候, 我们利用<script>标签的src帮助我们去服务器请求到数据, 将数据当做一个javascript的函数来执行, 并且执行的过程中传入我们需要的json.
所以, 封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称.

let count = 1
export default function originPJSONP(option) {
  //1.从传入的option中提取url
  const url = option.url;

  //2.在body中添加script标签
  const body = document.getElementsByTagName('body')[0]
  const script = document.createElement('script');

  //3.内部生产一个不重复的callback
  const callback = 'jsonp' + count++

  //4.监听window上的jsonp的调用
  return new Promise((resolve, reject) => {
    try {
      window[callback] = function (result) {
        body.removeChild(script);
        resolve(result)
      }
      const params = handleParam(option.data);
      script.src = url + '?callback=' + callback + params;
      body.appendChild(script)
    } catch (e) {
      body.removeChild(script)
      reject(e)
    }
  })

}

function handleParam(data) {
  let url = ''
  for (let key in data) {
    let value = data[key] !== undefined ? data[key] : ''
    url += `&${key}=${encodeURIComponent(value)}`
  }
  return url
}

axios的使用

1.安装axios
在项目下 npm install axios --save（save开发上线 save-dev开发时）

<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

2.导入
import axios from 'axios'

3.axios的基本使用

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

axios发送并发请求

有时候, 我们可能需求同时发送两个请求
使用axios.all, 可以放入多个请求的数组.
axios.all([])返回的结果是一个数组，使用 axios.spread可将数组 [res1,res2] 展开为 res1, res2

// 2.axios发送并发请求
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: 5
  }
})]).then(results => {
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})

// 3.使用全局的axios和对应的配置在进行网络请求
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/home/multidata'
}), axios({
  url: '/home/data',
  params: {
    type: 'sell',
    page: 5
  }
})]).then(axios.spread((res1, res2) => {
  console.log(res1);
  console.log(res2);
}))

axios全局配置

在上面的示例中, 我们的BaseURL是固定的
事实上, 在开发中抽取固定配置，利用axiox的全局配置

当我们使用第三方框架的时候，一定要封装。
比如每个页面组件都有对axios进行网络请求，每个页面都采用import方式直接导入模块，一旦axios停止维护，改起来非常麻烦。所以把框架抽离出去，用封装来导入。便于后期维护。
把axios进行网络请求相关操作都放到network文件夹下，并对其进行封装。以后再改代码，只改这个封装代码即可。便于后期维护。

axios代码详解及拦截器视频

//1
main.js:
// 封装request模块
import { request } from "./network/request";

request({
  url: '/home/multidata'
}, res => {
  console.log(res);
}, err => {
  console.log(err);
})

//request.js
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)
    })
}
//2
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })

  // 发送真正的网络请求
  instance(config.baseConfig)
    .then(res => {
      // console.log(res);
      config.success(res);
    })
    .catch(err => {
      // console.log(err);
      config.failure(err)
    })
}
//3
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)
      })
  })
}

//4    根据axios源码，instance返回类型AxiosPromise 可进一步直接return
export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://123.207.32.32:8000',
    timeout: 5000
  })
  // 3.发送真正的网络请求
  return instance(config)
}

函数回调

//函数回调
function test(aaa, bbb) {
  // aaa('Hello World')
  bbb('err message')
}

test(function (res) {
  console.log(res);
}, function (err) {
  console.log(err);
})
/*
以上代码相当于 给test的两个参数传递函数
aaa=function (res) {
  console.log(res);
}
bbb=function (err) {
  console.log(err);
}
*/

axios拦截器的使用

import axios from 'axios'

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

  // 2.axios的拦截器
  // 2.1.请求拦截的作用
  instance.interceptors.request.use(config => {
    // console.log(config);
    // 1.比如config中的一些信息不符合服务器的要求

    // 2.比如每次发送网络请求时, 都希望在界面中显示一个请求的图标

    // 3.某些网络请求(比如登录(token)), 必须携带一些特殊的信息
    return config
  }, err => {
    // console.log(err);
  })

  // 2.2.响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res.data
  }, err => {
    console.log(err);
  })

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

//main.js中
request({
  url: '/home/multidata'
}).then(res => {
  console.log(res);
}).catch(err => {
  // console.log(err);
})

如何使用拦截器？
axios提供了拦截器，用于我们在发送每次请求或者得到相应后，进行对应的处理。

拦截器做什么？

• 

• 请求拦截中错误拦截较少，通常都是配置相关的拦截。
  可能的错误比如请求超时，可以将页面跳转到一个错误页面中。

• 响应的成功拦截中，主要是对数据进行过滤。

• 响应的失败拦截中，可以根据status判断报错的错误码，跳转到不同的错误提示页面。

• 

参考链接：
axios中文文档
axios，ajax，fetch比较