在 vue 中 axios 的简单使用

在使用 axios 时需要导入axios

import axios from 'axios'

axios的基础使用

// axios 基本使用
axios({
  url:'http://？？？？？？？？？？？？？？/home/multidata',  // 请求的链接
  // method:'post'     // 请求的方式 get 或 post ，默认是 get
}).then(res => {  // 接受请求成功返回的数据
  console.log(res);
}).catch(err => {  // 接受请求失败返回的数据
  console.log(err);
})

axios在发送请求时需要发送参数

// axios在发送请求时需要发送参数
axios({
  url:'http://？？？？？？？？？？？？/home/multidata',
  params:{    // 需要发送的参数
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

配置全局的 axios 进行网络请求

在项目中，我们会发送多次axios请求，而请求的链接地址基本是一样的，这是我们就可以配置全局的axios

// 使用全局的 axios 和 对应的配置在进行网络请求
axios.defaults.baseURL = "http://？？？？？？？？？" // 全局配置 固定的 baseURL
axios.defaults.timeout = 5000    // 配置请求超时时间

//  ...... 或者其他的全局配置


axios({
  url:'/home/data',   // 这里只需要填写后面的链接就行
  params:{    // 需要发送的参数
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

axios发送并发请求

有时候在项目中需要同时发送多个请求

// 使用全局的 axios 和 对应的配置在进行网络请求
axios.defaults.baseURL = "http://？？？？？？？？？" // 全局配置 固定的 baseURL
axios.defaults.timeout = 5000    // 配置请求超时时间


// axios 发送并发请求
// 第一种方法
axios.all([axios({   // 发送第一个请求
  url:'/home/multidata',
}),axios({
  url:'/home/data',   // 发送第二个请求
  params:{
    type:'pop',
    page:1
  }
})]).then(results => {   // 在这里接收 两个请求返回来的数据
  console.log(results);
  console.log(results[0]);
  console.log(results[1]);
})
// 第二种方法
axios.all([axios({
  url:'http://？？？？？？？？？/home/multidata',
}),axios({
  url:'http://？？？？？？？？？/home/data',
  params:{
    type:'pop',
    page:1
  }
})]).then(axios.spread((res1, res2) => {  // 使用 axios.spread((res1, res2) 分别接收 两个请求返回来的数据
  console.log(res1);
  console.log(res2);
}))

创建对应的 axios 的实例

在项目中可能我们发送请求时，要发送的请求地址不同，其他配置也可能不同；

例如：

        在首页中发送的地址是http://？？？？？？？？  ，

        在其他页面发送的请求是http://1111111111111  。

这时就可以通过创建对应的 axios 的实例来实现

// 创建对应的 axios 的实例
// 创建了一个 instaancel 实例
const instaancel = axios.create({
  baseURL:'http://？？？？？？？？？',
  timeout:5000
})
instaancel({
  url:'/home/multidata'
}).then(res => {
  console.log(res);
})

// 创建了一个 aabc 实例
const aabc = axios.create({
  baseURL:'http://111111111111',
  timeout:3000
})
aabc({
  url:'/home/data',
  params:{
    type:'pop',
    page:1
  }
}).then(res => {
  console.log(res);
})

封装 axios 成一个组件

创建一个 request.vue 文件， 导入 axios

import axios from "axios"   // 导入 axios

在 request.vue 文件中封装 axios

第一种方法：

// 第一种方法
export function request(config,success,failure) {    // config 是请求的地址等基本信息 ， success 是请求成功的回调函数， failure 是请求失败的回调函数
  // 创建 axios 的实例
  const instance = axios.create({
    baseURL:'http://？？？？？？？？',
    timeout:5000
  })

  // 发送真正的网络请求
  instance(config)
  .then(res => {   // 接收请求成功的数据
    // console.log(res);
    success(res)  // 通过 success 函数 返回 请求成功的数据
  })
  .catch(err => {  // 接收请求失败的数据
    // console.log(err);
    failure(err)   // 通过 failure 函数 返回 请求失败的数据
  })

}

在其他文件中使用：

import {request} from '@/network/request.js'  // 引入封装 axios 的 request文件

// 第一种方法
request({
  url:'/home/multidata'   // 请求的地址 , 对应 config 参数
}, res => {               // 接收请求成功的数据 ，对应 success 参数
  console.log(res);
}, err => {               // 接收请求失败的数据 ，对应 failure 参数
  console.log(err);
})

第二种方法：

// 第二种方法
export function request(config) {    // 这里的 config 包含了（baseConfig，success，failure）; config.baseConfig 是请求的地址等基本信息 ， config.success 是请求成功的回调函数， config.failure 是请求失败的回调函数
  // 创建 axios 的实例
  const instance = axios.create({
    baseURL:'http://？？？？？？？？？？？',
    timeout:5000
  })

  // 发送真正的网络请求
  instance(config.baseConfig)
  .then(res => {   // 接收请求成功的数据
    // console.log(res);
    config.success(res)  // 通过 success 函数 返回 请求成功的数据
  })
  .catch(err => {  // 接收请求失败的数据
    // console.log(err);
    config.failure(err)   // 通过 failure 函数 返回 请求失败的数据
  })

}

在其他文件中使用：

import {request} from '@/network/request.js'  // 引入封装 axios 的 request文件

// 第二种方法
request({
  baseConfig:{
    url:'/home/multidata'
  },
  success:function(res){  // 接收请求成功的数据 ，对应 success 函数
    console.log(res);
  },
  failure:function(err){  // 接收请求失败的数据 ，对应 failure 函数
    console.log(err);
  }
})

第三种方法：

// 第三种方法
export function request(config) {    // config 是请求的地址等基本信息 ，

  return new Promise((resolve, reject) => {  // resolve 是请求成功的回调函数， reject 是请求失败的回调函数

    // 创建 axios 的实例
    const instance = axios.create({
      baseURL:'http://？？？？？？？？？？',
      timeout:5000
    })

    // 发送真正的网络请求
    instance(config)
    .then(res => {   // 接收请求成功的数据
      resolve(res)
    })
    .catch(err => {  // 接收请求失败的数据
      reject(err)
    })

  })

}

在其他文件中使用：

import {request} from '@/network/request.js'  // 引入封装 axios 的 request文件

// 第三种方法，也适用第四种方法
request({
  url:"/home/multidata"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

第四中方法：

// 第四种方法
export function request(config) {    // config 是请求的地址等基本信息 ，

  // 创建 axios 的实例
  const instance = axios.create({
    baseURL:'http://？？？？？？？',
    timeout:5000
  })

  // 发送真正的网络请求
  return instance(config)   // 直接返回 instance(config)

}

在其他文件中使用：

import {request} from '@/network/request.js'  // 引入封装 axios 的 request文件

// 第三种方法，也适用第四种方法
request({
  url:"/home/multidata"
}).then(res => {
  console.log(res);
}).catch(err => {
  console.log(err);
})

接下来就是 axios 的拦截器了

// 第四种方法 ，使用拦截器
export function request(config) {    // config 是请求的地址等基本信息 ，

  // 创建 axios 的实例
  const instance = axios.create({
    baseURL:'http://？？？？？？？？？',
    timeout:5000
  })


  // axios 的拦截器
  // 这是 拦截 instance 实例的 拦截器 ， 若要全局拦截 就把 instance 替换成 axios
  // 这是在 发送 请求时 进行的拦截 ; axios.interceptors.request.use(函数,函数),返回两个函数,一个发送成功的函数,一个发送失败的函数
  instance.interceptors.request.use(config => {  // 发送成功的函数
    console.log(config);
    // 请求拦截的作用
    /*
      1.比如 config 中的一些信息不符合服务器的要求
      2.比如每次发送请求时，都希望在界面中显示一个请求的图标
      3.某些网络请求（比如登录（token），必须携带一些特殊的信息
    */

    return config       // 拦截后要 返回return config ，不然拦截请求后 不能 正常请求，会导致请求失败
  },err => {              // 发送失败的函数
    console.log(err);
  })

  // 响应拦截 ， 在 请求 发送成功 ，并得到服务器的响应后进行拦截
  instance.interceptors.response.use(res => {
    console.log(res);
    return res.data    // 响应拦截 一样需要返回return ，不然页面拿不到数据 ，返回res.data 是因为我们只需要 data 里面的数据，res 里面除了 data 其他的数据不需要
  },err => {
    console.log(err);
  })

  // 发送真正的网络请求
  return instance(config)   // 直接返回 instance(config)

}

好了，axios 今天就学习了这些

若是有什么不对的地方，还请大佬指出！