网络模块封装axios

几种网络模块

选择一：传统的Ajax是基于XMLHttpRequest(XHR)

为什么不用：

• 配置和调用方式等混乱
• 编码复杂
• 真实开发很少用

选择二：JQuery-ajax

相对于传统Ajax非常好用

为什么不用：

• vue的整个开发中不需要JQuery
• 为了网络请求特意引用jQuery不方便
• vue的代码比jQuery的代码少

选择三：Vue1.x中推出了Vue-resource

体积小，是官方退出的

为什么不用：

• 在vue2.0以后不在更新维护
• 对以后的项目开发和维护有很大隐患

选择四：axios

使用方便，有非常多优势，在后续中会详细说明

选择五：jsonp

使用这个的主要原因往往是为了解决跨域访问的问题。

jsonp的核心在于通过

<script>

标签的src来帮助我们请求数据，将数据当做JavaScript的函数来执行，并且执行过程中传入我们需要的json，封装jsonp的核心在于我们监听window上的jsonp进行回调时的名称

为什么选择axios

ajax i/o system

• 在浏览器中发送XMLHttpRequests请求
• 在node.js中发送http请求
• 支持PromiseAPI
• 支持拦截请求和响应
• 转换请求和响应数据

一、axios的基本使用

支持多种方式

• axios(config)

• axios.request(config)

• axios.get(url[,config])

• axios.delete(url[,config])

• axios.head(url[,config])

• axios.post(url[,data[,config]])

• axios.put(url[,data[,config]])

• axios.patch(url[,data[,config]])

1.1 安装axios

npm install axios --save

安装后可以在项目任意位置使用axios

1.2 最最简单的使用过程

import axios from \'axios\'axios({url:\'http://httpbin.org/get\',method:\'get\'//请求方式}).then(data =>{console.log(data)})

使用

params

可以拼接url

params:{type:\'pop\',page:1}

1.4 axios.all发送多个并行请求，两个请求都有结果后再执行之后的程序

axios.all([axios({url:\'http://httpbin.org/get\'}),axios({url:\'http://httpbin.org/get\'})]).then(data=>{console.log(data)})

将两个结果进行分割,在then函数中使用

axios.spread

.then(axios.spread((data1,data2))=>{console.log(data1)console.log(data2)})

二、axios的配置信息相关

全局配置

axios.default.timeout=5

设置超时时间，这里的时间是毫秒

一些常用配置选项

• url:\'/user\'

• method:\'get\'

• 请求的根路径：

  baseURL:\'127.0.0.1:8080\'

• 请求前的数据处理：

  transfromRequest:[function(adta){}]

• 请求后的数据处理：

  transformRespond:[function(data){}]

• 自定义的请求头部：

  headers:{\'x-Requested-With\':\'XMLHttpRequest\'}

• URL查询对象：

  params:{id:12}

  get请求会把params中的数据以？的形式拼接在后面

• 相应的数据格式 json/blob/document/arraybuffer/text/steam：

  responseType:\'json\'

三、axios实例

每一个实例有自己的配置，不用使用全局的设定

const instance=axios.create()instance({timeout:5000,baseURL:\'...\'})instance({url:\'...\',}).then((res)=>{console.log(res)})

每一个实例可以自己发送自己的请求处理数据

四、网络请求封装

一般方案

创建一个network目录，在目录下创建request.js文件，所有的网络请求通过这个文件

文件中配置请求的参数和回调函数success和failure

import axios from \'axios\'export function request(config,success,failure){//创建axios的实例const instance =axios.create({timeout:5000})instance(config).then(res=>{console.log(res)success(res)}).catch(res=>{console.log(res)failure(res)})}

在需要发送请求的部分导入request

import {request} from \'../network/request.js\'

网络请求：

request({url:\'http://httpbin.org/get\'},res=>{console.log(res)},err=>{console.log(err)})

终极方案：return Promise

在request.js文件中：

import axios from \'axios\'export function request(config){//创建axios的实例return new Promise((resolve,reject)=>{const instance =axios.create({timeout:5000})instance(config).then(res=>{// console.log(res)resolve(res)}).catch(res=>{// console.log(res)reject(res)})})}

返回一个Promise对象，因此还可以简化：

import axios from \'axios\'export function request(config,success,failure){//创建axios的实例const instance =axios.create({timeout:5000})return instance(config)}

这个instance是axios的实例，所以instance自己就是一个promise的对象，直接返回这个Promise对象就可以了

使用时：

request({url:\'http://httpbin.org/get\'}).then(res=>{console.log(res)}).catch(res=>{console.log(res)})

五、axios的拦截器

用于我们每次请求或者得到响应后们进行对应的处理

5.1请求拦截

instance.interceptors.request.use(res=>{//发送成功，把配置拦截下来console.log(res)//把配置信息还回去return res},err=>{//没有发送出去，比如网络有问题的时候console.log(err)})

一般用在请求时要配置或者转化一些东西；还可以在每次发送请求时在界面显示一个请求的图标或者动画；还有一些网络请求（比如有些请求必须登录），必须携带一些特殊的信息

5.3响应拦截

instance.interceptors.response.use(res=>{//去除一些没有用的数据，只返回我们要的datareturn res.data},err=>{console.log(err)})