axios

目录

1.网络请求模块的选择

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

配置和调用混乱，所以不用

选择二：jQuery-Ajax

在Vue的整个开发中都不需要使用jQuery

jQqery的代码1w+行，没必要用这样一个重量级的框架

选择三：官方在Vue1.x的时候推出了Vue-resource

Vue-resource的体积相对于jQuery小很多

但是作者已经不维护了

选择四：axios框架

功能：

在浏览器中发送XMLHttpRequest请求

在node.js中发送http请求

支持Promise API

拦截请求和响应

转换请求和响应数据

2.axios框架的基本使用

默认是get 方法

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

axios({
  url: 'http://httpbin.org/post',
  method: 'post'
}).then(res => {
  console.log(res)
})

axios处理并发请求

使用axios.all，可以放入多个请求的数组

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

也可以这样写 

axios.all([axios({
  url: 'http://httpbin.org/get'
}), axios({
  url: 'http://httpbin.org/post',
  method: 'post'
})]).then((res1, res2) => {
  console.log(res1)
  console.log(res2)
})

3.全局配置

在开发中，可能很多参数都是固定的

我们可以做一些抽取，也可以用axios的全局配置

axios.defaults.baseURL = 'http://httpbin.org'
axios.defaults.timeout = 5000

axios.all([axios({
  url: '/get'
}), axios({
  url: '/post',
  method: 'post'
})]).then((res1, res2) => {
  console.log(res1)
  console.log(res2)
})

常见的配置选项

请求地址：url:'/user'

请求类型：method:'get'

请求根路径：baseURL:' '

URL查询对象：params:{id:12}

请求体：data: {key:'aa'}

超时设置： timeout: 1000

在使用axios时，注意配置选项中params和data的区别

因为params是添加到url的请求字符串中的，用于get请求

而data是添加到请求体（body）中的， 用于post请求

4.axios的实例

为什么要创建axios实例？

我们从axios模块导入对象时，使用的实例时默认的实例

但是在后续的开发中，不同请求需要使用的配置不一样，比如baseURL

这个时候，我们需要创建新的实例，传入该请求的配置信息

const instance1 = axios.create({
  baseURL: 'http://httpbin.org',
  timeout: 5000
})

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

instance1({
  url: '/post',
  method: 'post'
}).then(res => {
  console.log(res)
})

const instance2 = axios.create({
  baseURL: 'http://123.207.32.32',
  timeout: 1000
})

instance2({
  url:''
}).then()

封装网络请求 

新建network文件夹，并建立request.js文件

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

main.js中这样写

import {request} from "../network/request";

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

另一种写法

 request.js

export function request(config) {
  const instance = axios.create({
    baseURL: 'http://httpbin.org',
    timeout: 5000
  })
  instance(config.baseconfig)
    .then(res => {
      config.success(res)
    }).catch(err => {
    config.failure(err)
  })
}

 main.js

import {request} from "../network/request";

request({
  baseconfig: {
  },
  success: {
  },
  failure: {
  }
})

推荐写法

request.js

export function request(config) {
  return new Promise((resolve, reject) => {
    const instance = axios.create({
      baseURL: 'http://httpbin.org',
      timeout: 5000
    })
    instance(config)
      .then(res => {
        resolve(res)
      })
      .catch(err => {
        reject(err)
    })
  })
}

简写版 

export function request(config) {
    const instance = axios.create({
      baseURL: 'http://httpbin.org',
      timeout: 5000
    })
    return instance(config)
}

 main.js

import {request} from "../network/request";

request({
  url: '/get'
}).then(res => {
  console.log(res)
}).catch(err => {
  console.log(err)
})

5.axios的拦截器

拦截器用于我们在每次发送请求或得到响应后，进行对应的处理

request.js

export function request(config) {
    const instance = axios.create({
      baseURL: 'http://httpbin.org',
      timeout: 5000
    })
    //axios的拦截器
    //请求拦截
    instance.interceptors.request.use(config => {
      console.log(config)
      //1.config中的一些信息不符合服务器端要求，所以拦截下来处理
      //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
      //3.某些网络请求(比如登陆(token)),必须携带一些特殊的信息
      return config
    }, err => {
      console.log(err)
    })
    //响应拦截
    instance.interceptors.response.use(res => {
      console.log(res.data)
      return res.data
    }, err => {
      console.log(err)
    })

    return instance(config)
}