axios网络请求 | 路无尽头

# axios的安装

1.项目中安装axios

npm install axios --save

# axios的基本使用

# 1.import导入axios。

  import axios form 'axios'

# 2.发送基本请求，因为axios支持promise所以使用.then可以拿到数据，以下方法默认发送get请求。

  axios({
    url:'https://www.baidu.com'
  }).then(res=>{
    console.log(res)
  })

1
2
3
4
5

# 3.我们可以根据在axios中设置method发送不同种类的请求,例如post发送post请求。

  axios({
    url:'https://www.baidu.com',
    method:'post'
  }).then(res=>{
    console.log(res)
  })

1
2
3
4
5
6

# axios发送并发请求

# 使用axios.all()，返回结果是一个数组，也可以使用axios.spread()将两数组展开：

  axios.all([
    axios({
    url:'https://www.baidu.com'
  }),axios({
    url:'https://www.baidu.com/message'
  })]).then(res=>{
    console.log(res) //此处打印的为两个结果的数组
  })

1
2
3
4
5
6
7
8

# axios使用全局配置

# 使用axios.defaults.设置全局配置。

  axios.defaults.baseURL = 'https://www.baidu.com'
  axios({
    url:'/message', //这里获取的便是https://www.baidu.com/message这个url
    method:'post'
  }).then(res=>{
    console.log(res)
  })

1
2
3
4
5
6
7

# axios的实例

# 在进行项目开发时，我们也许需要从多个服务器请求数据，这时候我们设置全局URL可能会影响我们后续发送的请求，所以我们一般会创建多个axios实例来发送请求。代码如下：

  //创建实例instance1
  const instance1 = axios.create({
    baseURL:'https://www.baidu.com'
  })
  //使用实例
  intance1({
    url:'/message'
  }).then(res=>{
    console.log(res)
  })

1
2
3
4
5
6
7
8
9
10

# axios模块化封装

# 在vue项目开发过程中，如果我们在每个组件中都使用axios分别发送网络请求，当该第三方框架发生重大bug或者不再维护时，我们便需要将所有文件都进行修改，大大增加了我们的工作任务，所以我们一般在单独一个文件中进行封装，后续如果出现错误，可只修改一个文件，从而减少工作量。

新建一个js文件，导入axios，默认暴露request函数，如果需要多个不同请求，可声明多个函数。
在我们需要的导入js文件，同时使用request函数，函数拥有.then.catch方法。