Vue.js--axios详解

axios

axios是一个基于Promise，同时支持浏览器端和Node.js的HTTP库，常用于Ajax请求。

安装axios

npm install axios --save

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

直接发起GET请求：

import axios from 'axios'

//1. 没有请求参数
axios.get('http://123.207.32.32:8000/home/multidata').then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

//2.有参数
axios.get('http://123.207.32.32:8000/home/data?type=sell&page=3', 
  {params: {type: 'sell', page: 1}})
  .then(res => {
    console.log(res);
  }).catch(err => {
    console.log(err);
  })

基于Promise，可以执行多个并发请求：

使用axios.all([])可以放入多个请求的数组
axios.all([])返回的是一个数组，使用axios.spread可以将数组解构

//发送并发请求

axios.all([
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  }),
  axios({
    url: 'http://123.207.32.32:8000/home/multidata'
  })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log('`````````');
    console.log(res2);
}))

全局配置

在上面的示例中，我们的BaseRUL是固定的

事实上，在开发中可能很多参数都是固定的
这个时候我们可以进行一些抽取，也可以利用axios的全局配置

在这里插入图片描述

常见的配置选项

请求地址：
url:’/user
请求类型：
method:‘get’
请求跟路径：
vaseURL:‘http://www.mt.com/api’
请求前的数据处理：
transformRequest:[function(data){}]
请求后的数据处理：
transformResponse:[function(data){}]
自定义的请求头
headers:{‘x-Requested-With’:‘XMLHttpRequest’}
RUL查询对象
params: {id: 12}

axios实例

当我们从axios模块中导入对象时，使用的实例是默认实例。当给实例设置一些默认配置时，这些配置就被固定下来了。但是后续开发中，某些配置可能会不太一样。比如某些请求需要使用特定的baseRUL或者timeout或者coutent-Type等。这个时候，我们就可以创建新的实例，并且传入属于该实例的配置信息。

在这里插入图片描述