• axios功能特点

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

安装 axios

npm install axios --save

axios 基本使用

import axios from 'axios';
axios({
  url: 'http://127.0.0.1:8080/home/multidata',
  method: 'get' // 不指定method时： 默认get请求
}).then(res => {
  console.log(res);
})

axios 发送并发请求

axios.all([axios({
  url: 'url1',
  params: {
    请求参数1: '参数1',
    请求参数2: '参数2'
  }
}),axios({
  url: 'url2',
  params: {
    请求参数1: '参数1'
  }
})]).then(results => {
  console.log(results);
})
/**
发送并发请求，例如这里的两个，
返回的数据results是一个数组
results[0] === url1  的返回数据
results[1] === url2  的返回数据
*/

axios.spread

axios.all([axios({
  url: 'url1',
  params: {
    请求参数1: '参数1',
    请求参数2: '参数2'
  }
}),axios({
  url: 'url2',
  params: {
    请求参数1: '参数1'
  }
})]).then(axios.spread((res1,res2) =>{
  console.log(res1)
  console.log(res2);
}))

axios配置信息

1. 全局配置

• 实际上，开发中可能很多参数都是固定的，比如 url前缀
• 这时候可以进行一些抽取，可以利用axios的全局配置

axios.defaults.baseURL = 'http://127.0.0.0:8080'   //设置公共url
axios.defaults.timeout = 5000   //设置请求超时时间，单位毫秒

• 常见配置选项

• 请求地址
• url: '/user'
• 请求类型
• method: 'get'
• 请求根路径
• baseURL: http://127.0.0.0:8080'
• 请求前数据处理
• transformRequest: [function(data){}]
• 请求后数据处理
• transfromResponse: [function(data){}]
• 自定义请求头
• headers: {'x-Requested-With':'XMLHttpRequest'}
• URL查询对象
• parms: {id: 12}
• 查询对象序列化函数
• paramsSerializer: function(params){}
• request body
• data: {key: 'value'}
• 超时设置(单位毫秒)
• timeout: 1000
• 跨域是否携带Token
• wihtCredemtials: false
• 自定义请求处理
• adapter: function(resolve, reject, config)()
• 身份验证信息
• auth: {uname: 'uname', pwd: '123'}
• 响应的数据格式 json/blob/document/arraybuffer/text/stream
• responseType: 'json'

axios 的实例

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

//使用axios.create创建实例
const instance1 = axios.create({
  baseURL: 'http://127.0.0.0:8080', //传入公共接口地址
  timeout: 5000   //设置此实例得超时时间
})

//使用实例
instance1({
  url: '/home/multidata'
}).then(res =>{
  console.log(res);
});

instance1({
  url: '/home/data',
  params: {   //传入请求参数，params是针对于get请求得
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})
//如果有其他请求需要用到其他的配置，这时候就可以使用axios.create创建其他实例

封装一个网络请求模块

/**
 *  /src/network/request.js
 	config: 
 	这个模块只负责网络请求，对于数据处理交给调用该模块的组件传入的回调函数处理
 */
/**
 *  /src/network/request.js
 */
import axios from 'axios';

// 封装方式1
// export function request(config) {
//   return new Promise(((resolve, reject) => {
//
//     //1.创建axios实例
//     const instance = axios.create({
//       baseURL: 'http://152.136.185.210:8000',
//       timeout: 5000
//     });
//
//     //发送网络请求
//     instance(config)
//       .then(res => {
//         resolve(res);
//       })
//       .catch(err => {
//         reject(err);
//       })
//   }))
// }

//封装方式2
export function request(config) {
  //1. 创建axios实例
  const instance = axios.create({
    baseURL: 'http://127.0.0.0:8080',
    timeout: 5000
  })
  // 发送网络请求
  return instance(config); //他本身的返回值就是一个promise
    //所以直接返回它
}

<template>
  <div id="app">
    <p>{{results}}</p>
  </div>
</template>
<script>
  import {request} from './network/request'
export default {
  name: 'App',
  data(){
    return {
      results: ''
    }
  },
  created() {
      //上面两种封装方式不影响这个地方的使用
    request({
      url: '/home/multidata'
    }).then(res =>{
      this.results = res;
    }).catch(err =>{
      console.log(err);
    })
  }
}
</script>

axios拦截器的使用

1. 全局拦截

axios.interceptors.request.use()

2. 拦截当前实例

instance.interceptors.request.use

• 拦截器的作用
• 比如config中的一些信息不符合服务器要求
• 比如每次发送网络请求，都希望在界面中显示一个请求的图标
• 某些网络请求必须携带一些特殊信息，比如登陆 token
• 请求拦截 instance.interceptors.request.use

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

  //请求拦截
  instance.interceptors.request.use(config => {
    //console.log(config);
    //必须返回config
    return config;
  }, err => {
    //console.log(err);
  })

  //响应拦截
  instance.interceptors.response.use(res => {
    console.log(res);
    return res.data;
  }, err => {
    console.log(err);
  })
    
  // 3. 发送网络请求
  return instance(config);
}

戳我看VueX使用干货