第 8 节 axios

jsonp

axios

定义：axios就是一种 前端向后端发送网络请求 的工具。
功能特点：
（1）在浏览器中发送 XMLHttpRequests 请求
（2）在node.js 中发送 http 请求
（3）支持 Promise API
（4）拦截请求和响应
（5）转换请求和响应数据，等等

axios框架的基本使用

// 1.没有请求参数
axios({
  url: 'http://123.207.32.32:8000/home/multidata',

  // axios(),默认是get请求,可以通过method来设置请求方式
  // method: 'post'

}).then(res => {
  // 在then里面拿到想要的结果
  console.log(res);
})

// 2.有请求参数
axios({
  url: 'http://123.207.32.32:8000/home/data',
  //专门针对get请求的参数拼接
  params: {
    type: 'pop',
    page: 1
  }
}).then(res => {
  console.log(res);
})

axios发送并发请求

axios的相关配置

注： 不同请求，传入的对象需要对应
（1）get请求，传入params
（2）post请求，传入data

axios的实例和模块封装

axios的实例

前面均是使用 全局的 axios和对应的配置在进行网络请求。

// 创建对应的axios的实例
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/data',
  params: {
    type: 'sell',
    page: 2
  }
}).then(res => {
  console.log(res);
})

模块封装

模块封装 就是为了能够在项目中，不要直接使用第三方框架。
在封装好的模块中使用第三方框架，而其他的网络请求仅向封装好的模块进行交互，可以有效避免当第三方框架被废弃时，程序需要做大规模改动。

axios的拦截器

request.js文件中的代码

import axios from 'axios'

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

  // 2.axios的拦截器
  //2.1 请求拦截
  axios.interceptors.request.use(config => {
    // console.log(config);
    //1.比如config中的一些信息不符合服务器的要求

    //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标

    //3.某些网络请求(比如登录(token))，必须携带一些特殊的信息

    return config
  }, err => {
    // console.log(err);
  })


  // 2.2 响应拦截
  instance.interceptors.response.use(res => {
    // console.log(res);
    return res
  }, err => {
    // console.log(err);
  })


  //3.发送真正的网络请求
  //instance返回的就是一个Promise
  return instance(config)
}