网络请求库-axios

认识axios库

有了原生网络请求为什么还需要axios库

Vue作者推荐：

在这里插入图片描述

axios库功能特点:

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

补充: axios名称的由来?

axios发送请求

支持多种请求方式:

有时候,我们可能需求同时发送两个请求

常见的配置选项：

在这里插入图片描述

axios基本使用

axios基本演练

1.安装axios

2.在需要发送网络请求的地方使用axios就可以发送网络请求：

（1）通过request发送get请求：

import axios from 'axios'

// request函数返回一个Promise, 当请求有结果, 内部会自动调用resolve
axios.request({
// 配置请求url地址
url: "http://123.207.32.32:8000/home/multidata",
// 配置请求方式, 不写默认也是get请求
method: "get"
}).then(res => {
// 直接拿到结果是axios默认给我们返回的配置对象
// 如果想单纯拿到服务器的数据需要 .date
console.log(res.data)
})

（2）通过request发送post请求：

import axios from 'axios'

axios.request({
url: "http://123.207.32.32:1888/02_param/postjson",
method: "post",
// 传入请求体
data: {
 name: "sevgilid",
 password: "aaa123"
}
}).then(res => {
console.log(res.data)
})

（3）通过get函数直接发送get请求

import axios from 'axios'

// get函数传入两个参数, 参数1: url地址, 参数2: 配置信息
axios.get("http://123.207.32.32:9001/lyric", {
// 传入查询字符串
params: { id: 500665346 }
}).then(res => {import axios from 'axios'

// post函数传入三个参数, 第一个url, 第二个请求体, 第三个配置信息
axios.post("http://123.207.32.32:1888/02_param/postjson", {
name: "kaisa",
password: "aaa123"
}).then(res => {
console.log(res.data)
})
console.log(res.data)
})

（4）通过post函数发送post请求

import axios from 'axios'

// post函数传入三个参数, 第一个url, 第二个请求体, 第三个配置信息
axios.post("http://123.207.32.32:1888/02_param/postjson", {
name: "kaisa",
password: "aaa123"
}).then(res => {
console.log(res.data)
})

配置baseURL

我们来看如下例子:

在每次网络请求时, 都写一遍是非常繁琐的, 我们可以通过baseURL将相同的地址抽离出去

import axios from 'axios'

// 1.抽离到baseURL变量中
const baseURL = "http://123.207.32.32:8000"

// 给axios实例配置公共的基础配置
// 2.配置公共的请求地址baseURL
axios.defaults.baseURL = baseURL
// 补充: 此外还可以配置公共的 超时时间... 等等
axios.defaults.timeout = 10000

// 此时发生请求就不需要传入完整的url
axios.get("/home/multidata").then(res => {
console.log(res.data)
})

axios创建实例

我们导入的axios就是默认axios的实例, 既然有了默认的实例为什么要创建axios的实例呢?

// axios创建实例好处：
        // -如与多个服务器进行沟通，不止一个实例
        // -实例设置一些默认配置时, 这些配置就被固定；如timeout这些
// crete函数创建axios实例
const instance1 = axios.create({
    // 创建axios实例可以进行公共的配置信息, 且这些配置只针对当前实例
    baseURL: "http://123.207.32.32:9001",
    timeout: 6000,
    headers: {}
  })
  
  // 当baseURL的请求地址不一样时, 可以再创建一个实例
  const instance2 = axios.create({
    baseURL: "http://123.207.32.32:8000",
    timeout: 10000
  })
  
  // 实例1发送网络请求
  instance1.get("/lyric", {
    params: {
      id: 500665346
    }
  }).then(res => {
    console.log(res.data)
  })
  
  // 实例2发送网络请求
  instance2.get("/home/multidata").then(res => {
    console.log(res.data)
  })

axios发送多个请求（了解）

import axios from 'axios'

// 同时发生多个网络请求
axios.all([
axios.get("/home/multidata"),
axios.get("http://123.207.32.32:9001/lyric?id=500665346")
]).then(res => {
console.log(res)
})

axios请求和响应拦截器

axios的也可以设置拦截器, ：拦截每次请求和响应

1.请求拦截格式: axios.interceptors.request.use(请求成功回调拦截, 请求失败回调拦截)

import axios from 'axios'

axios.interceptors.request.use((config) => {
console.log("请求成功的拦截, 可以通过config修改配置信息")
// 修改了配置信息需要再将配置信息返回出去
return config
}, (err) => {
console.log("请求失败的拦截")
return err
})

2.响应拦截格式: axios.interceptors.response.use(响应成功回调拦截, 响应失败回调拦截)

3.请求和响应拦截常见操作

axios请求封装（简洁）

axios非常好用, 当我们在多个组件中需要发生网络请求的时候, 多个组件都需要导入axios实例, 再通过axios实例发送网络请求

封装源码：

import axios from 'axios'

class MyRequest {
  constructor(baseURL, timeout=10000) {
    this.instance = axios.create({
      baseURL,
      timeout
    })
  }
//使用this来指向当前创建的实例对象
//1.封装request
  request(config) {
   // 返回一个Promise, 对数据转换
    return new Promise((resolve, reject) => {
      this.instance.request(config).then(res => {
        resolve(res.data)
      }).catch(err => {
        reject(err)
      })
    })
  }
//2.封装get
  get(config) {
    return this.request({ ...config, method: "get" })
  }
  
//3.封装post
  post(config) {
    return this.request({ ...config, method: "post" })
  }
//后面也可以在这里创建更多的方法，方式是差不多的
}

export default new MyRequest()
//这里导出的是一个实例对象，然后你也可以创建多个实例对象导出去，这个就是比较简单了