功能特点

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

请求方式

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]])

安装和导入

安装

npm install --save axios vue-axios
yarn add axios vue-axios

导入

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

基本使用

当不写入请求方式的时候，默认为get

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

get请求的参数拼接

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

并发请求

有时候，可能需要同时发送两个请求

使用axios.all，可以放入多个请求的数组
axios.all([])返回的结果是一个数组，使用axios.spread可将数组[res1,res2]展开为res1,res2

//axios.all([axios(),axios()])

axios.all([axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }), axios({
    url: 'http://123.207.32.32:8000/home/data',
    method: 'get',
    params: {
      type: 'pop',
      page: 1
    }
  })])
  .then(results => {
    console.log(results)
  })

使用axios.spread展开数组

axios.all([axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }), axios({
    url: 'http://123.207.32.32:8000/home/data',
    method: 'get',
    params: {
      type: 'pop',
      page: 1
    }
  })])
  .then(axios.spread((res1, res2) => {
    console.log(res1)
    console.log(res2)
  }))

axios实例

为什么要创建实例？

在从axios模块中导入对象时，使用的实例是默认的实例，当给该实例设置一些默认配置时，这些配置就被固定下来了，但是后续开发中，某些配置可能会不一样。比如：可能会访问多个服务地址，而这些服务请求和响应的结构也可能都完全不同，那么可以通过axios.create创建不同的实例来处理。
比如axios1是用http状态码确定响应是否正常，而axios2是服务器自己定义的状态码，又或者他们请求头不一样，使用特定的baseURL、timeout或者content-Type等。

全局配置

在开发中，有很多参数都是固定的，这个时候可以进行一抽取，也可以利用axios的全局配置。

//例子：对baseURL和timeout进行全局配置
axios.defaults.baseURL = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000

常见的配置选项

请求地址

url: '/user'

请求类型

method: 'get'

请求路径

baseURL: 'http://www.mt.com/api'

请求前的数据处理

transformRequest:[function(data){}]

请求后的数据处理

transformResponse:[function(data){}]

自定义的请求头

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

URL查询对象

params:{id:12}

查询对象序列化函数

paramsSerializer:function(params){}

request body

data:{key:'aa'}

超时设置

timeout: 1000

跨域是否带Token

withCredentials:false

自定义请求处理

adaoter:function(resolve,reject,config){}

身份验证信息

auth:{uname:'',pwd:'123'}

响应的数据格式json/blob/document/arraybuffer/text/stream

responseType:'json'

创建实例

const instance1 = axios.create()

具体使用

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

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

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

若有两个请求接口，则再创建一个实例

const instance2 = axios.create()

axios框架的使用